ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

How To Make Entire Block Clickable Using jQuery?

How To Make Entire Block Clickable Using jQuery?

I’m sure many web masters out there link various websites on their blog. Some tweak the links with a background color while few keep it simple! What if we make an entire block click-able rather than just the anchor tag present in the block. To better understand about the same, take a look at the “Random Posts” section on the footer of SML. You’ll notice that only the links are click-able but not the entire block. In this article, I’ll help you achieve a complete block click-able effect using Jquery.

entire block clickable 550x155

Assuming that you have an unordered list <ul> on your blog with a nested list <li> in it. Let’s also assume that you have a class name assigned to the ul list say “my-list”.  So, your HTML part should be something like the one shown below.

<ul class="my-list">
 <li>
 <a href="#">LINK NAME</a>
 </li>
 <li>
 <a href="#">LINK NAME</a>
 </li>
 <li>
 <a href="http://www.demo.shoutmeloud.com">Demo Blog Coming Soon</a></p>
 </li>
</ul>

If you don’t possess a ul section, then use the above HTML part to add one anywhere on your template. Replace # with the URL you wish to link and LINK NAME with the name you wish to add for your links. An example is shown in the last <li> tag for your reference. Next, you’ll need to define a simple CSS for the class. You may use the following CSS  code for the same.

.my-list {
margin: 0;
padding: 0;
list-style: none;
}
.my-list li {
background: #000;
padding: 10px 20px 10px;
border-top: solid 1px #474747;
cursor: pointer;
}
.my-list li:hover {
background: #D3D3D3;
}

Note: You need not add the above CSS if you already possess a class name “my-list”. The above code is only for those who don’t possess a <ul> section on their blog.

WordPress Users may add the above codes to your custom.css file while users on blogspot shall add the above code before ]]></b:skin> on your blogger template. Once you add the above class name to your ul list, all you need to do is just insert a small piece of script that works on Jquery to make the entire block click-able. To do so, first ensure that you have the latest Jquery file running on the head section of your blog.

If you don’t have one running on your blog, then I suggest you add one. There are lots of interesting effects possible with Jquery & CSS, which I’ll be posting in the upcoming days. So, get one for your blog now!  Blogspot users may add the following script to just above </head> to get the latest jquery file running on their blogs.

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/&gt;

Now, that you’ve added the main jquery file, it’s time to add the script that shall make the entire block clickable. To do so, add the following script just before </head> in your template. That’s it! Save your template and your done!

&lt;script type='text/javascript'&gt;
$(document).ready(function(){
$(".my-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
&lt;/script&gt;

WordPress users may refer the following link to know about adding custom javascript on their template – Using JavaScript On WordPress. How does this stuff work? Well, the script actually finds the anchor tag present in the li element of the class “my-list” and redirects the browser’s location to the href value of the anchor tag.

The above script was tested to work on all major browsers – IE, FF, Opera, Chrome and Safari. I hope you understood what I blabbered in the article above. If you find it interesting or rather too complicated and need some assistance, then SHOUT at ME, a little LOUD via comments. :)

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 26 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


TA

{ 13 comments… add one }

  • Durgesh Chaudhary

    When you write codes be sure you write in the code view else it will display their code like in your 2 code blocks over there.

    Nice article on JQuery

    Reply
  • Amit

    Great Tutorial Mukund Thanks,I did not do this but will try

    Reply
  • Aditya Saxena

    Hi Mukund,

    I’ve done this about 25 times (the CSS stuff) in many navigation menus – and it works 100% of the times. What I’m trying to say is that css is always lighter than javascript – and hence, jquery should be used only in those cases where css would not work – many css3 properties do not work in modern browsers, and in those cases – jquery is a perfect alternative.

    Reply
    • Mukund

      Yes! Jquery is browser compatible! Your right! I accept! CSS is always lighter than JavaScript – known fact. The results shall be narrowed down this way – either you choose your blog to load faster (not alike on all browsers) or make your blog alike on all browsers but with a little more weight to the theme:)

      Reply
  • Atish

    This is very cool. I always keep on searching about jquery stuff and i got it today. I love this. thanks for the share.

    Reply
    • Mukund

      Thanks for the comment Atish! You’ll find more tutorials using Jquery and CSS on SML from now on:)

      Reply
  • Dinesh Verma

    jquery make every thing so easy, please add a tutorial to hover table rows on hover.

    Reply
    • Mukund

      Sure! I’ll come up with some tutorial about customizing tables (using Jquery or may be with simple CSS).

      Reply
  • fazal mayar

    aditya you are right but this still is a tremendous tutorial as always thanks mukund.

    Reply
  • eTuts

    Using jquery for unwanted things slows down site i think. What do you say Mukund? If we want to make our blog look more stylish then we can make use of this.

    Reply
    • Mukund

      Hmmm! Definitely not much! Because, we include only one external jquery (main file) file and the rest are internally defined on the blog! So, it’s pretty fine to add them provided you don’t add too many of that sort!

      Reply
  • Mukund

    Well, it will work in few cases but not all! For example, in the random posts section below, if you do that you’ll end up with just the link appearing as a block. In other words, you’ll see the anchor tag alone as a block with the background color and the entire block shall not be click-able… Just try it yourself!

    Reply
  • Aditya Saxena

    Instead of this, what we can do is add ‘display:block;’ to all the anchor tags and it will span the entire ‘li’.

    In this case, we won’t have to write any javascript/jquery and just css/plain html will serve our purpose.

    Reply

Leave a Comment