yensdesign – Tutorials, Web Design and Coding » Blog Archive » Create a professional interface for your web applications using jQuery

We available for hire! — Need help with a web or mobile project?

From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.
If you want to ask for a budget, we hare available for hire!.
Create a professional interface for your web applications using jQuery

October 21st, 2008
I am very excited to see that a lot of people are linking our tutorials and this the best way to get the motivation to continue writing more and more tutorials. So thanks all for the comments, referrals and for visit yensdesign.com daily
In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery.
As always here you have a demo of the final result:
Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome (file menu doesn’t works well).
Let’s begin the tutorial guys!
What will We need?

As in other jQuery tutorials We only need these ingredients for our professional interface for our web applications:
HTML
CSS
jQuery Library
Desire to learn
Step 1: Explaining the layout

The core of this tutorial is the building of the layout. We will build a liquid layout using a simple CSS script for all the process and javascript (in our case with jQuery) to help us to resize the height of our layout when the user resizes the browser window. For people that does’nt know what liquid layout is, here you have a little definition extracted webdesign.com:
Liquid layout are layouts that are based on percentages of the current browser window’s size. They flex with the size of the window, even if the current viewer changes their browser size as they’re viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution.

They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.
The preview image that We have seen before, allow us to imagine the schema of the layout, but if you cann’t see it, here you have a schema:
Schema of the layout
Step 2: Building the layout

So We will have 3 main divisions called: menu, lateralPanel & mainContent and each main division gots other childs divisions:
[sourcecode='html']



	
	
	
	
	
	
	


    
        
            File
            Tools
            Help
        
    
    
        
            
New Document

            
Open

            
Save as...

            
Refresh

        
    
    
        
            
Print...

        
    
    
        
            
About the author...

        
    

    
		Favourites
		
			dmsconsulting.es
			yensdesign.com
			plusmusica.com
			cokidoo.com
			plusdeporte.com
			google.com
		
		General
		
			delicious.com
			visualizeus.com
			psdtuts.com
		
	
	
	
		
	</div>
</html>
</body>
[/sourcecode]</pre>
<ul>
<li>The first main division<strong> menu</strong> will contains the different sections and subsections.</li>
<li>The second main division <strong>mainContent</strong> will have a iframe that will load other webpages in our lateral panel.</li>
<li>The third main division <strong>lateralPanel </strong>will have different sections with unordered lists of websites to load in the iframe.</li>
<li>An additional division called <strong>lateralClick </strong>to toggle on/off the lateral panel.</li>
</ul>
<p><strong>Note</strong>: In this tutorial We will test the interface with an iframe to <strong>see</strong> how <strong>overflow</strong> <strong>works </strong>but you <strong>can delete the iframe</strong> and <strong>add </strong>your <strong>custom content </strong>in the <strong>mainContent </strong>division, feel free to experiment!</p>
<h3>Step 3: Adding style with CSS</h3>
<p>Unlike other tutorials, We won&#8217;t use CSS to create the menu interaction, <a title="jQuery official website" href="http://www.jquery.com">jQuery</a> will be used instead of it, but We <strong>will add</strong> the main <strong>beauty</strong> of the example &amp; <strong>setup </strong>the <strong>liquid width</strong> of the <strong>layout</strong> with CSS (the height will be done with <a title="jQuery official website" href="http://www.jquery.com">jQuery</a> too):</p>
<pre>[sourcecode='CSS']
/***************** RESET CSS ***************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
html{
height:100%;
}
body {
background:white none repeat scroll 0%;
font-size: 12px;
font-family:Arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
.clear
{
	clear:both;
}
/*************************************************/

/************* MENU ************/
#menu{
background:transparent url(images/menu_bg.gif) repeat-x scroll left top;
display:block;
font-size:12px;
margin:0pt auto;
position:relative;
font-family: Trebuchet MS, Arial, Sans-Serif;
color:#fff;
height:24px;
}
#menu ul{
list-style-type:none;
margin:0pt;
padding:0pt;
width:auto;
}
#menu li{
cursor:default;
list-style-type:none;
display:block;
float:left;
line-height:24px;
margin:0;
padding: 0 12px 0 12px;
}
#fileContainer{
position:absolute;
top:24px;
left:0px;
background:#ecf3fd;
border:1px solid #c0dbff;
display:none;
z-index:1;
cursor:default;
}
#fileContainer ul{
margin:0pt;
padding:0pt;
width:auto;
list-style-position:inside;
}
#fileContainer li{
list-style-type:none;
line-height:24px;
margin:0;
padding: 0 12px 0 5px;
text-align:left;
border-bottom:1px solid #e5effc;
color:#0079b8;
}
#fileContainer li .img{
margin:4px 8px 4px 0px;
float:left;
}
#fileContainer li .text{
float:left;
}
#fileContainer li:hover{
background:#e1ecfb;
}

