PDA

View Full Version : Useful jQuery Scripts


Rob_Che
10-14-2010, 08:22 AM
There are some scripts that I use ALL the time - on pretty much every site I build...

Here's one for starters.

Make a full <li > block a clickable area.
So - you have a list recent blog posts (or any list) and they are built of a few elements (image, title, brief description etc) but you want the whole thing to be clickable.

Try this:

HTML:

<ul id="myList">
<li>
<img src="/image.gif">
<p>
<strong>Title</strong>
Some text
<a href="#">READ MORE</a>
</p>
</li>
</ul>


So, you can see we have four elements in that <li> - but what if a user clicks the image or the title? I guess we could give them ALL link tags but that seems a bit heavy handed - so...


<script type="text/javascript">
$(document).ready(function(){
$("#myList li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
</script>

The script finds the link tag ".find .attr href" and places it as a click function for the li as a block.