• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery SUG Group Introduction
 

jQuery SUG Group Introduction

on

  • 1,548 views

 

Statistics

Views

Total Views
1,548
Views on SlideShare
1,399
Embed Views
149

Actions

Likes
0
Downloads
7
Comments
0

5 Embeds 149

http://www.cakesolutions.net 144
https://www.linkedin.com 2
http://www.slideshare.net 1
http://www.linkedin.com 1
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery SUG Group Introduction jQuery SUG Group Introduction Presentation Transcript

    • Andrew Chalkley
      UI Developer
    • The Proper Way
      CSS
      Ye Olde Way
      Tables
      Obtrusive
    • 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.
    • 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>
    • 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;
      }
      }
    • But wait…
      • window.onload executes after page is completely loaded (with images)
      • it overrides any existing load or click handlers
      • cannot handle class=“new_windowexternal_link”
      • it leaks memory in IE6
      The Answer…
      • CSS Selectors $(“.new_window”) – shallow learning curve
      • Cross-browser support
      • Compatibility mode (DWR, Prototype, etc)
      • Executes when DOM is ready (before images have loaded)
      • Write less, do more
    • $(function() {
      });
      $(“a.new_window”).click(function() {
      });
      window.open( $(this).attr(“href”) );
      return false;
    • 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;
      }
      }
    • $(function() {
      });
      $(“a.new_window”).click(function() {
      });
      window.open( $(this).attr(“href”) );
      return false;
    • DEMO