CategorySnippets

How to Turn the whole element into a clickable link

So we’ve probably all come across that situation where we have a nice list of articles, or images with descriptions that we want to make clickable.

Often we see developers wrap an anchor tag around the image, and another one around the text.. take this fairly standard example:

<div class="list-item">
 <div class="item-img">
 <a href="#"><img src="myimage.jpg"></a>
 </div>

 <div class="item-text">
 <a href="#">Check out this awesome article about cats!</a>
 </div>
</div>

That looks great, but there are a couple of issues:

  • You have to create two anchor tags
  • You probably have to fix some CSS to make sure there are no borders, or horrible underlines
  • It doesn’t make the whole element clickable..

Continue reading

Make your own custom share buttons

A great alternative to shareThis, or addthis is to add your own share buttons.

The Share Buttons

Share on Google+Share on Pinterest

Feel free to test them out 😉

Here’s a javascript snippet for sharing to Twitter, Facebook, Google+ and Pinterest

Continue reading

jQuery: Make all external links open in a new window

It’s easy to forget to add that target=”_blank” each time, and even more difficult to remind clients to select that option in your WYSIWYG!

In a lot of websites I develop we use jQuery – and one of the things I place at the bottom of every website is a snippet to add target=”_blank” to every external link tag.

The jQuery/JavaScript


$(document).ready(function(e){
 $("a[href^='http://'],a[href^='https://']").filter(function()
 {
  return this.hostname && this.hostname !== location.hostname;
 }).attr('target','_blank');
});

© 2017 Chubby Ninja

Theme by Anders NorenUp ↑