Quantcast
Channel: graphiceyedea » workshops
Viewing all articles
Browse latest Browse all 8

jQuery for Designers

0
0


Another brilliant day courtesy of  “for a beautiful web” [#fabw] :)

I had been playing around with various bits of jQuery on several sites – and really seeing the potential of enhancing my designs with it. My problem was not being able to troubleshoot errors and not being able to edit the effects properly to suit my designs. I was starting to gain more understanding and was able to do much more than I thought – but I kept hitting walls… So this workshop with the lovely Remy Sharp was just the ticket to get me going :)


[photo by Remy Sharp]

And it was brilliant – I learnt a lot and left with a full head, bursting with geekery, tons of new ideas and solutions to old and new problems flying through my mind. Now I just hope I will be able to put into practice what Remy taught us, fingers crossed :)

Andy and Sue as always were lovely hosts – the venue was wonderful, the food delicious. We received a beautiful cloth which is delicately embossed with the #fabw pattern and text. Just gorgeous ;) And the workshop was just brilliant.

While Remy’s talk is still fresh in my head (with a few reminders taken from Remy’s slides) – here are just a few of my notes from yesterday for reference:

  • first and most important point was “Build without jQuery” first. Focus on designing the page and making sure it all works correctly with CSS alone before even starting with jQuery. Design the page and once complete – add jQuery a little at a time, testing as you go along. A brilliant quote from the slide:
    (a lot of it is) “all about CSS”
  • one of the advantages of jQuery is that it simplifies – using the JS library allows for simpler and shorter code to implement the effects.
    For example, to get table striping to work in IE6 – instead of several lines of JS code – you only need one:
    $(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • to check whether a website is using jQuery and which version – use FireBug and type the following into the Console:
    $.fn.jquery
  • you can use jQuery on every site – to run scripts and more – using the jQuerify bookmarklet: jQuerify on ‘learning jQuery
  • to install jQuery on your website – you can either keep a copy within your site’s directory or hotlink it to a source repository (from Media Temple, Microsoft or Google). Remy recommended to link to Google – saying it will be very efficient due to the CDN. This works by loading in the geographically closest copy of the script you are using and it is therefore likely that your site’s visitor already has a cached copy in his/her browser – therefore speeding up page loading.
  • code order — all JS should be kept at the very bottom of your HTML code, just before the closing body tag. This will allow the page to load fully and only then begin to read the JS. And the order of the code for using jQuery should be:
    1 – jQuery link
    2 – jQuery plugins
    3 – custom code

    And if you are using other JS libraries in addition to jQuery – put those first, followed by the jQuery order listed above.
    From Remy’s slide:
    <html>
    <head>
    <styles>
    <!– make me beautiful –>
    </styles>
    </head>
    <body>
    <content>
    <!– make me learned –>
    </content>
    <behaviour>
    <!– ooo, matron –>
    </behaviour>
    </body>
    </html>
  • JS usually needs to check for ‘document.ready’ – by placing the code at the very bottom of the page this is no longer required as it will be loaded last, once the rest has already been loaded. The code usually looks like this: $(document).ready(function () {
    // < YOU >
    });
    Following Remy’s advice of the order of code – the above can now be shortened to this:$(function () {
    // < YOU >
    });

    Remy also pointed out that it might be useful to use the below instead, especially when handing over code to others. The code below is practically the same as the one above but has the advantage that it clearly mentions jQuery and can avoid clashes with other JS functions.
    jQuery(function ($) {
    // < YOU >
    });
  • an example of the click function – briefly explained:
    $(‘a’).click(function () {
    alert(‘I got clicked’);
    return false;
    });

    First the anchors are found. Once they are clicked – the function is run (in this case showing an alert text).

    ‘return false’ cancels the default behaviour of the browser which would be to follow the link and redirect.
    For debugging – use the following:
    $(‘a’).click(function(event){
    event.preventDefault();
    alert(‘I got clicked’);
    });

  • WARNING : selectors fail silently, the same way CSS does.
    When you target selectors for use with jQuery and make a mistake (similar to making a mistake in your CSS by getting the selector’s name wrong) – you will not see an error show up. Your function will simply fail but not break the page or show a warning.
    In order to find exsiting selectors within a page – use the FireBug console. The code below would look for any selectors named ‘remy’ in the page’s code and return the result in numbers.
    $(‘remy’).length
  • to target specific selectors within teh page – you can simply use the same names as in the HTML, for example:
    $(‘#nav li.contact’)
    To target selectors found only within a set element – use the following:
    $(‘#main’).find(‘.header,.footer’);
    The above code will look for elements with the class of ‘header and ‘footer’ within the ‘#main’ element.

  • for finer control – use a combination of ‘find’ and then filter the results. For example, first to find all anchors:
    $(‘a’)
    Then to filter the links by title attribute:
    $(‘a’).filter(‘[title]‘)
    A very useful application of this is the finding of links to other file types such as .PDF – then adding a class to them which can be targeted via CSS to add an icon to those links:
    $(‘a[href$="pdf"]‘).addClass(‘pdf’);
    The code above looks for all links which end in pdf and then adds a class of ‘pdf’ to them. To look for links starting with a hash key – you’d write this instead: $(‘a[href^="#"]‘).addClass(‘someclassname’);
  • for faster loading – you can chain functions together though you should avoid chains which are too long.
    For example, the function below first looks for all divs, then shows them, then hides them. Then slides them up and then down. This could be written as separate functions:$(‘div’).show()
    $(‘div’).hide()
    $(‘div’).slideUp()
    $(‘div’).slideDown();

    Or you could write this – putting them all together in a chain, written like this:
    $(‘div’)
    .show()
    .hide()
    .slideUp()
    .slideDown();

    or this:
    $(‘div’).show().hide().slideUp().slideDown();
    To end a chain in case of very long chains – you can use this:.end()
  • a popular jQuery effect is to show extra information when the user rolls over a specific element, like an image for example. Remy pointed out a common mistake is made with this which would cause the effect from carrying on despite the cursor no longer being above the set element. This function could be written like this:$(‘div.picture a’).hover(function () {
    $(this).find(‘strong’).fadeIn();
    }, function () {
    $(this).find(‘strong’).fadeOut();
    });

    To stop the looping effect by telling hover effect to stop properly once mouse is no longer over element – this code below should be used instead:$(‘div.picture a’).hover(function () {
    $(this).find(‘strong’).stop().fadeTo(‘normal’,1);
    }, function () {
    $(this).find(‘strong’).stop().fadeOut(‘normal’,0);
    });

    NOTE: the hover function always needs 2 functions, one for hover and one for mouse out.

There was so much more which I might write up another time – looking at animation via jQuery and some neat Ajax techniques. This would turn into too long a blogpost if I tried to fit it all in. Just for future reference – a few links to get more info and help with jQuery:

I had a great day, learnt lots and met some lovely people, some old faces and new. A huge thank you to Andy [@malarkey] and Remy [@rem]  :-)

PS: in case I made any mistakes in my notes or code samples – please do comment and let me know ;)


Viewing all articles
Browse latest Browse all 8

Latest Images

Trending Articles





Latest Images