jQuery for Designers


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:

binäre optionen fazit 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]  :-)

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

16/05/2010 blog,workshops

14 Responses to “jQuery for Designers”

  1. Gravatar

    binäre optionen informationen 16/05/2010

    Ichi says:

    fxflat binäre optionen erfahrungen Prisca,
    Thanks for share your knowledge and your experience. I’m very glad you enjoyed it.
    I have to say that I feel a bit lost, but lucky me, I’ll have the opportunity of have a class with you about it. Then I’ll be ready to have a look at all the links you mention.

    opcje binarne rozliczanie Thanks
    Ichi

  2. Gravatar

    ثنائي إشارات خيارات التداول لnadex 16/05/2010

    prisca says:

    الخيارات الثنائية إشارات البلاتين Ichi :)
    yes, it was a fabulous day – and I am hoping to teach you all I’ve learnt on wednesday – as best as I can anyway :)

  3. Gravatar

    Köp Inderal på nätet utan recept 16/05/2010

    Ichi says:

    wholesale fincar Oh yes, I know it’s gonna be great Prisca :)

  4. Gravatar

    opcje binarne xm 16/05/2010

    baiba says:

    quale piu difficile il forex o opzioni binarie ogh….. :))))
    I wish I could sit in that class again :))
    This is interesting topic..

  5. Gravatar

    grafici eur usd tempo reale 16/05/2010

    Tony says:

    köpa Viagra phuket Thanks for that : much nicer and more structured than my own hand written notes :-)
    and I agree: great day and course :)

  6. Gravatar

    lista market meker opzioni binarie 16/05/2010

    Jenna says:

    binäre optionen predator template I’m not sure if I misunderstood your write up about document.ready but just in case I didn’t…

    grafici opzioni binarie android The shortening of $(document).ready(function() {}) to $(function() {}) has nothing to do with how you order your code.

    binary options pdf $(callback) binds a function to be executed when the DOM is ready. Therefore, if you use $(function() {}) you are still checking that the DOM is ready before executing. It is just shorthand for $(document).ready(function () {}) and can be used irrelevant to the order of your code.

    So, if you do not need to check for DOM ready, you do not need to use $(function() {});

    http://api.jquery.com/jQuery/#jQuery3

    Also, I would recommend against doing this:

    $(‘div’).show();
    $(‘div’).hide();
    $(‘div’).slideUp();
    $(‘div’).slideDown();

    That will search the DOM for ‘div’ every time $(‘div’) is called which will have a negative impact on performance. Instead, cache the result and then manipulate it:

    var myDiv = $(‘div’);

    myDiv.show();
    myDiv.hide();
    myDiv.slideUp();
    myDiv.slideDown();

    … or chain instead as shown in your other example :)

  7. Gravatar prisca says:

    Thanks, Tony :)

    And Jenna, thanks so much for your comment and for clarifying some of the details :) Much appreciated :)
    About the chaining – I did mean to highlight that it is better to chain functions together rather than write them separately. Just finding it hard to word as JS still feels like somewhat unfamiliar territory to me. Your notes really helped me understand it better ~ thank you :)

  8. Gravatar Jenna says:

    I tend to do the caching thing rather than chaining because it can get a little illegible and hard to maintain when chains get really long!

    And no worries, glad I could help :)

  9. Gravatar prisca says:

    Jenna, thanks, hoping to get to the stage of understanding what exactly you mean by doing caching ;) will get my head stuck in and hope to learn more as I go along :)
    And really like your site :) very nice ;)

    Also, just to keep all things jQuery from Remy in one place – 2 pages listing good jQuery plugins to use:
    http://marcgrabanski.com/jquery-plugins-toolbox/
    https://jqueryui.pbworks.com/Essential-Controls-List

  10. Gravatar laura says:

    great post, thanks for sharing. Now I need more time to play with jQuery :D

  11. Gravatar Sumiko Vagott says:

    Cheers, great post.

  12. Gravatar internet and computer says:

    nice introduction about jquery in here, this make me want to know more.

  13. Gravatar Chandra Aadi Rug AAD1303 says:

    I enjoy your wp theme, where did you get a hold of it?

  14. Gravatar prisca says:

    Chandra,
    the theme is a custom theme I designed myself, glad you like it ;)

graphiceyedea prisca schmarsow – portfolio

portfolio