#toolsContainer{
position:absolute;
top:24px;
left:43px;
background:#ecf3fd;
border:1px solid #c0dbff;
display:none;
z-index:1;
cursor:default;
}
#toolsContainer ul{
margin:0pt;
padding:0pt;
width:auto;
list-style-position:inside;
}
#toolsContainer li{
list-style-type:none;
line-height:24px;
margin:0;
padding: 0 12px 0 5px;
text-align:left;
border-bottom:1px solid #e5effc;
clear:both;
color:#0079b8;
}
#toolsContainer li .img{
margin:4px 8px 4px 0px;
float:left;
}
#toolsContainer li .text{
float:left;
}
#toolsContainer li:hover{
background:#e1ecfb;
}
#helpContainer{
position:absolute;
top:24px;
left:95px;
background:#ecf3fd;
border:1px solid #c0dbff;
display:none;
z-index:1;
cursor:default;
}
#helpContainer ul{
margin:0pt;
padding:0pt;
width:auto;
list-style-position:inside;
}
#helpContainer li{
list-style-type:none;
line-height:24px;
margin:0;
padding: 0 12px 0 5px;
text-align:left;
border-bottom:1px solid #e5effc;
clear:both;
color:#0079b8;
}
#helpContainer li .img{
margin:4px 8px 4px 0px;
float:left;
}
#helpContainer li .text{
float:left;
}
#helpContainer li:hover{
background:#e1ecfb;
}
#helpContainer li a{
text-decoration:none;
cursor:default;
}
/************* /MENU ************/

/************* MAIN CONTENT ************/
#mainContent{
overflow:auto;
}
/************* /MAIN CONTENT ************/

/************* LATERALPANEL ************/
#lateralPanel{
width:16%;
height:100%;
float:right;
display:block;
margin:0;
padding:0;
background:#ecf3fd;
border-bottom:0px solid #6BABFF;
overflow:auto;
font-family:Tahoma, arial, verdana, sans-serif;
cursor:default;
}
#lateralPanel ul li{
list-style-type:none;
background:transparent url(images/rss.gif) no-repeat scroll 6px top;
list-style-position:inside;
color:#0079b8;
cursor:pointer;
padding:5px 10px 5px 30px;
font-size:11px;
margin-bottom:1px;
}
#lateralPanel ul li:hover{
background:#d6e8ff url(images/rss.gif) no-repeat scroll 6px top;
color:#0099e8;
}
#lateralPanel ul li.active{
background:#d6e8ff url(images/rss.gif) no-repeat scroll 6px top;
color:#0099e8;
}
#lateralPanel .section{
background: transparent url(images/bgSection.gif);
border-bottom:1px solid #9ac3fa;
border-top:1px solid #9ac3fa;
border:1px 0 1px 0 solid #9ac3fa;
height:30px;
line-height:30px;
vertical-align:middle;
color:#fff;
text-align:center;
font-size:11px;
font-weight:700;
cursor:pointer;
}
#lateralPanel .section:hover{
border-color:#6babff;
}
#lateralClick{
width:10px;
height:100%;
background:#e5ecf9;
float:right;
background: transparent url(images/lateralClick_bg.gif);
border:1px solid #8fbffe;
border-top:0;
border-bottom:0;
cursor:pointer;
text-align:center;
}
#lateralClick:hover{
cursor:pointer;
background: transparent url(images/lateralClick_bg_hover.gif);
border-color:#6babff;
}
#lateralClick #lateralClickImg{
position:relative;
top:50%;
}
/************* /LATERALPANEL ************/
[/sourcecode]</pre>
<p>So now with all this things done, we have our layout with-liquid (but not height), by default our <strong>mainContent width </strong>will be<strong> 84%</strong> &amp; <strong>lateralPanel width </strong>will be<strong> 16%</strong> so if We resize the browser&#8217;s window the layout will be adapted in correct % for each division.</p>
<blockquote><p>The trick to have a liquid layout is use percentages in width &amp; height, but remember that you must set up the <strong>html </strong>&amp;<strong> body </strong>elements with<strong> height </strong>&amp;<strong> width </strong>at<strong> 100%</strong> or the their child divisions.</p></blockquote>
<h3>Step 4: Adding magic and interaction with jQuery</h3>
<p>As always We will use <a title="jQuery official website" href="http://www.jquery.com">jQuery</a> to provide interactivity to our professional interface. If you saw the <a title="Go to demo!" href="http://yensdesign.com/tutorials/interface">working demo</a> we got some interesting events:</p>
<ul>
<li>Setup the <strong>height-liquid</strong> part of our layout.</li>
<li><strong>Lateral panel</strong> toggle (show/hide) for provide more space to the content division and hide the panel.</li>
<li>Toggle <strong>sections</strong> (for websites lists) on/off.</li>
<li>Top <strong>menu</strong> with multiple options.</li>
<li>Change the  <strong>src</strong> value of the <strong>iframe</strong> by clicking on different websites from the lists of the lateral panel.</li>
</ul>
<p style="text-align: center;"><img src="http://yensdesign.com/tutorials/interface/sections.jpg" alt="Here you have the sections" width="270" height="281" /></p>
<p>We will need some global variables to control the status of some controls:</p>
<pre>[sourcecode='JAVASCRIPT']
//global vars
var file_status = 0;
var tools_status = 0;
var help_status = 0;
var lateralPanel_status = 1;
[/sourcecode]</pre>
<p>That variables will help us to know if we must show/hide some elements at the menu or the lateral panel. As always <strong>1 means ON</strong>, <strong>0 means OFF</strong>. So at the begining, We will hide all elements from top menu, but we will show the lateral panel with website lists.</p>
<p>Now we have the global vars to control the status of our controls, let&#8217;s create the functions to show/hide them:</p>
<pre>[sourcecode='JAVASCRIPT']
//FUNCTIONS
//TOP MENU
function fileOn(){
    $("#file").css("background","url(images/menu_li_bg.gif)");
}
function fileOff(){
    $("#file").css("background-image","none");
}
function fileHide(){
    fileOff();
    $("#fileContainer").css("display","none");
    file_status = 0;
}
function fileShow(){
    fileOn();
    $("#fileContainer").css("display","block");
    file_status = 1;
}
function toolsOn(){
    $("#tools").css("background","url(images/menu_li_bg.gif)");
}
function toolsOff(){
    $("#tools").css("background-image","none");
}
function toolsShow(){
    toolsOn();
    $("#toolsContainer").css("display","block");
    tools_status = 1;
}
function toolsHide(){
    toolsOff();
    $("#toolsContainer").css("display","none");
    tools_status = 0;
}
function helpOn(){
    $("#help").css("background","url(images/menu_li_bg.gif)");
}
function helpOff(){
    $("#help").css("background-image","none");
}
function ayudaShow(){
    helpOn();
    $("#helpContainer").css("display","block");
    help_status = 1;
}
function helpHide(){
    helpOff();
    $("#helpContainer").css("display","none");
    help_status = 0;
}
//LATERAL PANEL
function lateralPanelShow(){
	$("#lateralClickImg").attr("src","images/toggleRight.gif");
	$("#lateralPanel").show();
    lateralPanel_status = 1;
}
function lateralPanelHide(){
	$("#lateralClickImg").attr("src","images/toggleLeft.gif");
    $("#lateralPanel").hide();
    lateralPanel_status = 0;
}
[/sourcecode]</pre>
<p><strong>Note:</strong> Some people prefers to create the top menu using only CSS, and it&#8217;s a great solution but We are trying to learn more about javascript with jQuery.</p>
<p>After all, the only thing We need to do is configure events that call for different functions to show or hide the controls, so let&#8217;s move out guys!</p>
<p>Before We start to add the events I remember you that you <strong>must</strong> to <strong>put all jQuery code</strong> in the <strong>ready event</strong>:</p>
<pre>[sourcecode='JAVASCRIPT']
$(document).ready(function(){
//here goes the code for the interactions (events)
});
[/sourcecode]</pre>
<p>Let&#8217;s start with the configuration for our <strong>height-liquid</strong> <strong>layout</strong>:</p>
<pre>[sourcecode='JAVASCRIPT']
/********** CONFIGURE PATTERN ************/
var windowHeight = document.documentElement.clientHeight;
var menuHeight = document.getElementById("menu").clientHeight;

