JavaScript

jQuery Plugin: jquery-transformer

Since I constantly need to use jQuery together with TweenMax and since TweenMax already took care of all the parsing of various types of transformation strings as well as compatibility issues, I wrote a tiny jquery plugin here (more of a wrap up of gsap’s) that could directly access these values like this:

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

Continue reading

Standard
JavaScript

Difference between Scrolls

  • window.scrollX: current window horizontal offset number
  • window.scrollY: current window vertical offset number, For cross-browser compatibility, use window.pageYOffset instead of window.scrollY
  • window.pageYOffset: an alias for the scrollY property, but older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties, see: fully compatible example
  • window.scroll(x, y): absolute scroll
  • window.scrollTo(x, y): absolute scroll, effectively the same as widow.scroll(x, y)
  • window.scrollBy(x, y): relative scroll
  • window.scrollMaxX: the maximum number of pixels that the document can be scrolled horizontally
  • window.scrollMaxY: the maximum number of pixels that the document can be scrolled vertically
  • element.scrollIntoView(alignWithTop): scrolls elements into view
  • HTMLElement.offsetTop: returns the distance of the current element relative to the top of the offsetParent node
  • jQuery’s offset(): returns an object that includes the top and left offset of the element, e.g. Object{top: 223, left: 312.5}
  • jQuery’s offsetParent(): Get the closest ancestor element that is positioned
  • jQuery’s scrollTop(): wraps things up, but it’s the same thing. Also, it could be called to scroll compared to an element. See code below

Continue reading

Standard