jQuery UI comes with some good icons.
How can I use them without buttons? Let's say how to create link with plus sign and to react on hover and click by changing icons?
Here is the demo just with icon added.
Upd 1:
On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.
Upd 2:
Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/ - but without that background rectangle, I need just plus sign.
Upd 3:
Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don't know how use it.
Seems I need to define CSS like:
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;
Positions can be easily found at jquery.ui.theme.css file.
But how should I:
define correct background-image url?
modify CSS to react on click, hover?
You can use the icons with any element by adding the ui-icon and the appropriate class for the icon you want to the element.
If you want to add text to the link as well as an icon you'll need to set the icon on a separate element from the text. For example:
<span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span>
To change the icon on hover, you'll need to use some javascript. The following requires jQuery:
$(".MySelector").hover(function() {
$(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() {
$(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
This is not "good", but at least this works.
Please specify your question further, what should happen on click and hover.
Sample
http://jsfiddle.net/gZQzt/2/
HTML
<a href="#" class="img-link">
<span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
<span class="link-text">Link</span>
</a>
CSS
.img-link {
text-decoration: none;
}
.link-text {
text-decoration: underline;
}
Try this:
<a>
<span class="ui-icon ui-icon-plusthick"></span>
</a>
and:
$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});
You can see it here: http://jsfiddle.net/gZQzt/4/
Since I can't reply to answers yet, here's what I did using Kyle Traubermann's code:
<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>
Basically, you have to put the state in a separate div. This changes the image to the right colour but it also adds a border and gloss to it so I had to disable that with nones. You might need a color: none; in there as well.
There's probably a simpler way to do this but I don't really know much about CSS yet.
Finally, I've decided just to use jQuery UI's image files - How to use one icon from different image files?:
a:link,a:visited { /* for regular non-hovered, non-active link styles */
width: 16px;
height: 16px;
background-image:
url(images/defaultStateImage.png);
background-position: -32px -128px;
}
a:hover { /* for hover/mouse-over styles */
url(images/hoverStateImage.png);
background-position: -32px -128px;
}
a:active { /* for click/mouse-down state styles */
url(images/clickStateImage.png);
background-position: -32px -128px;
}
UI icon as anchor (no text):
Works for me:
<span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span>
Relevant: order of ui class names.
Related
I am using javascript to control a button for a 3d carousel and trying to use an image instead of the button. My HTML looks like:
<button id="previous" data-increment="-1" >Previous</button>
<button id="next" data-increment="1">Next</button>
I tried the obvious by adding img tag where "Next" and "Previous" are:
<button id="previous" data-increment="-1" ><img src="URL" /></button>
That made the images appear, but when clicked they do nothing. I also tried to alter it with CSS and could change the style of the buttons, but the same images would not appear for both buttons. I need separate images for Next and Previous:
button {
background-image: url(images/myimage.png);
background-repeat: no-repeat;
height: 50px;
width: 200px;
border: none;
}
button span {
display: none;
}
Any ideas on why this is not working?
There are a number of things wrong here.
There is no span element in your buttons. button span style isn't doing anything for you. If you want to hide the text, I suggest using color: transparent;.
You need to apply a different image for each button, which means you need different selectors.
button#previous {
background-image: url('prev.jpg');
}
button#next {
background-image: url('next.jpg');
}
Generally, applying styles to a button won't affect listeners added in js. Something must be wrong in your js if the buttons aren't working anymore. Please post the relevant code if you'd like help with this.
I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.
I am using a WordPress plugin which creates the following output:
<li>
<img src="/media/image-thumbnail.png"/>
Post Title
</li>
I applied an a:hover style for both the image and the text. But of course they are triggered separate of each other, as there are two links being generated. I would like to have them triggered both on hover (in my case: image border color changes and text color changes - no matter which of the two elements are being hovered).
Of course I could fiddle into the plugin source and change how it is built there, but due to update-ability I thought it would be cleaner to change it with a few lines of jQuery. Unfortunately I don't know how to approach this and would be thankful for ideas!
Add the hover on the li
FIDDLE
li:hover img
{
border: 2px solid green;
}
li:hover a
{
color: orange;
}
With Jquery you could use the hover function.
Something like this
$('.wp_rp_thumbnail, .wp_rp_title').hover(function(){
$('.wp_rp_thumbnail img').css({"border":"1px solid #fff"});
$('.wp_rp_title').css({"color":"#fff"});
});
Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/
I tried searching for an answer first, but this seems to be an edge case.
I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.
I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/
I'll try adding the code here.
<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
<li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
<li style="float: left"><a class="linkExternal" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
$(this).addClass('iconNewWindowLeave');
});
</script>
I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.
So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to add some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.
try to add : a display:inline-block; or display:block; to .iconNewWindowLeave
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }
(not tested)
Whenever you have some floating containers on the page, always clear the parent container.
In your case add a style clear:left on the ul. That should work.
And in case you are using many float throughout your application, better add a clearfix class on the parent container.