if(navigator.appName == "Microsoft Internet Explorer"){
	$("body").css("max-height",windowHeight-menuHeight);
	$("#lateralClick").css("height",windowHeight-menuHeight);
	$("#lateralPanel").css("height",windowHeight-menuHeight);
	$("#mainContent").css("height",windowHeight-menuHeight);
}
else{
	$("body").css("max-height",windowHeight-menuHeight);
	$("#lateralClick").css("height",windowHeight-menuHeight);
	$("#lateralPanel").css("height",windowHeight-menuHeight);
	$("#mainContent").css("height",windowHeight-menuHeight);
}
//for resize of the window, recalculate the max-height available
window.onresize = function(){
	windowHeight = document.documentElement.clientHeight;
	menuHeight = document.getElementById("menu").clientHeight;
	$("body").css("max-height",windowHeight-menuHeight);
	$("#lateralClick").css("height",windowHeight-menuHeight);
	$("#lateralPanel").css("height",windowHeight-menuHeight);
	$("#mainContent").css("height",windowHeight-menuHeight);
};
[/sourcecode]</pre>
<p>Isn&#8217;t easy? We <strong>calculate</strong> the <strong>available space</strong> at the window at the <strong>begining</strong> and <strong>configure</strong> the <strong>resize</strong> <strong>event</strong> to <strong>recalculate</strong> it when the <strong>size</strong> of the window <strong>changes</strong>.</p>
<p>So now, We put the <strong>code </strong>for<strong> control events</strong>. Don&#8217;t be afraid guys, it&#8217;s <strong>long</strong> but very very <strong>easy</strong> <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  :</p>
<pre>[sourcecode='JAVASCRIPT']
/********** TOP MENU ************/
//CLICK FILE MENU
$("#file").click(function(){
	//HIDE OTHERS
		//tools
		toolsHide();
		//help
		helpHide();
	//SHOW
	if(file_status == 0){
		//SHOW FILE SUBMENU
		fileShow();
	}
	//HIDE
	else{
		//HIDE FILE SUBMENU
		fileHide();
	}
});
//CLICK TOOLS MENU
$("#tools").click(function(){
	//HIDE OTHERS
		//file
		fileHide();
		//help
		helpHide();
	if(tools_status == 0){
		//SHOW TOOLS SUBMENU
		toolsShow();
	}
	else{
		//HIDE TOOLS SUBMENU
		toolsHide();
	}
});
//CLICK HELP MENU
$("#help").click(function(){
	//HIDE OTHERS
		//file
		fileHide();
		//tools
		toolsHide();
	if(help_status == 0){
		//SHOW HELP SUBMENU
		ayudaShow();
	}
	else{
		//HIDE HELP SUBMENU
		helpHide();
	}
});
//CLICK REFRESH
$("#recargar").click(function(){
	//REFRESH WEB
	location.href="";
});
//HOVER FILE MENU
$("#file").mouseover(function(){
	fileOn();
	toolsOff();
	helpOff();
	if(tools_status == 1 || help_status == 1){
		fileShow();
		helpHide();
		toolsHide();
	}
});
//HOVER TOOLS MENU
$("#tools").mouseover(function(){
	toolsOn();
	fileOff();
	helpOff();
	if(file_status == 1 || help_status == 1){
		fileHide();
		helpHide();
		toolsShow();
	}
});
//HOVER HELP MENU
$("#help").mouseover(function(){
	helpOn();
	fileOff();
	toolsOff();
	if(file_status == 1 || tools_status == 1){
		fileHide();
		toolsHide();
		ayudaShow();
	}
});
//MOUSE OUT FILE MENU
$("#file").mouseout(function(){
	if(file_status == 0){
		fileOff();
	}
});
//MOUSE OUT TOOLS MENU
$("#tools").mouseout(function(){
	if(tools_status == 0){
		toolsOff();
	}
});
//MOUSE OUT HELP MENU
$("#help").mouseout(function(){
	if(help_status == 0){
		helpOff();
	}
});
//CLICK NEW (file submenu)
$("#new").click(function(){
	alert("selected: new");
});
//CLICK OPEN (file submenu)
$("#open").click(function(){
	alert("selected: open");
});
//CLICK SAVE (file submenu)
$("#save").click(function(){
	alert("selected: save");
});
//CLICK PRINT (tools submenu)
$("#print").click(function(){
	print();
});
//CLICK BODY
$("div:not(#menu)").click(function(){
	fileHide();
	toolsHide();
	helpHide();
});
//PRESS ESCAPE
$(document).keyup(function(event){
	fileHide();
	toolsHide();
	helpHide();
});
/********** LATERAL PANEL ************/
//CLICK LATERALCLICK
$("#lateralClick").click(function(){
	if(lateralPanel_status == 0){
		//MOSTRAMOS LATERALPANEL
		lateralPanelShow();
	}
	else{
		//OCULTAMOS LATERALPANEL
		lateralPanelHide();
	}
});

//CLICK SECTION TITLE (toggle)
$(".section").click(function(){
	$("#" + $(this).attr("id") + " + ul").slideToggle("slow");
});
//CLICK SITE TO CHANGE SRC PROPERTY OF THE IFRAME
$("#lateralPanel li").click(function(){
	$("#iframe").attr("src","http://"+$(this).text());
	//Thanks Shawn user from jquery google groups for the tip! (old code was a little bit complex than his solution <img src='http://yensdesign.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> )
	$("#lateralPanel li").removeClass("active");
	$(this).addClass("active");
});
[/sourcecode]</pre>
<h3>Step 5: Triying our professional finished interface!</h3>
<p>And that’s all guys, I hope this tutorial helps you. You can try the <a title="Go to the final result!" href="http://www.yensdesign.com/tutorials/interface">tutorial online here</a> to see how It is working and <a title="Download the entire tutorial here!" href="http://www.yensdesign.com/tutorials/interface/interface.rar">download here all sources</a>.</p>
<p style="text-align: center;"><a title="Go to demo!" href="http://yensdesign.com/tutorials/interface/"><img class="aligncenter" src="http://yensdesign.com/tutorials/interface/preview.jpg" alt="Image preview of the interface" width="632" height="334" /></a></p>
<p>If you see bugs, bad english, got questions or something tell me by using comments,</p>
<p>Looking for classy <a href="http://www.lusterforever.com/department/leather-necklaces-10066.cfm">chokers</a> for a night party? Search no more because <a href="http://lusterforever.com/">LusterForever.com</a> has it all for you.</p>
<p>See you next time guys!</p>

												<!--<p>Tags: <a href="http://yensdesign.com/tag/html/" rel="tag">html</a>, <a href="http://yensdesign.com/tag/interface/" rel="tag">interface</a>, <a href="http://yensdesign.com/tag/javascript/" rel="tag">javascript</a>, <a href="http://yensdesign.com/tag/jquery/" rel="tag">jquery</a>, <a href="http://yensdesign.com/tag/professional/" rel="tag">professional</a>, <a href="http://yensdesign.com/tag/tutorial/" rel="tag">tutorial</a>, <a href="http://yensdesign.com/tag/web/" rel="tag">web</a>, <a href="http://yensdesign.com/tag/web-design/" rel="tag">Web Design</a></p>-->
					</div>
					<p class="postmetadata">
											
						<img src="http://yensdesign.com/wp-content/themes/stiled2/images/tags_icon.gif" alt="Tags:"/><a href="http://yensdesign.com/tag/html/" rel="tag">html</a>, <a href="http://yensdesign.com/tag/interface/" rel="tag">interface</a>, <a href="http://yensdesign.com/tag/javascript/" rel="tag">javascript</a>, <a href="http://yensdesign.com/tag/jquery/" rel="tag">jquery</a>, <a href="http://yensdesign.com/tag/professional/" rel="tag">professional</a>, <a href="http://yensdesign.com/tag/tutorial/" rel="tag">tutorial</a>, <a href="http://yensdesign.com/tag/web/" rel="tag">web</a>, <a href="http://yensdesign.com/tag/web-design/" rel="tag">Web Design</a><br />						<!--Posted in--> <img src="http://yensdesign.com/wp-content/themes/stiled2/images/category_icon.gif" alt="Category:"/> <a href="http://yensdesign.com/category/coding/" title="View all posts in Coding" rel="category tag">Coding</a>, <a href="http://yensdesign.com/category/tutorials/" title="View all posts in Tutorials" rel="category tag">Tutorials</a>, <a href="http://yensdesign.com/category/webdesign/" title="View all posts in Web Design" rel="category tag">Web Design</a>						&nbsp;
												<!--<img src="http://yensdesign.com/wp-content/themes/stiled2/images/comments_icon.gif" alt=""/> <a href="http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/#comments" title="Comment on Create a professional interface for your web applications using jQuery">35 Comments &#187;</a>-->
					</p>
					
					
					<p class="postmetadata alt">
						<small>
							This entry was posted
														on Tuesday, October 21st, 2008 at 11:50 pm							and is filed under <a href="http://yensdesign.com/category/coding/" title="View all posts in Coding" rel="category tag">Coding</a>, <a href="http://yensdesign.com/category/tutorials/" title="View all posts in Tutorials" rel="category tag">Tutorials</a>, <a href="http://yensdesign.com/category/webdesign/" title="View all posts in Web Design" rel="category tag">Web Design</a>.
							You can follow any responses to this entry through the <a href="http://feeds.feedburner.com/yensdesign-rss">RSS 2.0 feed</a>.

															You can <a href="#respond">leave a response</a>, or <a href="http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/trackback/" rel="trackback">trackback</a> from your own site.

							
						</small>
					</p>
					<h3>Enjoy this post?</h3>
					<p>Your vote will help us to grow this website and write more entries like this one :)</p>
					<br />
					<div>
																							</div>
					<div class="enjoypost">
						<a title="Save this bookmark!" href="http://www.delicious.com/post?url=http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/&title=Create a professional interface for your web applications using jQuery">
							<img src="http://yensdesign.com/wp-content/themes/stiled2/images/delicious.png" alt="Delicious" />
						</a>
						<a title="Send to mixx!" href="http://www.mixx.com/submit?page_url=http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/">
							<img src="http://yensdesign.com/wp-content/themes/stiled2/images/mixx.png" alt="Mixx" />
						</a>
						<a title="Stumble it!" href="http://www.stumbleupon.com/submit?url=http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/&title=Create a professional interface for your web applications using jQuery">
							<img src="http://yensdesign.com/wp-content/themes/stiled2/images/stumbleupon.png" alt="StumbleUpon" />
						</a>
						<a title="Recommend it on designfloat!" href="http://www.designfloat.com/submit.php?url=http://yensdesign.com/2008/10/create-a-professional-interface-for-your-web-applications-using-jquery/&title=Create a professional interface for your web applications using jQuery">
							<img src="http://yensdesign.com/wp-content/themes/stiled2/images/designfloat.png" alt="Design Float" />
						</a>
					</div>
					
					<div style="background: #fff799; border: 1px solid #fdc689; padding: 10px 15px; font-size: 14px; line-height: 1.5em; margin: 40px 0; color: #333;">

<h3 style="margin: 0 0 10px 0; padding: 0;">
<a href="http://yensdesign.com/contact-us" style="color: #ed4c05; border: 0; text-decoration: underline;">We available for hire!</a> — Need help with a web or mobile project?</h3>
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases.
We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.
<br><br>
If you want to ask for a budget, <a href="http://yensdesign.com/contact-us" style="color: #ED4C05; text-decoration: underline;">we hare available for hire!</a> Don't doubt in <a href="http://yensdesign.com/contact-us" style="color: #ED4C05; text-decoration: underline;">get in touch with us!</a>.
</div>
					
				</div>
				
				<script type="text/javascript"><!--
					google_ad_client = "pub-5848739257086118";
					/* grafico 728x90, created 11/20/08 */
					google_ad_slot = "3332922126";
					google_ad_width = 728;
					google_ad_height = 90;
					//-->
					</script>
					<script type="text/javascript"
					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
				
<!-- You can start editing here. -->

	<h3 id="comments">35 Responses to &#8220;Create a professional interface for your web applications using jQuery&#8221;</h3>

	<ul class="commentlist">

	
		<li class="alt" id="comment-53">
			
			<div class="left">
								<div class="author">
					<a href='http://web2announcer.com/go/2813468' rel='external nofollow' class='url'>Web 2.0 Announcer</a>				</div>
				<div class="date">
					<a href="#comment-53" title="">October 22nd, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p><strong>Create a professional interface for your web applications using jQuery&#8230;</strong></p>
