is there anyway to reference jquery ui icons as regular images anywhere in my site?
If you've linked to the jquery CSS, you can get at the icons by applying the .ui-icon base class and the specific icon class (e.g - .ui-icon-close for close button) to your element (usually span)
The jquery wiki has a comprehensive list of icons and their classes, you can find it here : http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework
Just inspect the icon and get the class.
EDIT
Sample usage
<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->
Take a look at this code snipplet: http://www.xinotes.org/notes/note/773/
you can use icon classes from jQueryUI Icons Cheatsheet
Related
I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.
https://material.angular.io/components/button/api
looking the docs, there is this:
that button has the following html:
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
<img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
<span _ngcontent-c1="">Material</span>
</span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>
is that the right way to do it?
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:
<button mat-button>
<mat-icon>mic</mat-icon>
Start Recording
</button>
OR
<button mat-raised-button color="accent">
<mat-icon>mic</mat-icon>
Start Recording
</button>
Here is a link to stackblitz demo.
All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.
You'll need to import MatButtonModule and MatIconModule in your app module file.
From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
In your case, use
<mat-icon>thumb_up</mat-icon>
As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Or import it in your global styles.scss.
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
As it mentions, any icon font can be used with the mat-icon component.
My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css to:
solve the vertical alignment problem of the icon inside the button
material icon fonts are always a little too small compared to button text
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
Add to app.module.ts
import {MatIconModule} from '#angular/material/icon';
& link in your global index.html.
the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just button.mat-button)
button,
a {
&.mat-button,
&.mat-raised-button,
&.mat-flat-button,
&.mat-stroked-button {
.mat-icon {
vertical-align: top;
font-size: 1.25em;
}
}
}
The Material icons use the Material icon font, and the font needs to be included with the page.
Here's the CDN from Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
I was wondering - is it possible to apply the jQuery UI CSS to an entire site without having to apply it individually upon elements?
So, for example, instead of having to do:
<input type="button" value="Submit" class="ui-state-default ui-corner-all" />
to all my buttons, I instead have some sort of class applied at at top-level DIV which will change the entire site whenever it can be (any element that jQuery UI can handle). If it's not possible, it's no big deal, but it would be great if it is.
Yes. You can just call
$('button').button()
from your script to select all button elements using jQuery and apply the jQuery UI button theming to them. See, for example, the sample code on the jQuery UI button demo.
I suppose you could apply it on the $(document).ready(function(){$("*").addClass("ui-state-default")});
This is not tested, so don't take my word for it.
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.