Tuesday, July 23, 2013

Rotate div In Asp .Net using JQuery

==>>In this article I am posting how to rotate multiple div like a slide show . It's a basic functionality that is used mostly in various websites. So i explain how to rotate div In Asp .Net using JQuery.In the Previous Article post the New-Features-in-Visual-Studio-2013   will help you for increase knowledge .: -

First you Need to create a website that have a aspx page.
Then add a Div in the body that have multiple divs.

. Div
<div id="MainDv">
        <div id="Div1" class="DvCss DvCssa">
            div 1 Show now
        </div>
        <div id="Div2" class="DvCss">
            div 2 Show now
        </div>
        <div id="Div3" class="DvCss">
            div 3 Show now
        </div>
    </div>






After the add div in body need to write css and js .

Css.

<style type="text/css">
        div
        {
            width: 100px;
            height: 100px;
        }
        #MainDv
        {
            position: relative;
        }
        .DvCss
        {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .DvCssa
        {
            display: block;
        }
        #Div1
        {
            background-color: Pink;
        }
        #Div2
        {
            background-color: Aqua;
        }
        #Div3
        {
            background-color: Fuchsia;
        }
    </style>



.JS

<script type="text/javascript" language="javascript">

        $(window).load(function() {
        var divs = $('.DvCss');

            function fade() {
                var current = $('.DvCssa');
                var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;

                if (nextIndex >= divs.length) {
                    nextIndex = 0;
                }
                var next = divs.eq(nextIndex);

                next.stop().fadeIn(2000, function() {
                $(this).addClass('DvCssa');
                });

                current.stop().fadeOut(2000, function() {
                $(this).removeClass('DvCssa');
                    setTimeout(fade, 2500);
                });
            }

            fade();
        })
   
    </script>

.donot forgot add 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>



No comments:

Post a Comment