Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using YUI Dom

to tame the Browser

       Christian Heilmann
  Yahoo! F2E Summit Asia 2007
Quick reminder

• Development according to web standards
  means first and foremost separation.
• Specifically separation ...
addClass batch generateId get
getAncestorBy getAncestorByClassName
getAncestorByTagName getChildren
getChildrenBy getClien...
Use cases for the DOM utility

•   Using CSS Classes
•   Getting elements from the DOM
•   Using the browser dimensions
• ...
Using CSS Classes


• addClass()
• removeClass()
• hasClass()
• replaceClass()
• getElementsByClassName()
Why?
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely ...
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely ...
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely ...
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely ...
Example:

Hiding all “trigger” links in a main section
when JS is available.
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var ...
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var ...
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var ...
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var ...
Magic JavaScript Pixy Solution

$('#main a.trigger').hide();
My fave:

document.body.className = 'js';

// or
var b = document.body;
var bc = b.className;
b.className = bc ? bc + ' js...
Getting elements from the DOM

• inDocument()
• isAncestor()
• getElementsByClassName
• getElementsBy
• get
• batch
Using the browser dimensions

• getViewportWidth()
• getViewportHeight()
• getDocumentWidth()
• getDocumentHeight()
Using element dimensions

• getX(), getY(), getXY()
• setX(), setY(), setXY()
• getRegion()
 – Region union
 – Region inte...
Using element dimensions
Using element dimensions

• Each of these methods can take an ID, a
  reference of an HTMLelement or an array
  of element...
Using element dimensions

• The Dom utility does not care if the
  element is positioned absolute, relative or
  static.
•...
Using element dimensions

• The get and set methods of x and y are
  very straight forward.
• They return the left, the to...
Using element dimensions

var xy =
  YAHOO.util.Dom.getXY('hd');
// = [128, 0];
YAHOO.util.Dom.setXY('hd',[128,-
  10]);
/...
Using element dimensions

• By using the getRegion() method you
  can read out the screen estate the
  element occupies.
•...
Using element dimensions
var h =
  YAHOO.util.Dom.getRegion('hd');
// h =
// {0:128
// 1:0,
// top:0,
// right:878,
// bot...
Using element dimensions

• top, left, right, bottom are the pixel
  locations on the page.
• There are shortcuts for left...
Using element dimensions

• Using these properties you can also
  calculate the dimensions of the element.
• Simply subtra...
Using element dimensions

• The Region() component does a lot
  more for you though.
• By calculating the region occupied ...
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contai...
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contai...
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contai...
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contai...
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.inte...
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.inte...
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.unio...
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.unio...
Styling elements

• getStyle()
• setStyle()
Styling Elements

• You might wonder why you’d need these
  two methods as seemingly
  element.style.property = value
  wo...
Styling Elements

• The other benefit is that you can use the
  CSS selector names instead of the
  camelCased JavaScript ...
CSS normalization

obj.style.marginTop = '10px';

               vs.

YAHOO.util.Dom.setStyle(obj,
'margin-top','10px');
CSS normalization

• Furthermore, opacity is not a nightmare
  any longer:

YAHOO.util.Dom.setStyle(obj, 'opacity','.2');
CSS normalization

• And last but not least, float can be
  used:
YAHOO.util.Dom.setStyle(obj, 'float','left');
Thanks!
Upcoming SlideShare
Loading in …5
×

of

Taming the browser with the YUI Dom Component Slide 1 Taming the browser with the YUI Dom Component Slide 2 Taming the browser with the YUI Dom Component Slide 3 Taming the browser with the YUI Dom Component Slide 4 Taming the browser with the YUI Dom Component Slide 5 Taming the browser with the YUI Dom Component Slide 6 Taming the browser with the YUI Dom Component Slide 7 Taming the browser with the YUI Dom Component Slide 8 Taming the browser with the YUI Dom Component Slide 9 Taming the browser with the YUI Dom Component Slide 10 Taming the browser with the YUI Dom Component Slide 11 Taming the browser with the YUI Dom Component Slide 12 Taming the browser with the YUI Dom Component Slide 13 Taming the browser with the YUI Dom Component Slide 14 Taming the browser with the YUI Dom Component Slide 15 Taming the browser with the YUI Dom Component Slide 16 Taming the browser with the YUI Dom Component Slide 17 Taming the browser with the YUI Dom Component Slide 18 Taming the browser with the YUI Dom Component Slide 19 Taming the browser with the YUI Dom Component Slide 20 Taming the browser with the YUI Dom Component Slide 21 Taming the browser with the YUI Dom Component Slide 22 Taming the browser with the YUI Dom Component Slide 23 Taming the browser with the YUI Dom Component Slide 24 Taming the browser with the YUI Dom Component Slide 25 Taming the browser with the YUI Dom Component Slide 26 Taming the browser with the YUI Dom Component Slide 27 Taming the browser with the YUI Dom Component Slide 28 Taming the browser with the YUI Dom Component Slide 29 Taming the browser with the YUI Dom Component Slide 30 Taming the browser with the YUI Dom Component Slide 31 Taming the browser with the YUI Dom Component Slide 32 Taming the browser with the YUI Dom Component Slide 33 Taming the browser with the YUI Dom Component Slide 34 Taming the browser with the YUI Dom Component Slide 35 Taming the browser with the YUI Dom Component Slide 36 Taming the browser with the YUI Dom Component Slide 37 Taming the browser with the YUI Dom Component Slide 38 Taming the browser with the YUI Dom Component Slide 39 Taming the browser with the YUI Dom Component Slide 40 Taming the browser with the YUI Dom Component Slide 41 Taming the browser with the YUI Dom Component Slide 42 Taming the browser with the YUI Dom Component Slide 43 Taming the browser with the YUI Dom Component Slide 44 Taming the browser with the YUI Dom Component Slide 45
Upcoming SlideShare
Integrating Technology Using Digital Presentations
Next
Download to read offline and view in fullscreen.

7 Likes

Share

Download to read offline

Taming the browser with the YUI Dom Component

Download to read offline

