Dave Russell » JQuery

Detect browser window focus

Dave — Wed, 13 Apr 2011 11:55:50 +0000

The scenario: You have a link that creates a hidden iframe which generates a file download (a pdf of the current page in my example). You have cleverly given the user some visual feedback in the form of an animated ‘waiting’ gif and you would like the clever animation to go away once the user has saved the file.

Using a javascript setTimeout is just not going to work as you don’t know how long this will take, so the logical thing is to detect when the browser window gets focus again.

functiononFocus(){ $(‘#icon_pdf’).removeClass(‘icon_pdf_waiting’);};
if(/*@cc_on!@*/false){ document.onfocusin=onFocus;/*IE*/}else{ window.onfocus=onFocus;}
    $(‘#icon_pdf’).click(function() {

        $(this).addClass(‘icon_pdf_waiting’);

        $(‘iframe#pdfFrame’).remove();

        $(document.body).append(‘’);

        $(‘iframe#pdfFrame’).attr(‘src’, ‘/pdf/save.aspx?url=’ + location.href);

    });

The icon_pdf_waiting class replaces the existing icon with a waiting icon, so removing the class once you finished puts the existing icon back.

I only needed the onfocus event, but you could also make use of the onblur if need be.

A truly versatile three column template

Dave — Mon, 11 Apr 2011 13:30:23 +0000

There are hundreds of 3 column templates out there, so what’s one more right? Well the difference here is that this one template can handle 1,2 or 3 columns, purely dependent on the existence of the columns on the html. So, if you have a CMS system and you generate a left or right column, then it will be rendered correctly, but if not then the content will stretch accordingly.

First we need some structure

<div id="skin" class="align rel">

        <div id="page" class="abs">

            <div id="main" class="column">

                <h1>Heading</h1>

                <div id="startcontent" class="content">

                    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>

                </div>

            </div>

            <div class="rel" id="footer"><p>footer</p></div>

            <div id=‘left’ class=‘column abs leftcolumn’><h2>Left</h2></div>

            <div id=‘right’ class=‘column abs rightcolumn’><h2>Right</h2></div>

        </div>  

    </div>

    <div id="bannerimage" class="abs"><a class="align">banner</a></div>

Some CSS (I like to include a reset.css before this to clear out any cross browser issues)

.align          {width:1004px;margin:0 auto;}

    .rel            {position:relative;}

    .abs            {position:absolute;}

    .displayblock   {display:block;}

    #page           {width:1004px;top:340px;background-color:#fff;}

    #left           {top:0;left:0;width:220px;background-color:#eee;}

    #right          {top:0px;left:740px;width:264px;background-color:#eee;}

    #main           {margin:0 10px;background-color:#bbb;}

    .incleft #main  {margin-left:220px;}

    .incright #main {margin-right:265px;}

    .content        {margin:27px 30px 100px 30px;}

    #bannerimage    {top:0px;left:-1px;z-index:-1;width:100%;height:600px;margin:0 auto;background-color:#ccc;}

    #bannerimage a  {height:195px;margin-top:85px;display:block;}

    #footer         {width:1004px;height:200px;background-color:#ddd;}

And then the javascript (remember to add the jQuery library and an optional equal heights plugin)

//—Column display manager
if($(‘#page .leftcolumn’).length>0){ $(‘#page’).addClass(‘incleft’); $(‘#left’).addClass(‘displayblock’);}
if($(‘#page .rightcolumn’).length>0){ $(‘#page’).addClass(‘incright’); $(‘#right’).addClass(‘displayblock’);}
        //—Column equal heights | dependancy: jquery.equalheights.js

        if ($(‘.column’).length > 1) { $(‘.column’).equalHeights(); }

The great thing about this template is that it justs works – remove the #left div and the content takes up the first two columns, remove the #right div and the content takes up the last two columns. Take out # left and #right and, I’m sure you’ve guessed it, the content takes up all three columns.

Multi Column Lists with jQuery and CSS

Dave — Mon, 11 Apr 2011 12:43:29 +0000

I found myself needing to solve this problem and some googling revealed that I was not the only one. The challenge I had was how to take a long list of items and make them wrap, creating columns, newspaper style next to each other. The closest I got was from the guys at alistapart, but still not quite what I was after.

So, with coffee mug charged and appropriate tunes on the ipod I set out to solve some problems. The resulting jQuery function is actually quite succinct – maybe I have left something out, but it is exactly what I need: The list is dynamic, so I never know quite how long it is going to be and I do not want children elements to be spread over multiple columns.

The list goes something like this

<ul id="test">

                <li>Parent

                    <ul>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                    </ul>

                </li>

                <li>Parent

                    <ul>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                        <li>child</li>

                    </ul>

                </li>…

and the javascript something like this:

jQuery.fn.multiColumnList=function(settings){

    settings = jQuery.extend({

        width: 300,

        maxheight: 400,

        forceWidth:false
}, settings);
var $originallist = $(this);
var cols = Math.round($originallist.width()/ settings.width);
var colwidth = Math.floor($($originallist).width()/ cols);
var size = $(‘>li’,this).size();
var newlist ="";
var currentColumnHeight = $(this).find(">li").eq(0).height();
var currentColumnContents =‘’ + $(this).find(">li").eq(0).html() + ‘
’;
    for (i = 0; i < size; i++) {
        if ((i + 1) < size) { 

            if (currentColumnHeight < settings.maxheight) {

                currentColumnContents = currentColumnContents + ‘
’ + $(this).find(">li").eq(i + 1).html() + ‘
’;

                currentColumnHeight = currentColumnHeight + $(this).find(">li").eq(i + 1).height();
}
else{

                newlist = newlist +‘’ + currentColumnContents + ‘’;

                currentColumnContents =‘’ + $(this).find(">li").eq(i + 1).html() + ‘
’;;

                currentColumnHeight = $(this).find(">li").eq(i).height();
}
}
}

    newlist = newlist +‘’ + currentColumnContents + ‘
’;
    $(newlist).insertBefore($originallist);

    if (settings.forceWidth) {

        $(‘ul.megacol’).css(‘width’, settings.width);

    }

    $originallist.remove();

    return this;

}

Lastly, a sprinkling of CSS to make sure your new columns render next to each other

.megacol    {float:left;}

To make this all come together, make sure you have included the jQuery library and the function before calling it:

$(document).ready(function() {

            $("#test").guidemega();

        });

A really really flexible CSS layout

Dave — Wed, 13 Jan 2010 13:09:01 +0000

This is a really really flexible layout that does not make use of tables and can be used as either a 1,2 or 3 column layout by simply including or omitting the left and right columns. The content is king, so the content comes first in the html followed by the rest. The structure is controlled via CSS with a little bit of coolness added on thanks to jQuery.

The top banner code is there only to show what is possible, the reason I built this was to have one template that could handle any layout. The interesting thing about the top banner though is that there are two background images on top of each other which creates a lot or flexibility when it comes to banner imagery that overlaps the extents of the 960 by x height banner area.

I have used one jQuery plugin to force equal height columns (1kb) and made use of the cdn for the jquery source. So this should be really quick as well as flexible.

Demo

Simple, accessible, standards based and validated Form

Dave — Fri, 08 Jan 2010 10:29:58 +0000

We all know that tables are evil and you run the risk of being seriously uncool if you are caught using them. But when it comes to forms they really make cross browser layouts that much easier, which is why there are so many forms that use tables. In the interest of good standards based design I have created a form based on fieldsets and definition lists.

There are actually a few points to mention:

Definition lists are used to layout name/value pairs,
jquery validation modified from this article,
a conditional stylesheet has been used to please that other browser,
the sliding doors technique has been used to style the submit button,
Eric Meyer’s css reset was used to initialise defaults across browsers,
Required fields denoted by a star just by adding a class to the dt tag.

This form has been tested in all the major browsers: ie6+, firefox and chrome.

The Demo

jQuery Infinite Loop

Dave — Fri, 11 Dec 2009 07:20:25 +0000

After looking around for a while I could not find something that would create a closed loop effect when scrolling through options in a carousel… so i had to build it. There are a lot of gallery type carousels that will left you click left and right to navigate through, but come to a dead end once you hit the first of last item. I wanted to be able to continue clicking to go round and round through the options.

Check out the demo.

Showing the loading icon when jQuery is waiting for a response

Dave — Thu, 03 Dec 2009 14:39:04 +0000

Here’s a very simple method of putting an overlay on the page when you are making an asynchronous call using $.ajax. As the page does not refresh, you need to alert your user that work is actually been done and that they cannot interact with the page until you have finished

The css:

.lightbox_bg {

        background:#ffffff none repeat scroll 0 0;

        display:none;

        height:800px;

        left:0;

        filter:alpha(opacity=50);

        opacity: 0.5;

        top:0;

        width:100%;

        z-index:1110;

        display:none;

        position:fixed;

    }

    .modal{

        position:absolute;

        left:45%;

        top:45%;

        z-index:1111;

        width:32px;

        height:32px;

        background:url(/image/of/your/choice.gif) #fff 50% 50% no-repeat;}

The javascript:

$(‘body’).ajaxStart(function() {

        $(‘’).addClass(‘lightbox_bg’).appendTo(‘body’).show();

        $(‘’).addClass(‘modal’).appendTo(‘body’);

    });

    $(‘body’).ajaxStop(function() {

        $(‘.lightbox_bg’).remove();

        $(‘.modal’).remove();

    });
Thats it, now everytime you do your ajax magic the ajaxstart method will kick in and do its bit – then when its finished the ajaxstop method will remove the overlay.

Ajax using .Net and jQuery – Revised and improved with help from Json

Dave — Thu, 03 Dec 2009 14:26:25 +0000

I previously wrote a post outlining a simpler method of making asynchronous calls with jQuery. It turns out that in practice that method was exactly that – too simple. It works fine when you only need one value back, but if you need to work with something a little more complex then try out my new method that uses a JSON object. So the basic overview is as follows:

create an object server-side on page load and add it to the DOM
populate the object using javascript
pass it back to a webservice using jquery’s ajax method and json
use the new object serverside and pass it back

Ok, so lets get started by creating the object in your webservice:

public class Person

    {

        public string Name { get; set; }

        public string ContactNumber { get; set; }

        public string Description { get; set; }

    }

Then in your page load you can inject this object into the DOM:

var objPerson = new Webservice.Person();

var js = new JavaScriptSerializer();

Page.ClientScript.RegisterArrayDeclaration("_person", js.Serialize(objPerson));

Now you can use this object with javascript:

…
function AjaxMethodJSON(serviceFn, paramArray, successFn, errorFn) {

    $.ajax({

        type: "POST",

        url: serviceFn,

        contentType: "application/json; charset=utf-8",

        data: "{‘clientobject’:" + JSON.stringify(paramArray) + "}",

        dataType: "json",

        success: successFn,

        error: errorFn

    })

;
…

$("#btnSubmit").click(function() {

        objPerson.Name = $(‘#txtName’).val();

        objPerson.ContactNumber = $(‘#txtContactNumber’).val();

        objPerson.Description = $(‘#txtDescription’).val();

        AjaxMethodJSON("/webservices/Webservice.asmx/UpdatePerson", objPerson, AjaxSuccessStep, AjaxFailed);

    });

If you have been paying attention you may be thinking – stringify? The official explanation from json.org: If the stringify method sees an object that contains a toJSON method, it calls that method, and stringifies the value returned. This allows an object to determine its own JSON representation. So remember to add a reference to json2.js upstream from this code.

function AjaxSuccessStep(result) {

        if (result != null) {

            var obj = result.d;

            objPerson = JSON.parse(obj);

//got the updated object back, now you can            

//do some more stuff with it

        }

    }

There you go. This works very well when you are stepping through a wizard and updating a few fields with each step.

An undocumented selector for jQuery – Contains Word

Dave — Tue, 24 Nov 2009 08:17:13 +0000

Here’s a useful and as yet undocumented feature of jQuery’s attribute selector, the contains word feature – here’s how it works:

suppose you want to select a series of elements based on a class or rel or whatever. In this case I want to select all the links with the class .mylinks – but only those with the rel containing ‘something’:

<a rel="something else" href="#">this is a link</a>

<a rel="thething other" href="#">this is a link</a>

<a rel="something more" href="#">this is a link</a>

<a rel="something up" href="#">this is a link</a>

<a rel="nothing down" href="#">this is a link</a>

<script type="text/javascript" charset="utf-8">

$(function() {

//contains word

$(‘.mylinks[rel~=something]‘).addClass(‘foundyou’); //note the important selector: ~=

});

script>

Using jQuery to check if all radio buttons have been checked

Dave — Tue, 17 Nov 2009 12:19:40 +0000

If you find yourself needing to check if all radio button groups have been checked try this dead simple solution made possible by jQuery:

$(document).ready(function() {

if ($(‘:checked’).length != 5) { alert(‘Please answer all the questions..’); return false; }

});