Snippets | Jon Childs

CSS / JS

Ever get frustrated by linked images having an underline when you hover over them? jQuery offers a simple solution.

Here's a snippet that will disable underlining on linked images:


            var images = $('body').find('img');
            
                //store all the images in the document in a jQuery object
            
            var anchors = $(images).parent('a');
            
                //store all the links that affect images in a jQuery object
            
            $(anchors).addClass('img');
            
                //add a class to all of the links in the jQuery object


            a.img{
            text-decoration: none !important
            }

Ideally you would have done this from the beginning, but if you have a lot of linked images that you don't want to go back and refactor, this will cover all of them.

JS

If you're generating links dynamically, and you find that you fill the 'href' attribute with a # or are leaving it empty, clicking it may cause some undesired effect, (in this case, jumping to the top of the page, and reloading the page). This snippet will prevent that!

show hide


            
                //Find all links absent of an href value, or containing a '#' href value
            
            $('a[href="", a[href="#"]').click(function(e){
            
                e.preventDefault();
                

                e.stopPropagation();
            
            });
            
                //Prevent the link from causing the page to jump to the top, or reload the current page

Feeds | Links | Snippets

Here you'll find some helpful code snippets. Want more? Check out the Feeds and Links above.

CSS / JS

JS