Scribd
Upload
42 views

Javascript Layout Tricks: Bob Broen Long Term Results

This document provides an overview of JavaScript layout tricks and techniques. It discusses topics like using the DOM instead of browser detection, common JavaScript gotchas, different JavaScript frameworks like jQuery and YUI, and examples of adding click events and creating masonry-style column layouts. Code snippets are included for jQuery and YUI implementations of a masonry layout.

Uploaded by

Felipe Castellanos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Javascript Layout Tricks: Bob Broen Long Term Results

This document provides an overview of JavaScript layout tricks and techniques. It discusses topics like using the DOM instead of browser detection, common JavaScript gotchas, different JavaScript frameworks like jQuery and YUI, and examples of adding click events and creating masonry-style column layouts. Code snippets are included for jQuery and YUI implementations of a masonry layout.

Uploaded by

Felipe Castellanos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

JavaScript Layout Tricks

Bob Broen

Long Term Results


Quick question

How do you use JavaScript?

”Only for form validation”


”I adapt examples”
”I get how it works”
DOM

Browsers and the DOM

(The big reason JavaScript sucked)


DOM

Avoid browser detection,


use object detection instead!

if (document.images) {
// you can use the array images
}
Writing JavaScript

Stuff that might hit you


when programming JavaScript.
Writing JavaScript

'0' == '' false


0 == '' true
0 == '0' true

'\t\r\n ' == 0 true

typeof(null) == object true

(0.1 + 0.2) == 0.3 false


Frameworks

Custom, YUI, jQuery or ...?


Adding a click event

var sayHello = function () {


alert('Hello!');
};

// plain old JavaScript


var b = document.getElementById('mybutton');
b.onClick(sayHello);
Adding a click event

// YUI framework
YAHOO.util.Event.addListener('mybutton',
'click', sayHello);
Adding a click event

// jQuery framework
$('#mybutton').click(sayhello);
Shameless jQuery plugs

// use css3 selectors in every browser


$('#cont img, #foot img').click(showBigImg);

// something to do after the click


var showBigImg = function () {
var srcValue = $(that).attr(src);
...
};

// or use attribute filters for precision


$('img[fullsize]').click(showBigImg);
Column heights

Scripting a function to
create an even height
on adjacent articles and
headers.
Column heights

// find the outerblock(s) of interest

// find the innerblocks of interest

// loop the innerblocks,


// remember tallest height

// loop the innerblocks and set the height


Newspaper style colomns

Let JavaScript make a


newspaper column
layout.
jQuery Masonry
$.fn.masonry = function() {

this.each(function() {

var wall = $(this);

// check if the element has anything in it

if ( wall.children().length > 0 ) {

// checks if the masonryWrap div is already there

if( wall.children('.masonryWrap').length == 0 ) {

wall.wrapInner('<div class=\"masonryWrap\"></div>');

var mWrap = wall.children('.masonryWrap');

var brick = mWrap.children();

var brickW = brick.outerWidth(true);

var colCount = Math.floor( mWrap.width() / brickW ) ;


YUI Masonry
var masonry = function (params) {

var outerContainerEl, innerContainerEl, bricks,

brickW, outerContainerWidth, colCount, colNumber, thisCol;

var colHeights = [];

function getHeight(el) { // far from perfect, outerHeight is better

var region= YAHOO.util.Dom.getRegion(el);

return region.bottom - region.top;

function getWidth(el) { // far from perfect, outerHeight is better

var region= YAHOO.util.Dom.getRegion(el);

return region.right - region.left;


JavaScript

JavaScript rocks!
Check out the examples on:
http://www.myfirstswiftysite.nl/

You might also like