Digbyswift is based in Leeds, West Yorkshire offering web and digital solutions. With over a decade of experience in corporate and agency web development, Digbyswift can meet and support your requirements, whether it be MVC or web forms development, Umbraco, bespoke CMS build and maintenance, ecommerce, SEO and Google analytics or even client training. Read more ...

Clickable panels using jQuery

By Digbyswift at February 08, 2011 08:28

One thing I’m always in need of is to make a block element of a web page clickable. For example, the block may be a DIV element containing an image, heading and summary text. It may be a table row, a list element, search result or a point of sale.

The way I would need the element to behave is, once clicked, to navigate the user to the URL specified in the first anchor within the panel.

I use the following code to achieve this:

$(document).ready(function() {

    SetPanelLinks();

});

function SetPanelLinks() {

    $('.linkpanel')
        .click(function() {
            var link = $(this).find("a").eq(0);
            location.href = link.attr("href");
        })
}

This of course relies upon me placing a “linkpanel” class on each element I require to inherit this functionality.

I can further extend this by allowing for a rollover state:

function SetPanelLinks() {

    $('.linkpanel')
        .click(function() {
            var link = $(this).find("a").eq(0);
            location.href = link.attr("href");
        })
        .mouseover(function() {
            $(this).css("cursor", "pointer");
            $(this).toggleClass("linkpanel_hover", true);
        })
        .mouseout(function() {
            $(this).css("cursor", "default");
            $(this).toggleClass("linkpanel_hover", false);
        });
}

I’m absolutely sure this is far from perfect – for example, there is no target consideration. But it does the job nicely.

Image LazyLoad plugin for jQuery

By Digbyswift at August 05, 2010 04:19

The Lazy Load plugin has to be one of the best jQuery plugins I’ve seen yet. For image heavy sites, it will certainly take the edge off loading times.

Its really easy to implement too. You obviously need a reference to the jQuery library and a reference to the LazyLoad library:

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.mini.js"></script>    

You then need the following javascript code to call the LazyLoad routine:

$(document).ready(function() {
    $(function() {
        $("img").lazyload({
            placeholder : "../images/grey.gif", 
            threshold : 50,
            effect: "fadeIn"
        });
    });
});

The example above will fade any images in within 50px of the page fold.

Nice.