JQuery show and hide multiple DIV specific time interval

 In this article I’m going to explain how to show/hide multiple DIV specific time interval by using JQuery.
It’s quite easy to how/hide multiple DIV specific time interval by using JQuery. JQuery Show() and hide() function enables you to do this task with custom Fade In and Fade Out effect. Please follow the steps given below
          First we have to add JQuery library,

Add JQuery library:
Please add this JQuery library on <head> section:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

Add Script:
<script type="text/javascript">
        $(document).ready(function () {
            var $divs = $("div").hide(),
            current = 0;
            $divs.eq(0).show();
            function showNext() {
                if (current < $divs.length - 1) {
                    $divs.eq(current).delay(2000).fadeOut('fast', function () {
                        current++;
                        $divs.eq(current).fadeIn('fast');
                        showNext();
                    });
                }
            }
            showNext();
        });
</script>

Add style:
<style type="text/css">
     .divstyle     {
         background:#4D4D4D; width:500px;
         height:150px; color:White;
         font-family:Calibri; font-size:30px;
         text-align:center; padding-top:100px;   }
     .divstyle1  {
         background:#338585; width:500px;
         height:150px; color:White;
         font-family:Calibri; font-size:30px;
         text-align:center; padding-top:100px;   }
    </style>

Add HTML Markup:
<div id="div1" class="divstyle1">
        Welcome to dotnetfox</div>
<div id="div2" class="divstyle">
        ASP.NET</div>
<div id="div3" class="divstyle1">
        WCF</div>
<div id="div4" class="divstyle">
        JQyery</div>
<div id="div5" class="divstyle1">
        AJAX</div>    

Comments

Post a Comment

Popular posts from this blog

How to Install Squirrel Mail in ubuntu

Image
Squirr elMail   is an Open Source project that provides both a web-based email application and an IMAP proxy server. The webmail portion of the project was started by Nathan and Luke Ehresman   in 1999 and is written in the PHP scripting language. It can be installed on almost all web servers as long as PHP is present and the web server has access to an IMAP and SMTP server                                                                                             SquirrelMail webmail outputs valid HTML 4.0 for its presentation, making it compatible with a majority of current web browsers. S...
Read more

How to Display Date in PHP

Image
To get current datetime (now) with PHP you can use   date   with any PHP version, or better   datetime class   with PHP >= 5.2 Various date format expressions are available   here . Example using   date This expression will return NOW in format   Y-m-d H:i:s 1 2 3 <?php echo date ( 'Y-m-d H:i:s' ); ?> Example using   datetime class This expression will return NOW in format   Y-m-d H:i:s 1 2 3 4 <?php $dt = new DateTime(); echo $dt ->format( 'Y-m-d H:i:s' ); ?> A more complete approach Above examples will return NOW using your server timezone, as it is defined in   php.ini , for example: 1 2 3 4 [Date] ; Defines the default timezone used by the date functions ; http://php.net/date.timezone date.timezone = Europe/Athens But, the best approach is to save dates to   UTC . UTC (also called Zulu time) is the   standard in...
Read more

Export HTML Table Data to Excel, CSV, PNG and PDF using jQuery Plugin

Image
Exporting data   in to a format is a very common features in website.There is a lot of plugin which is used to export table data into xml,csv and png format but that will use for separate jquery file for each exporting format. The   tableExport   is a wonderful jquery plugin which extracting table data into all formats like JSON , XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF, so with help of this jquery plugin you not need any other jquery plugin to extract data from tables.You can integrate   tableExport   plugin very easily with your project.
Read more