<p>[...]In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery.[...]&#8230;</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-54">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/127e882168db79a3c63b97d91c5eeae7?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://cokidoo.com' rel='external nofollow' class='url'>Javier López</a>				</div>
				<div class="date">
					<a href="#comment-54" title="">October 22nd, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>This is just an incredible tutorial! Great work!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-58">
			
			<div class="left">
								<div class="author">
					<a href='http://www.faqpal.com/story/179' rel='external nofollow' class='url'>Added by a PAL to FAQ PAL</a>				</div>
				<div class="date">
					<a href="#comment-58" title="">October 22nd, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p><strong>Create a professional interface for your web applications using jQuery&#8230;</strong></p>
<p>The core of this tutorial is the building of the layout. We will build a liquid layout using a simple CSS script for all the process and javascript (in our case with jQuery) to help us to resize the height of our layout when the user resizes the browse&#8230;</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-62">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/ade779116850e516f0655f4dbab494e0?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					Dominic				</div>
				<div class="date">
					<a href="#comment-62" title="">October 23rd, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Great tutorial! Thanks for this one.</p>
<p>Waiting for more!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-63">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.cokidoo.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-63" title="">October 23rd, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Ey thanks Dominic nice to see that it&#8217;s useful for you <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-64">
			
			<div class="left">
								<div class="author">
					<a href='http://mgalinks.wordpress.com/2008/10/24/2008-october-24-links-for-today/' rel='external nofollow' class='url'>2008 October 24 - Links for today &laquo; My (almost) Daily Links</a>				</div>
				<div class="date">
					<a href="#comment-64" title="">October 24th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Adrian Mato Gondelle shows how to Create a professional interface for your web applications using jQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-67">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/1d6b074ed6bc653d95eefa57f5fdf330?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					Damir				</div>
				<div class="date">
					<a href="#comment-67" title="">October 25th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Nice technique and tutorial! &#8211;  I didn&#8217;t know you could do this sort of menu animation without Flash&#8230; Thanks</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-68">
			
			<div class="left">
								<div class="author">
					<a href='http://weblogs.asp.net/yuanjian/archive/2008/10/24/interesting-finds-2008-10-24-10-25.aspx' rel='external nofollow' class='url'>Interesting Finds: 2008.10.24~10.25 - gOODiDEA.NET</a>				</div>
				<div class="date">
					<a href="#comment-68" title="">October 25th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-69">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.cokidoo.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-69" title="">October 25th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Ey Damir I&#8217;m happy to see that you find this tut useful <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Javascript allows you to do lots of things without flash <img src='http://yensdesign.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-80">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/cb56701b92a42b39ca89c1f3d31df74a?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.moossen.net/' rel='external nofollow' class='url'>Michael</a>				</div>
				<div class="date">
					<a href="#comment-80" title="">October 26th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Hi, nice tutorial&#8230; as always&#8230;</p>
<p>but i want to point out a very disgusting issue with your code. </p>
<p>the point is: why are you mixing languages in variable and function names? most of your code using english, except the ayudaShow method? why is that? do you really think it makes your code nicer or more maintainable? or do you want to move the world to learn spanish?</p>
<p>it is not any thing personal, it is just that i see this behavior far to often&#8230; specially along spanish speaking programmers, including me <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-81">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.cokidoo.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-81" title="">October 27th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Ohhh sorry! I translated another code for this tut hehe ^^</p>
<p>Thanks for you comments <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-82">
			
			<div class="left">
								<div class="author">
					<a href='http://www.getinon.com/faqpal/' rel='external nofollow' class='url'>Get In On &raquo; Blog Archive &raquo; FAQ PAL - your helping pal</a>				</div>
				<div class="date">
					<a href="#comment-82" title="">October 27th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-85">
			
			<div class="left">
								<div class="author">
					<a href='http://tjmapes.com/?p=130' rel='external nofollow' class='url'>tj mapes &raquo; Blog Archive &raquo; What I&#8217;m Reading 10/28/2008</a>				</div>
				<div class="date">
					<a href="#comment-85" title="">October 28th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery | yensdesign &#8211; Tutorials, Web&#8230; [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-97">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/964b23b4961c6048a34525c2fd87eabd?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.nel-web.it' rel='external nofollow' class='url'>Massimiliano</a>				</div>
				<div class="date">
					<a href="#comment-97" title="">October 31st, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Good tutorial, thank you!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-98">
			
			<div class="left">
								<div class="author">
					<a href='http://www.sastgroup.com/tutorials/creare-una-interfaccia-professionale-con-jquery' rel='external nofollow' class='url'>Creare una interfaccia professionale con jquery : sastgroup.com</a>				</div>
				<div class="date">
					<a href="#comment-98" title="">October 31st, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] web: <a href="http://yensdesign.com/2008/" rel="nofollow">http://yensdesign.com/2008/</a>&#8230;ations-using-jquery/   Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-99">
			
			<div class="left">
								<div class="author">
					<a href='http://web2announcer.com/go/2825568' rel='external nofollow' class='url'>Web 2.0 Announcer</a>				</div>
				<div class="date">
					<a href="#comment-99" title="">October 31st, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p><strong>Create a professional interface for your web applications using jQuery | yensdesign &#8211; Tutorials, Web Design and Coding&#8230;</strong></p>
<p>[...][...]&#8230;</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-105">
			
			<div class="left">
								<div class="author">
					<a href='http://andy.edmonds.be/2008/11/links-for-2008-10-31/' rel='external nofollow' class='url'>andy.edmonds.be &rsaquo; links for 2008-10-31</a>				</div>
				<div class="date">
					<a href="#comment-105" title="">November 1st, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery | yensdesign &#8211; Tutorials, Web&#8230; (tags: website ui tutorials jquery css) [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-106">
			
			<div class="left">
								<div class="author">
					<a href='http://oviron.wordpress.com/2008/11/01/links-for-2008-11-01/' rel='external nofollow' class='url'>links for 2008-11-01 &laquo; boblog</a>				</div>
				<div class="date">
					<a href="#comment-106" title="">November 1st, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery | yensdesign &#8211; Tutorials, Web&#8230; In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery. (tags: javascript development css webdesign website) [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-140">
			
			<div class="left">
								<div class="author">
					<a href='http://www.notitodo.com/2008/11/12/enlaces-rapidos-12-11-08/' rel='external nofollow' class='url'>Enlaces rápidos (12-11-08) : Notitodo</a>				</div>
				<div class="date">
					<a href="#comment-140" title="">November 12th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-141">
			
			<div class="left">
								<div class="author">
					<a href='http://ubuntulife.wordpress.com/2008/11/12/breves-18/' rel='external nofollow' class='url'>Breves &laquo; Ubuntu Life</a>				</div>
				<div class="date">
					<a href="#comment-141" title="">November 13th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Breves   Publicado Noviembre 12, 2008   Internet       * KDE 4.2 es prometedor * Hacer que las tarjetas wifi Atheros AR5007EG o AR242x funcionen en Ubuntu 8.10 * Burn-E, nuevo corto de Pixar * Chrome en Linux avanza positivamente * pequeña gran calculadora en un mundo virtual * Progex, un Ubuntu muy completo * Pekwm themes * La antigua roma y el coliseo en Google Earth * Y si Matrix se ejecutara en Windows&#8230; * Jaunty Jackalope Mockup * Crea un interface profesional con JQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-154">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/7dba146620c27d2fbe7d20ab8ae9115e?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://ristandi.wordpress.com' rel='external nofollow' class='url'>ristandi87</a>				</div>
				<div class="date">
					<a href="#comment-154" title="">November 14th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>greats tutorial.</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-168">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/ca56ecd1e653102b873f098fa2e3646b?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.codru.eu' rel='external nofollow' class='url'>denis</a>				</div>
				<div class="date">
					<a href="#comment-168" title="">November 17th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Super article. Can you compress the source code in .tar(.tar.bz, .tar.bz2) format for linux users? Thanks.</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-169">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.cokidoo.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-169" title="">November 17th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Ey Denis! Do you want .zip format? or only .tar?</p>
<p>Thanks for posting!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-195">
			
			<div class="left">
								<div class="author">
					<a href='http://www.tecnolink.es/blog/?p=77' rel='external nofollow' class='url'>Enlaces rápidos (12-11-08) | Tecnolink Informática Castellón</a>				</div>
				<div class="date">
					<a href="#comment-195" title="">November 20th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] Create a professional interface for your web applications using jQuery [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-283">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/6c31cdc728d8db0135b64329b25046d9?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					Eric Hanson				</div>
				<div class="date">
					<a href="#comment-283" title="">December 4th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Great tutorial<br />
Really good job<br />
Thanks lots</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-285">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.yensdesign.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-285" title="">December 4th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Thanks Eric <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-288">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/ca3c5c4a465d1162e55ddb7980bc11f9?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					Alex				</div>
				<div class="date">
					<a href="#comment-288" title="">December 5th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>That&#8217;s just what I&#8217;ve been looking for! I&#8217;m developing a web application and this tutorial gave me lots of ideas for it! Thanks!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-289">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a9aeae296a436422b5c2f4b822b664c5?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					<a href='http://www.yensdesign.com' rel='external nofollow' class='url'>Adrián Mato Gondelle</a>				</div>
				<div class="date">
					<a href="#comment-289" title="">December 5th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Ey Alex that&#8217;s nice! Good luck and see you in next tutorials <img src='http://yensdesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-370">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/097b51242b2ccfcadb25f37af3b973e3?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					abada				</div>
				<div class="date">
					<a href="#comment-370" title="">December 13th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>very Great tutorial </p>
<p>many thanks</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-438">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/56ecbd5e4d1ba2d5e37edfcd9d93a1ed?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					KB				</div>
				<div class="date">
					<a href="#comment-438" title="">December 18th, 2008</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Awesome Tutorial!!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-1522">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/b88052694be62101cd64a8167d057823?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					didxga				</div>
				<div class="date">
					<a href="#comment-1522" title="">March 21st, 2009</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>you are awesome!</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-1831">
			
			<div class="left">
								<div class="author">
					<a href='http://infoeduindia.com/2009/06/08/create-a-professional-interface-for-your-web-applications-using-jquery/' rel='external nofollow' class='url'>Create a professional interface for your web applications using jQuery - Tutorial Collection</a>				</div>
				<div class="date">
					<a href="#comment-1831" title="">June 8th, 2009</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>[...] View Tutorial      No Comment  var addthis_pub=&#8221;izwan00&#8243;; BOOKMARK        This entry was posted on Monday, June 8th, 2009 at 3:55 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-5508">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/cd0dde15ff59d81aec47685bd9f45407?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					darren				</div>
				<div class="date">
					<a href="#comment-5508" title="">October 29th, 2010</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>how can make the src of iframe the same even if i press f5 to refresh the page</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li id="comment-12305">
			
			<div class="left">
				<img alt='' src='http://0.gravatar.com/avatar/a99dd0a49820647193b005ebf879e248?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					PV				</div>
				<div class="date">
					<a href="#comment-12305" title="">December 16th, 2010</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>Great Tutorial. Many Thanks.<br />
Is there a possibility to use Custom Text on the right menu and link it to URL&#8217;s? Please help. I am trying to use this in my project.</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
		<li class="alt" id="comment-14308">
			
			<div class="left">
				<img alt='' src='http://1.gravatar.com/avatar/3d9e245fe6926fd0764e8b8c246a652a?s=64&amp;d=http%3A%2F%2Fyensdesign.com%2Fwp-content%2Fthemes%2Fstiled2%2Fimages%2Freader.jpg%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' />				<div class="author">
					venky				</div>
				<div class="date">
					<a href="#comment-14308" title="">April 26th, 2011</a>
				</div>
				<span class="edit"></span>
			</div>
			<div class="right">
								<p>hi yens,<br />
 great work, it is superb.</p>
			</div>
			<span class="clear"></span>
		</li>

	
	
	</ul>

 


<h3 id="respond">Leave a Reply</h3>


<form action="http://yensdesign.com/wp-comments-post.php" method="post" id="commentform">


<p><input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label for="author"><small>Name (required)</small></label></p>

<p><input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) (required)</small></label></p>

