homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Style image border when selected or clicked
sanji41




msg:4384881
 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




msg:4384957
 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




msg:4385135
 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




msg:4385308
 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




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

@Rocknbil,

I will try it again later tonight, thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved