Style image border when selected or clicked

Forum Moderators: not2easy

Message Too Old, No Replies

Style image border when selected or clicked

sanji41

2:27 pm on Nov 8, 2011 (gmt 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!

rocknbil

5:42 pm on Nov 8, 2011 (gmt 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
}

sanji41

2:22 am on Nov 9, 2011 (gmt 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?

rocknbil

4:53 pm on Nov 9, 2011 (gmt 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.

sanji41

12:54 am on Nov 10, 2011 (gmt 0)

@Rocknbil,

I will try it again later tonight, thanks!