<p><input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>


<!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="8" />
</p>

</form>


				
						
			
		</div>
		<!-- fin central -->
	</div>
	<!-- fin featured -->
	<!-- inicio lateral -->
	<div id="right">
<div class="ad">
    <p>
    <a href="http://web.ontuts.com">
    <img src="http://yensdesign.com/wp-content/themes/stiled2/images/ontutsbanner.png" height="125px" width="125px" style="border:0" alt="Ontuts" />
    </a>
    </p>
</div>
            <div class="ad">
    <p>
    <a href="http://cokidoo.com">
    <img src="http://yensdesign.com/wp-content/themes/stiled2/images/cokidoo.png" height="125px" width="125px" style="border:0" alt="Cokidoo" />
    </a>
    </p>
</div>
            <div class="ad">
<p>
<a href="http://themeforest.net/?ref=AdrianMG">
<img src="http://yensdesign.com/wp-content/themes/stiled2/images/themeforest.jpg" height="125px" width="125px" style="border:0" alt="Themeforest" />
</a>
</p>
		</div>
		<div>
			<script type="text/javascript">
				Vertical1235825 = false;
				ShowAdHereBanner1235825 = true;
				RepeatAll1235825 = false;
				NoFollowAll1235825 = false;
				BannerStyles1235825 = new Array(
					"a{background: #EFEFEF; border: 1px solid #D0CCC9;padding: 9px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 0px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
					"img{border:0;clear:right;}",
					"a.adhere{border: 1px solid #D0CCC9;padding: 10px; color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;text-align:center;}",
					"a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
				);

				document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1235825/1235825.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
			</script>
		</div>
		<div class="ad">
			<p>
				<a href="http://feeds.feedburner.com/yensdesign-rss">
					<img src="http://feeds.feedburner.com/~fc/yensdesign-rss?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" />
				</a>
			</p>
		</div>
		<div class="ad">
			<div id="twitter_div">
			<a desc="Follow us on Twitter!" href="https://twitter.com/yensdesign"><img src="http://yensdesign.com/wp-content/themes/stiled2/images/twitter.png" alt="" /></a>
			<ul id="twitter_update_list"></ul>
			</div>
			<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
			<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/yensdesign.json?callback=twitterCallback2&amp;count=1"></script>
<br /><div><a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://yensdesign.com"><img src="http://static.technorati.com/pix/fave/btn-fave2.png" alt="Add to Technorati Favorites" /></a></div>
		</div>
		<div class="ad">
			<script type="text/javascript"><!--
google_ad_client = "pub-5848739257086118";
/* 120x240, created 11/20/08 */
google_ad_slot = "4750674348";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
		</div>
<div class="ad">
<a href="http://themeforest.net/?ref=AdrianMG"><img src="http://themeforest.net/new/images/ms_referral_banners/TF_120x600.jpg" alt="Themeforest" /></a>
</div>
	</div>
	<span class="clear"></span>
	<!-- fin lateral -->
</div>
<!-- fin contenedor -->

<div id="footer">
	<p>
		<strong>yensdesign &#8211; Tutorials, Web Design and Coding</strong> theme made by <strong>Adrian 'yEnS' Mato Gondelle</strong> for working with
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="http://feeds.feedburner.com/yensdesign-rss">Entries (RSS)</a>
		and <a href="http://yensdesign.com/comments/feed/">Comments (RSS)</a>.
		<!-- 25 queries. 1.019 seconds. -->
	</p>
</div>
</div>

	
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5600906-1");
pageTracker._trackPageview();
</script>
</body>
</html>