Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools.  Since it was in mootools, I thought of replicating it in jQuery. I have two example of similar menu, first using jQuery core and CSS and another uses jQuery easing plugin to give bounce effect to the same menu.And I’ve added one more example which I though would be nice menu to show you guys.

VIEW DEMO

First of let me start, with the images which i’ve used in the background to create the first two menus.

and

Please note that the please keep the left image as big as possible if you’re menu text can be long.

Now, let’s look at the html code

Html code for the animated jquery menu

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>

All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.

 <li class="ybg"></li>

CSS code for the smooth jQuery menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}

As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.

The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.

jQuery code for animation in the  on menu

$('#nav1 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
  $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});

The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.

As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.

The code is exactly same for the second menu except the following line,

$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');

You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.

$('#nav2 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
     $(this).animate({height:"28px"},150);
  });
},
function()
{
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
      $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
   });
});

And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.

DOWNLOAD SOURCE CODE

Are you a web developer ? Are you a web designer? The you must not leave this offer. I don’t know weather you know about this offer or not. Sitepoint is giving the book The Art & Science of CSS at free of cost. I think you’re might interested in getting this book, just follow the simple instruction and that great book will be yours.

Here is the steps you’ve to do to get that book at free of cost…

1) Follow sitepointdotcom at twitter and they will send you the direct message to you at twitter.

OR

2) If  you don’t have twitter account the, go here  http://twitaway..com/ and enter your email address. They will send you the download link of that book in your email address.

If you have twitter account then follow me on twitter @roshanbh. We can stay in touch to share our experiences.Believe me twitter is great place for sharing messages.

Today, I would like to talk about W3C XHTML validation service.This service checks the XHTML of your website and reports you if your web page have any error or warning according to standard of W3C. If you are talking about this website currently you’ll find 74 Errors, 24 warning(s) and frankly I’ve never been bothered about correcting those errors of XHTML because it takes a bit of time and believe me I’m a very lazy boy. In this post, I would like to show you a interesting data of W3C validation among the top rated websites.You’ll be amazed to come to know that they’re also lazy like me .

W3C XHTML validation of Big website.

I’ve checked the W3C’s XHTML validation among the top 7 wesites rated by ALEXA. You can look at the result below.

As you can see in the above stat, Microsoft’s websites only cared about W3C validation. Other websites are not really worried about this validation. I’m even wondered above stat from Gooogle which don’t have much elements in their home page but a search box and some hyperlinks.

Is XHTML validation really needed in your web page?

I’m not the person who can decide weather the XHTML validation is really needed or not in you web page. But you know web designers spent a lot time for XHTML validations of each page. Do you think it really worth ? Why the big guns website doesn’t follow the W3C standard? Is your website is XHTML valid ? Please share your thought.

Today, one of the friend of my office asked me how to make dotted or dashsed link as he was looking for “text-decoration” for making it.Today, I’ve come up with a very simple technique to make a dotted or dashed hyperlink using CSS.This technique might be known to most of you guys but it might be useful for those guys who don’t know about this technique.

Making dotted and dashed link using CSS

a
{
border-bottom:1px dotted #FF0000;
text-decoration:none;
color:#FF0000;
}

As, you can can you can use the border-bottom property to add the border in the bottom and then you must specify that text-decoration property to “none” to remove the underline from hyperlink which comes default in hyperlink. In the similar fashion, you can create dashed underline link with the following example code.

a
{
border-bottom:1px dashed #FF0000;
text-decoration:none;
color:#FF0000;
}

Last time, I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.

LIVE DEMO

HTML code for floating message box using jQuery

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .

CSS code for floating message box using jQuery

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.

jQuery code for floating message box

<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>

You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.

DOWNLOAD FULL SOURCE CODE

How are you controlling the case of the characters in your project. Talking about me, I was using ucwords() function of PHP to control the case of the characters when required. Today, I come to know  two new property of CSS which controls the output of the case of the characters of the words.

You can control the characters using “text-transform” and “font-variant” property of the CSS to do this. You can change the characters of words to upper case, lower case and capitalize the first character of the word.Furthermore, you can use “font-variant” to display the font in small caps font i.e. all the lower case characters are converted into uppercase character but have small font size compared to text with character capitalized. Let’s see example,

Example of using text-transform and font-variant

<span style="text-transform: capitalize">bill gates</span> => bill gates
<span style="text-transform:lowercase">Bill Gates</span> =>  Bill Gates
<span style="text-transform: uppercase">bill gates</span> => bill gates
<span style="font-variant:small-caps">Bill Gates</span> => Bill Gates

As you can see clearly in the example how the character of case is changed using text-transform and font-variant property of CSS. I hope these property might be useful for those people who didn’t know about these properties. But “text-transform” should have had one more attribute to capitalize the first character of sentence, I’m missing that .

I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let’s the whole web page gets loaded and new page gets displayed. It would be better to show another content in the same page with few animation without loading the whole page.

In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,

HTML Code for animated content navigation

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>
</div>

As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.

CSS code for animated content navigation

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation

Faded content navigation

View Live Demo

 //hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.

Shutter like content navigation effect

View Live Demo

//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.

Sliding Content Navigation Effect

View Live Demo

 //hide the all div except first one
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.

Download full source code

In this post, I’ll explain to you how to make the rounded corner textbox using a image and css. Text box is placed over a container element whose background image is the key of the rounded corner textbox.

This is the image which I’ve used in my example, don’t click and start typing it just a image for now.

Now let’s look at the html and css code to display rounded corner textbox.

HTML Code for rounded corner textbox

<div class="loginboxdiv">
  <input class="loginbox" name="username" type="text" />
</div>

The container “div” contains the background image of rounded corners and inside of that the real textbox resides.

CSS Code for rounded corner textbox:

.loginboxdiv
{
 margin:0;
 height:21px;
 width:146px;
 background:url(login_bg.gif) no-repeat bottom;
}

.loginbox
{
 background:none;
 border:none;
 width:134px;
 height:15px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

The above CSS code is straight forward, the height and width of the class “loginboxdiv” should be exactly same as the above image which is of “146X21″ pixels. The class “loginbox” is the class of the textbox. As you can see in the css, border is removed and height , width and padding are managed according to the size of the background image.

Working Example- You can type in the rounded corner textbox:

Download Code:

Click here to download full source code