jQuery SlideShow FeadIn, FadeOut

There are many-many effective slideshow functions are available on net, but I have also seen that many websites have simple image fade-in, fade-out effect for Header Banner Area, Here I will demonstrate to create a common function to apply this effect using jQuery with fadeIn(), fadeOut() functions.

It will take 3 steps to do it.

Step 1: Create HTML

 <ul class="flds">  
 <ul class="myBanner">  
 <li><img alt="" src="http://www.google.com/logos/2012/republicday12-hp.jpg" /></li>  
 <li><img alt="" src="https://www.google.co.in/logos/2012/juan_gris-2012-hp.jpg" /></li>  
 </ul>  
 </ul>  

Here we have two image in un-order list, it will two image one by one, Now we will apply absolute position to each LI usign CSS.

Step 2: Apply CSS to show in one place

 .myBanner{width:400px;height:144px;position:relative;}  
 .myBanner li{position:absolute;display:none;}  

You can see that here we have .myBanner class, I applied Width, Height and Position to Relative;
and its sub CSS LI has position:absolute to create all image in same position and display:none to hide all image

Now all image will be hide, but we need to display first image when web site load to show it as a default image, So it required to apply display:block style in first LI.

 <li style="display: block;"></li>  

or you can do it directly in LI tag or using CSS.

 .myBanner li:first-child{display:block!important;}  

finally it is required a jQuery function and a Timer to apply Hide/Show effect.

Step 3: Create jQuery Function

 <script type="text/script" language="javascript">  
 $(document).ready(function () {  
     setInterval("slideShow('.myBanner')", 5000);  
 });  
     function slideShow(ssObj) {  
       var obj = ssObj + " li";  
       var crrObj = $(obj + ':visible');  
       var nextObj = $(obj + ':visible').next();  
       if ($(obj + ':last').is(':visible')) {  
         nextObj = $(obj + ':first');  
       }  
       crrObj.fadeOut(2000);  
       nextObj.fadeIn(2000);   
     }  
 </script>  

cool! It is now ready to fadeIn, fadeOut by every 5 seconds.

Don't forget to import jQuery.js file.

Read More

How to create Water Mark effect in Jquery

Watermark effect is very easy using jQuery

Here is a quick sample:

Step 1: Create CSS:

 <style type="text/css">  
     .flds{list-style:none;padding:0;margin:0}  
     .flds li{padding-bottom:10px;}  
     .flds input,.flds textarea{border:solid 1px #3d3d3d;color:#}  
     .waterMark{color:#c5c5c5;}  
 </style>  

Step 2: HTML Form:

 <ul class="flds">  
 <li>  
     <span>Name</span>  
     <input id="v1" type="text" />  
   </li>  
 <li>  
     <span>Address </span>  
     <textarea cols="20" rows="3"></textarea>  
   </li>  
 <li>  
     <input type="submit" value="OK" />  
   </li>  
 </ul>  

Step 3: jQuery for Water Mark Effect:

 /*This is the function*/  
   jQuery.fn.WMark = function () {  
     //Each loop to find all textbox and text area  
     $("input[type=text],textarea").each(function () {  
       ///Hide Span Tag  
       $("span", this.parentNode).hide();  
       ///Hide Show WaterMark CSS effect in Focus and Blue Event  
       $(this).addClass('waterMark').val($(this).prev().text()).focus(function () { if (this.value == $(this).prev().text()) { $(this).removeClass('waterMark').val(''); }; }).blur(function () { if (this.value == '') { $(this).addClass('waterMark').val($(this).prev().text()); }; });  
     });  
   };  
   $(document).ready(function () {  
     ///Cell water mark function  
     $('.flds').WMark();  
   });  

Click here to see the Demo:

Read More

HTML 5 TAG REFERANCE

Download HTML5 Visual Cheat Sheet

Read More