Welcome to WebmasterWorld Guest from 54.145.235.23

Forum Moderators: not2easy

Message Too Old, No Replies

Style image border when selected or clicked

     
2:27 pm on Nov 8, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 0


Hi guys!

Can someone point me in the right direction with this one pls?

I am styling a carousel on jquery using jqCarouselLite, now when the image is "clicked" the border color will change. The problem is I can't do it even though I tried a:active and .current (using another jquery).

here is the js for current code

<script type="text/javascript" charset="utf-8">
//<![CDATA[
jQuery(function() {
jQuery('.current a:active').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('current');
}
});
});
//]]>
</script>


I know I am calling the wrong css class or something.

its the only one I am stuck with, really appreciate it. Thanks!
5:42 pm on Nov 8, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


I think you may misunderstand :active. Active is the state in which the mouse is down, on the link, but as soon as it's released it returns to :visited (I think, or maybe the page has to open first, in which case it's just :link, whatever.) The point is, it **appears** to do exactly what you're telling it to - remains active as long as the mouse is down.

So I am gathering you want the border to "stick" once clicked? For this I think you'll need a switch of some sort to "turn off" currently "active" classes. That is, click -> border sticks -> click something else you need to turn off the border on the first click. Something like this might do it. Basically you step through all the anchors, remove the "active" class for all except the one that has been clicked. Here's a working example to give you an idea, you should be able to switch instances of $ for jQuery (if you need it to resolve some conflict . . . .)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Click Test</title>
<style type="text/css">
#container { display: block; margin: 4em auto; width: 34em; text-align: center; }
#container li, #container li a { display: block; }
#container li { float: left; width: 6.25em; margin: 0 1em; padding: 0; background: #f5f5f5; }
#container li a { float: left; width: 6em; padding: 4em 0; }
.active-class { border: 6px solid #0000a0; }
</style>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container a').click(function() { return swapBorder(this); });
});
//
function swapBorder(clickObject) {
var currentId=clickObject.id;
$('#container a').each(function() {
if ($(this).attr('id')==currentId) {
$(this).addClass('active-class');
}
else { $(this).removeClass('active-class'); }
});
return false;
}
</script>
</head>
<body>
<ul id="container">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="widgets">Widgets</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul>
</body>
</html>


Uuse your own jQuery version or method of inclusion (that's one I had on hand) and when you actually have links, remove the return false (unless you're using Jquery/JS to deliver.)

...
$('#container a').click(function() { swapBorder(this); }); // note return removed
...
else { $(this).removeClass('active-class'); }
});
//return false; Note commented out
}
2:22 am on Nov 9, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 0


@Rocknbil,

Thanks for the code! Unfortunately, it doesn't work. I know how a:active work, the thing that I need is how to style a current selected image on the slider. Active state works, but it disappears after the click.

Maybe a jquery that adds a style when clicked will do?
4:53 pm on Nov 9, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


What doesn't work? The previous code was tested (did you point it to a valid jQuery library?) and shows you exactly how to

style a current selected image on the slider


The previous example styles the anchor, which is what you should do, but can be modified to style the image. The concepts are the same.
12:54 am on Nov 10, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:July 27, 2010
posts: 54
votes: 0


@Rocknbil,

I will try it again later tonight, thanks!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members