A quick introduction to the YUI Dom Component and some of its lesser known parts. This is not really *that* useful without the explanations but there will be a video later on.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Taming the browser with the YUI Dom Component

  1. 1. Using YUI Dom to tame the Browser Christian Heilmann Yahoo! F2E Summit Asia 2007
  2. 2. Quick reminder • Development according to web standards means first and foremost separation. • Specifically separation of web development layers.
  3. 3. addClass batch generateId get getAncestorBy getAncestorByClassName getAncestorByTagName getChildren getChildrenBy getClientHeight getClientWidth getDocumentHeight getDocumentScrollLeft getDocumentScrollTop getDocumentWidth getElementsBy getElementsByClassName getFirstChild getFirstChildBy getLastChild getLastChildBy getNextSibling getNextSiblingBy getPreviousSibling getPreviousSiblingBy getRegion getStyle getViewportHeight getViewportWidth getX getXY getY hasClass inDocument insertAfter insertBefore isAncestor removeClass replaceClass setStyle setX setXY setY
  4. 4. Use cases for the DOM utility • Using CSS Classes • Getting elements from the DOM • Using the browser dimensions • Using element dimensions • Styling elements
  5. 5. Using CSS Classes • addClass() • removeClass() • hasClass() • replaceClass() • getElementsByClassName()
  6. 6. Why?
  7. 7. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  8. 8. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  9. 9. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  10. 10. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  11. 11. Example: Hiding all “trigger” links in a main section when JS is available.
  12. 12. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } }
  13. 13. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } } display:none is a bad plan!
  14. 14. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } } Off-left is better.
  15. 15. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.position = 'absolute'; triggers[i].style.left = '-6000px'; } } }
  16. 16. Magic JavaScript Pixy Solution $('#main a.trigger').hide();
  17. 17. My fave: document.body.className = 'js'; // or var b = document.body; var bc = b.className; b.className = bc ? bc + ' js' : 'js';
  18. 18. Getting elements from the DOM • inDocument() • isAncestor() • getElementsByClassName • getElementsBy • get • batch
  19. 19. Using the browser dimensions • getViewportWidth() • getViewportHeight() • getDocumentWidth() • getDocumentHeight()
  20. 20. Using element dimensions • getX(), getY(), getXY() • setX(), setY(), setXY() • getRegion() – Region union – Region intersect – Region contains
  21. 21. Using element dimensions
  22. 22. Using element dimensions • Each of these methods can take an ID, a reference of an HTMLelement or an array of elements as the parameter. • This allows you to easily access a lot of elements.
  23. 23. Using element dimensions • The Dom utility does not care if the element is positioned absolute, relative or static. • It also sorts out differences in render mode for you. • However, each element needs to be part of the Dom and not hidden with display:none!
  24. 24. Using element dimensions • The get and set methods of x and y are very straight forward. • They return the left, the top or both values in pixels or an array with this data for each element you parsed in. • You can also set the position in pixels with the setter methods.
  25. 25. Using element dimensions var xy = YAHOO.util.Dom.getXY('hd'); // = [128, 0]; YAHOO.util.Dom.setXY('hd',[128,- 10]); // shifts header 10 pixels up
  26. 26. Using element dimensions • By using the getRegion() method you can read out the screen estate the element occupies. • This is incredibly useful for positioning elements or avoiding overlap. • The return is an object with several properties.
  27. 27. Using element dimensions var h = YAHOO.util.Dom.getRegion('hd'); // h = // {0:128 // 1:0, // top:0, // right:878, // bottom:79, // left:128}
  28. 28. Using element dimensions • top, left, right, bottom are the pixel locations on the page. • There are shortcuts for left and top named 0 and 1 to allow for compatibility with setX,setY and setXY.
  29. 29. Using element dimensions • Using these properties you can also calculate the dimensions of the element. • Simply subtract left from right for the width. • And top from bottom for the height.
  30. 30. Using element dimensions • The Region() component does a lot more for you though. • By calculating the region occupied by two elements, you can find out: – if one element contains the other – how big the area containing both of them is and – if and where they intersect
  31. 31. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); Region #1 Region #2
  32. 32. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); false Region #1 Region #2
  33. 33. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); Region #1 Region #2
  34. 34. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); true Region #1 Region #2
  35. 35. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.intersect(reg2); Region #1 Region #2
  36. 36. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.intersect(reg2); Region #1 Region #2
  37. 37. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.union(reg2); Region #1 Region #1 Region #2 Region #2
  38. 38. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.union(reg2); Region #1 Region #1 Region #2 Region #2
  39. 39. Styling elements • getStyle() • setStyle()
  40. 40. Styling Elements • You might wonder why you’d need these two methods as seemingly element.style.property = value would do the same. • The two methods however work around several browser problems and differences between computedStyle and currentStyle.
  41. 41. Styling Elements • The other benefit is that you can use the CSS selector names instead of the camelCased JavaScript ones. • Furthermore you can use the opacity property without needing to branch for different browsers.
  42. 42. CSS normalization obj.style.marginTop = '10px'; vs. YAHOO.util.Dom.setStyle(obj, 'margin-top','10px');
  43. 43. CSS normalization • Furthermore, opacity is not a nightmare any longer: YAHOO.util.Dom.setStyle(obj, 'opacity','.2');
  44. 44. CSS normalization • And last but not least, float can be used: YAHOO.util.Dom.setStyle(obj, 'float','left');
  45. 45. Thanks!
  • zetaj

    Nov. 19, 2011
  • dilipjain

    Mar. 20, 2009
  • thomd

    May. 10, 2008
  • charliez

    Feb. 21, 2008
  • pgrous

    Dec. 27, 2007
  • manikandakumar

    Dec. 10, 2007
  • jboutelle

    Dec. 7, 2007

A quick introduction to the YUI Dom Component and some of its lesser known parts. This is not really *that* useful without the explanations but there will be a video later on.

Views

Total views

12,126

On Slideshare

0

From embeds

0

Number of embeds

956

Actions

Downloads

142

Shares

0

Comments

0

Likes

7

×