Tuesday, October 27, 2009

Very big menus

One of our client requested for a very big menu.

Search Amazon.com for CSS HTML Jquery

And they send us a couple of references.
http://www.quakeroats.com/home.aspx
http://www.spirent.com/

I searched google, twitter.com, delicious.com found these links.

http://www.archer-group.com/
http://hub.guitarhero.com/
http://www.actionenvelope.com/
http://www.emc.com/
http://www.foodnetwork.com/
http://www.littlekidsbedrooms.com/
http://bmi.com/
http://www.mtv.com/
http://www.officemax.com/
http://www.diy.com/diy/jsp/?_requestid=60694
http://www.actionenvelope.com/
http://www.ea.com/
http://www.whitehouse.gov/
http://tympanus.net/Tutorials/UIElements/LargeDropDown/

Monday, October 26, 2009

DOM Scripting

Check out this SlideShare Presentation:

Introduction To jQuery

Check out this SlideShare Presentation:

HTML5 & Friends

Check out this SlideShare Presentation:

jQuery Loves Developers - SWDC2009

Check out this SlideShare Presentation:

DOM Scripting Toolkit - jQuery

Check out this SlideShare Presentation:

Tuesday, August 18, 2009

jQuery display switch basic form

Modified version
Switch Display Options WITH CSS & JQUERY to basic.

place the following inside body tag

<a href="#" class="switch_thumb">Switch Thumb</a> 

<div class="custom-gen">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>

And paste the following in the head tag

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

$("a.switch_thumb").toggle(function(){
$(this).addClass("swap"); 
$("div.custom-gen").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("inline-list"); 
});
}, function () {
$(this).removeClass("swap");
$("div.custom-gen").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("inline-list");
});
}); 

});
</script> 



/*  setting background color to blackto see the rounded corner of the the switch view image  */
body{
background-color:#000000;
color:white;
}

ul {
list-style: none;
}

.custom-gen ul li:before {
content: "\00BB \0020";
}


.inline-list {
border: 1px solid #000;
margin: 2em;
padding: 5px;
}

.inline-list p {
display: inline;
}

.inline-list ul, .inline-list li {
display: inline;
margin: 0;
padding: 0;
}


/*  Switch View image CSS   */

a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }