Tag Archives: User Interface

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

Chaining JQuery Show/Hide Using Callbacks

By Sam | Published: July 20, 2010
$ = jQuery.noConflict(); var speed = 500; $(function() { $("#hide").hide(); $(".blueBox").hide(); $("#show").click(function() { $(this).hide(); $("#1").show(speed, function() { $("#2").show(speed, function() { $("#3").show(speed, function() { $("#4").show(speed, function() { $("#5").show(speed,function() { $("#6").show(speed, function() { $("#hide").show(); }) }) }) }) }) }) }); $("#hide").click(function() { $(this).hide(); $("#6").hide(speed, function() { $("#5").hide(speed, function() { $("#4").hide(speed, function() { $("#3").hide(speed, function() { $("#2").hide(speed,function() [...]
Posted in Uncategorized | 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