Tag Archives: web design

Event Bubbling In JavaScript / JQuery

By Sam | Published: August 14, 2010
Lynda.com has a great series of tutorials on JavaScript, here. One of the exercises was an event bubbling demo, written in JavaScript. It illustrates how events on a DOM element, bubble-up to the parent elements. I have re-written it below in JQuery. Click in ‘div 3′ to see the event propogate. You may need to [...]
Posted in Software Development | Also tagged , , | Leave a comment

Circles…

By Sam | Published: August 1, 2010
This is just a crazy layout that I built based on this site. It uses a lot of relatively positioned elements for a sort of compositing effect. (None of the links are meant to work — it’s just a layout demo. ) Pure JavaScript/HTML/CSS, no Flash.
Posted in Software Development | Also tagged , , | Leave a comment

mouseover/mouseout v.s. mousenter/mouseleave events in JavaScript and JQuery

By Sam | Published: July 18, 2010
.yellow { width:160px; padding:20px; height: 160px; background-color:yellow; } .highlight { background-color:red; } .inner { width:50px; height:50px; border:solid black 1px; } jQuery(function() { jQuery("#example1").bind("mouseenter", highlight); jQuery("#example1").bind("mouseleave", highlight); jQuery("#example2").bind("mouseover", highlight); jQuery("#example2").bind("mouseleave",highlight); jQuery("#example3").bind("mouseover", printEvent); jQuery("#example3").bind("mouseout", printEvent); }); function printEvent(evt) { jQuery("#events").append(evt.type + " "); } function highlight(evt) { jQuery(this).toggleClass("highlight"); } The typical event example, and the one used [...]
Posted in Software Development | Also tagged , , | Leave a comment

Web Design Abstraction Layers, You’ve got to accentuate the positive….

By Sam | Published: November 30, 2009
And, using toolkits like JQuery, abstract away the negative. [Music lyrics adapted from Johnny Mercer]  Where in web design, “the negative” is defined as anything that is not constant from one browser implementation to another. JQuery is a JavaScript library that abstracts the browser dependent implementation away, and leaves you with an interface that is [...]
Posted in Software Development | Also tagged , | 1 Comment