Your SlideShare is downloading. ×
jQuery SUG Group Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery SUG Group Introduction

899
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Andrew Chalkley
    UI Developer
  • 2. The Proper Way
    CSS
    Ye Olde Way
    Tables
    Obtrusive
  • 3. CSS evangelists told us that there should be a separation
    of layout from markup.
    JavaScript evangelists tell us today that there should be the separation of behavior from markup.
  • 4. Bad
    <a href=“javascript:window.open(‘somepage.html’)”>Some Page</a>
    <a href=“#” onclick=“window.open(‘somepage.html’); return false;”>Some Page</a>
    Better
    <a href=“somepage.html” onclick=“window.open(‘somepage.html’); return false;”>...</a>
    Best
    <a href=“somepage.html” class=“new_window”>Some Page</a>
  • 5. JavaScript Implementation
    window.onload = function() {
    }
    var anchors = document.getElementsByTagName(‘a’);
    for (vari = 0, anchor; i < anchors.length; i++) {
    }
    if (anchor.className == “new_window”) {
    anchor.onclick = function() {
    varhref = this.href;
    window.open(href);
    return false;
    }
    }
  • 6. But wait…
    • window.onload executes after page is completely loaded (with images)
    • 7. it overrides any existing load or click handlers
    • 8. cannot handle class=“new_windowexternal_link”
    • 9. it leaks memory in IE6
    The Answer…
  • 10.
    • CSS Selectors $(“.new_window”) – shallow learning curve
    • 11. Cross-browser support
    • 12. Compatibility mode (DWR, Prototype, etc)
    • 13. Executes when DOM is ready (before images have loaded)
    • 14. Write less, do more
  • $(function() {
    });
    $(“a.new_window”).click(function() {
    });
    window.open( $(this).attr(“href”) );
    return false;
  • 15. window.onload = function() {
    }
    var anchors = document.getElementsByTagName(‘a’);
    for (vari = 0, anchor; i < anchors.length; i++) {
    }
    if (anchor.className == “new_window”) {
    anchor.onclick = function() {
    varhref = this.href;
    window.open(href);
    return false;
    }
    }
  • 16. $(function() {
    });
    $(“a.new_window”).click(function() {
    });
    window.open( $(this).attr(“href”) );
    return false;
  • 17. DEMO