Die Basis für alle Ajax aufrufe. Somit das Gesicht der Website.

index.php



<?php header('content-type: text/html;charset= UTF-8');?>
        <!DOCTYPE html>
        <html lang="de">
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <!--  
        ***********************************************************************
        IROCODE | Webdesign and Portalsolutions | Databases and Web2 technology
        http://www.irocode.com  
        Vienna, 2014 
        Code: IROCODE 
        ***********************************************************************
        --> 
                
        <!--//::::::::::::::::::::::::::::::: META :::::::::::::::::::::::::::: -->    
        <title>IROCODE | Webdesign and Portalsolutions | Databases and Web2 technology | EXAMPLE AJAX USERFORM</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <meta name="Description" content="Webprofi: CMS, Onlinedatenbanken, Logodesign, Webdesign in Wien | Ajax, MySQL, PHP, Actionscript, Flash, CSS, Javascript, HTML5">
        <meta name="Keywords" content="Webdesign, Wien, Österreich, Programmierung, Datenbankprogrammierung, Flash, PHP, CMS, MySQL, Ajax, Logodesign, Wien, Austria, Bernd Obendorfer Irocode, Portal, Actionscript">
        <meta name="dcterms.rightsHolder" content="www.irocode.com"> 
        <meta name="dcterms.dateCopyrighted" content="2014"> 
        <meta name="Author" content="Irocode - Webdesign - Datenbankprogrammierung - Logodesign - www.irocode.com">
        <meta name="revisit-after" content="1 days"> 
        <meta name="ROBOTS" content="INDEX,FOLLOW"> 
        <link rel="SHORTCUT ICON" href="www.irocode.com/images/favicon.ico"> 
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css"/>    
        <link rel="stylesheet" href="css/irocode.css" type="text/css"/> 
        <link rel="stylesheet" href="css/pagination.css" type="text/css"/> 
        <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script> 
        <script src="js/texteffects.min.js" type="text/javascript"></script>     
        <script src="js/jquery.validate.min.js" type="text/javascript"></script>
        <script src="js/validate_save.js" type="text/javascript"></script>                     
        <script src="js/functions.js" type="text/javascript"></script>             

        </head>
        <body>    
        
        <div class='container'>
        <!--//::::::::::::::::::::::::::::::: IROCODE MENU :::::::::::::::::::::::::::::::    -->    
        <?php
        
include ('menuenew.php'); 
        
?>         
        
        <!--//::::::::::::::::::::::::::::::: DATA ENTRY ::::::::::::::::::::::::: -->    
            <div class='bs-docs-section' >
                <div class='page-header' id="page-header_new" style='background-image: url(image/back.jpg)'>
                <h2 id='headline'>User Database 2014</h2>
                <h6 class='yellow'>(Update, add and delete. ENTER key for confirmation.)</h6>              
                <div class='row'>
                    <div class="col-md-6"><h4 class='goldx' id='message_display'>Ready for data entry:</h4></div>                        
                        <div class='col-md-2'> </div>                        
                    </div>
                </div>                
        
        <!--//::::::::::::::::::::::::::::::: HEADER INPUT  ::::::::::::::::::::::::: -->    
            <div class='row' >
                <div class='col-lg-3'><p class='gold'>Name</p></div>
                <div class='col-lg-4'><p class='gold'>Adress</p></div>
                <div class='col-lg-2'><p class='gold'>E-Mail</p></div>
                <div class='col-lg-1'><p class='gold'>Function</p></div>
                <div class='col-lg-2'><p class='gold'>Search</p></div>
            </div>             
            
        <!--//::::::::::::::::::::::::::::::: DATA INPUT ::::::::::::::::::::::::: -->    
            <div class='row' >
                <form name='form_save' id='form_save' class='form-horizontal'>
                <fieldset>
                <div class='col-lg-3'><input class='form-control' type='text' name='name' placeholder='Name'  id='name_entry'></div>
                <div class='col-lg-4'><input class='form-control' type='text' name='address' placeholder='Address' id='address_entry' ></div>
                <div class='col-lg-2'><input class='form-control' type='text' name='email' placeholder='E-Mail' id='email_entry' ></div>
                <div class='col-lg-1 form-actions'><button class='btn btn-primary' id='add_entry'>   ADD   </button></div>        
        
        <!--//::::::::::::::::::::::::::::::: DATA SEARCH ::::::::::::::::::::::::: -->    
                <div class="col-lg-2">
                        <div class="input-group">     
                        <input type='text' class='search form-control form-control' id='searchbox' placeholder='Search' >
                        <span class="input-group-btn">
                            <button class="btn btn-primary"  id="livesearch" type="button">Go!</button>  
                        </span>
                        </div>
                    </div>
                </fieldset>
            </form>
            </div>        
        
        <!--//::::::::::::::::::::::::::::::: HEADER OUTPUT  ::::::::::::::::::::::::: -->
        <br>
        <div id="headerfromstarter">        
            <h4 >User:</h4>    
            <div class='row'>
                <div class='col-lg-3'><p>Name</p></div>
                <div class='col-lg-4'><p>Address</p></div>
                <div class='col-lg-2'><p>E-Mail</p></div>
                <div class='col-lg-1'><p>ID</p></div>
                <div class='col-lg-2'><p>Function</p></div>
            </div>
            <div id='content'></div>
        </div>        
        <div class='row text-center'id='flash2'></div>    
        <!--//::::::::::::::::::::::::::::::: DATA OUTPUT PAGINATION AND ANIMATION ::::::::::::::::::::::::: -->            
        <script>        
        function showLoader(){            
        
            $("#flash").show();
            $("#flash").fadeIn(10).html('<img src="image/ajax-loadingsupa.gif" />'); 
            $("#flash").fadeOut(2000);
            
        }
        
        function hideLoader(){        
            //$('.search-background').fadeOut(4500);
        };
        
        function pagination_call(page){
            showLoader();
            $("#daycontent").load("data.php?newx=0&page="+page, hideLoader);            
            return false;
        };
        
        $(document).ready(function(){        
            showLoader();
            $("#daycontent").load("data.php?newx=0&page=1", hideLoader);             
            $("#flash").show();
            $("#flash").fadeIn(10).html('<img src="image/ajax-loading.gif" />'); 
            $("#flash").fadeOut(2000);
            $("#flash").hide();                    
            
        });            
        
        $('#name_entry').removeAttr('disabled','disabled'); 
        $('#email_entry').removeAttr('disabled','disabled'); 
        $('#address_entry').removeAttr('disabled','disabled');        

        </script>        
        
        <!--//::::::::::::::::::::::::::::::: DATA OUTPUT WITH PAGINATION END ::::::::::::::::::::::::: -->
        <div id='starter'>
            <div>
                <div id="container-1">
                <div class="search-background"></div>
                <div style="backround-color:#cc6666" id="daycontent"></div>
                </div>
            </div>
        </div>

        <!--//::::::::::::::::::::::::::::::: DISPLAY SEARCH RESULT ::::::::::::::::::::::::: -->    
        <div class='container'>
            <div class='row'>
                <div class='col-lg-12'>
                    <div style="backround-color:#fed51c" id='display_search'></div>
                </div>
            </div>
        </div>    
        
        <div style="backround-color:#555555" id='starter2'></div>    
        <div class="row">        
            <div class="col-lg-12" id="flash2" class="flash2 text-right"></div>        
        </div>
        
        </body>
        </html>

Beinhaltet den Funktionablauf der Seite. Animationen, Speichern, Updaten, Auslesen und Löschen. Ausserdem die unterstützende Logik für die Pagination.

function.js



/*
***********************************************************************
IROCODE | Webdesign and Portalsolutions | Databases and Web2 technology
http://www.irocode.com  
Vienna, 2014 
Code: IROCODE 
***********************************************************************
*/    


//::::::::::::::::::::::::::::::: TRIGGER SAVE :::::::::::::::::::::::::::::::
$ ("#save").click(function () {
        $("#searchbox").focus();
        save_user ();      
});

//::::::::::::::::::::::::::::::: SAVE :::::::::::::::::::::::::::::::
function save_user () {

    $( document ).ready(function() {
        $('#add_entry').attr('disabled','disabled'); 
        
    //    $('*').attr('disabled','disabled');   // Enable all buttons        
        messagetrigger="save";  // Message case for refresh_message function    
        $ ("#daycontent").empty();
        
        
        
            $("#flash2").show();
            $("#flash2").fadeIn(10).html('<img src="image/ajax-loading.gif" />'); 
            $("#flash2").fadeOut(500);
    
    
    setTimeout(function (){
        //$('#daycontent').fadeOut(400);    
        $.ajax({
                type: "POST",
                url: "insert.php",
                data: {name: $("#name_entry").val(), email: $("#email_entry").val(), address: $("#address_entry").val() },
                datatype: "json",            
                success: data_table_refresher_save, 
                complete: refresh_message,                
        })
        
        .done(function( msg ) {  // Server request last record
            msg = msg.replace("[", "");  // Split Server Request 
            msg = msg.replace("]", ""); 
        
            var urlrecal = "data.php?page=1&newx="+msg+""; 
            
            $('#name_entry').val('');  
            $('#address_entry').val('');
            $('#email_entry').val('');
            $('#add_entry').removeAttr('disabled','disabled'); // Deactivte add button        
        //    $('*').removeAttr('disabled','disabled');   // Enable all buttons
            $('#daycontent').html($("<div id='daycontent'>").load(urlrecal)); // Load url in div container dycontent. Save Output
        });                    
    
        $("#searchbox").focus(); //Focus search input field            
        
         }, 800);
    });
    
    
        
    
}

//::::::::::::::::::::::::::::::: SAVE OUTPUT :::::::::::::::::::::::::::::::
function data_table_refresher_save () {
    //$ ("#daycontent").empty();        
    
    var urlrecal = "data.php?page=1&newx='+msg+'"; 
    
    $('#name_entry').val('');
    $('#address_entry').val('');
    $('#email_entry').val('');
    $('#add_entry').removeAttr('disabled','disabled');    
    $('#daycontent').html($("<div id='daycontent'>").load(urlrecal));
    $('#daycontent').fadeIn(1000);
    
    
    
};


//::::::::::::::::::::::::::::::: UPDATE :::::::::::::::::::::::::::::::
function update () {

    $('#'+update_name_id+'').change(function() {
        myid =( $( this ).attr( 'id' ) );
        this_value=this.value;                    
        update(myid);    
        messagetrigger="update";      // Message case for refresh_message function    
        refresh_message ()        

        });


    $('#'+update_address_id+'').change(function() {
        myid =( $( this ).attr( 'id' ) );
        this_value=this.value;                    
        update(myid);    
        messagetrigger="update";      // Message case for refresh_message function    
        refresh_message ()        

        });


    $('#'+update_email_id+'').change(function() {
        myid =( $( this ).attr( 'id' ) );
        this_value=this.value;                    
        update(myid);    
        messagetrigger="update";      // Message case for refresh_message function    
        refresh_message ()        

        });
        
}        


//::::::::::::::::::::::::::::::: DELETE START :::::::::::::::::::::::::::::::
function delete_user () {   

    $(".btn-danger").attr("disabled", "disabled"); // Disable all buttons

    $( document ).ready(function() {        
        messagetrigger="delete";      // Message case for refresh_message function            
        $('#row_'+newid).animate({width: [ "toggle", "swing" ],height: [ "toggle", "swing" ],opacity: "toggle"} );    // Row fade effect    
    });
    
    setTimeout(function (){
        delete_user_further (); 
        $ ("#daycontent").empty();
    }, 1100); 
    
}    


function delete_user_further () {

    $( document ).ready(function() {        
        
        $.ajax({
                type: "POST",    
                url: "delete.php",              
                data: {id: ""+newid+""},
                datatype: "json",            
                success: data_table_refresher,                
                });            
            });    
            
        }    


function data_table_refresher () {    
        $("#flash2").show();
        $("#flash2").fadeIn(10).html('<img src="image/ajax-loading.gif" />'); 
        $("#flash2").fadeOut(700);
        
        var urlrecal_delete = 'data.php?page='+paghero+'';     
        refresh_message ();
    
        $('#name_entry').val('');
        $('#address_entry').val('');
        $('#email_entry').val('');
        $('#add_entry').removeAttr('disabled','disabled');         
        
        $(".btn-danger").removeAttr('disabled','disabled');   // Enable all buttons
        
    setTimeout(function (){
    $('#daycontent').html($("<div id='daycontent'>").load(urlrecal_delete));
    }, 1100); 
    
};    


//::::::::::::::::::::::::::::::: DELETE SEARCH :::::::::::::::::::::::::::::::
function delete_user_search () {

    $(".btn-danger").attr("disabled", "disabled"); // Disable all buttons

    $( document ).ready(function() {            
    messagetrigger="delete";      // Message case for refresh_message function                
    $('#row_'+newid).animate({width: [ "toggle", "swing" ],height: [ "toggle", "swing" ],opacity: "toggle"} ); // Row fade effect
    });
    
    setTimeout(function (){
        delete_user_further ();  
    }, 1100); 
    
}    


function delete_user_further () {

    $( document ).ready(function() {        
        
        $.ajax({
                type: "POST",    
                url: "delete.php",              
                data: {id: ""+newid+""},
                datatype: "json",            
                success: data_table_refresher (),            
            
        });            
    });
    $(".btn-danger").removeAttr('disabled','disabled');   // Enable all buttons
}    
    

//::::::::::::::::::::::::::::::: MESSAGES SWITCH :::::::::::::::::::::::::::::::
function refresh_message () {

    var add  = 1; //Record count sub and add
    var datacountadd = (Number(datacount) + Number(add)); //Record count
    datacountsub = (Number(datacount) - Number(add));
    
    switch (messagetrigger) {    
    case "save":
    $("#message_display").html('S A V E - '+ datacountadd + '&nbsp;records found.')    
    $("#message_display").textEffect();
                
    break;
        
        
    case "delete":
    $("#message_display").html('D E L E T E - Only&nbsp;'+ datacountsub +'&nbsp;records available.')    
    $("#message_display").textEffect();
    
    break;        
        
        
    case "search":        
    $("#message_display").html("S E A R C H M O D E")    
    $("#message_display").textEffect(); $("#message_display").fadeOut( 3650);
    setTimeout(function (){ 
        $("#message_display").html("Search result displayed:");    $("#message_display").textEffect();
    }, 3700);  
    
    break;        
        
        
    case "search_out":        
    $("#message_display").html("Search engine closed.")    
    $("#message_display").textEffect(); $("#message_display").fadeOut( 3650);
    setTimeout(function (){ 
        $("#message_display").html("Ready for data entry:");    $("#message_display").textEffect();
    }, 3700);  
    
    break;    
        
    case "update":        
    $("#message_display").html("U P D A T E")    
    $("#message_display").textEffect();
            
    break;        
        
    default:        
        break; 
    }
}


//::::::::::::::::::::::::::::::: LIVESEARCH ONLY ENTER :::::::::::::::::::::::::::::::    
$(document).ready(function(){

    $(".search").keypress(function(event) 
    {    
        if (event.keyCode == 13) {
        
        
            $('#name_entry').attr('disabled','disabled'); 
            $('#email_entry').attr('disabled','disabled'); 
            $('#address_entry').attr('disabled','disabled'); 
            $('#add_entry').attr('disabled','disabled');     
            $('#display_search').empty();            
            $('#headerfromstarter').hide();
            $ ("#daycontent").hide();
            $ ("#starter").empty();
            
            
            messagetrigger="search";      //Message case for refresh_message function        
            var searchbox = $(this).val();
            var dataString = 'searchword='+ searchbox;            
            if(searchbox=='')            
            {
                this.value=' ';        
            
            }
            else
            {
                $.ajax({
                        type: "POST",
                        url: "livesearch.php",
                        data: dataString,
                        cache: false,
                        success: function(html)
                    {
                        
                            $("#display_search").html(html).show(); refresh_message ();    
                    },
                });    
                
            }return false; 
        }});
});    

//::::::::::::::::::::::::::::::: LIVESEARCH CLICK FUNCTION BETA :::::::::::::::::::::::::::::::    
/*$("#searchbox").click(function () {    
 if ($("#searchbox").value == "") {                
         
    }    else {}
$("#searchbox").focus(function(){
$('#searchbox').val(' ');
});
});*/

//::::::::::::::::::::::::::::::: LIVESEARCH ONLY BUTTON :::::::::::::::::::::::::::::::        
$(document).ready(function(){    

    $("#livesearch").click(function () {
        var searchbox = $(this).val();
        $("#searchbox").focus();
        if(searchbox==''){
            var searchbox ="a";
            }
            else
            {}            
        
            
            $('#name_entry').attr('disabled','disabled'); 
            $('#email_entry').attr('disabled','disabled'); 
            $('#address_entry').attr('disabled','disabled'); 
            $('#add_entry').attr('disabled','disabled');     
            $('#display_search').empty();            
            $('#headerfromstarter').hide();
            $ ("#daycontent").hide();
            $ ("#starter").empty();            
            
            messagetrigger="search";      //Message case for refresh_message function    
            var searchbox = $("#searchbox").val();
            if(searchbox=='')
                {
                var searchbox ="";
                }
                else{}
                if(searchbox==' '){var searchbox ="";
                }
                else{}
            
            var dataString = 'searchword='+ searchbox;    
            
                $.ajax({
                        type: "POST",
                        url: "livesearch.php",
                        data: dataString,
                        cache: false,
                        success: function(html)
                    {
                
                        setTimeout(function (){                    
                                $("#display_search").html(html).show();
                            }, 200);     
                            
                        refresh_message ();    
                    },
                });    
                
            return false;     
    });        
    
});    


//::::::::::::::::::::::::::::::: LIVESEARCH CLOSE :::::::::::::::::::::::::::::::
$ ("#closer_search").click(function () {    

    messagetrigger="search_out";   

    $('#name_entry').removeAttr('disabled','disabled'); 
    $('#email_entry').removeAttr('disabled','disabled'); 
    $('#address_entry').removeAttr('disabled','disabled'); 
    $('#add_entry').removeAttr('disabled','disabled'); 
    $('#headerfromstarter').show();    
    $('#display_search').empty();
    $('#display_search').show();

    var urlrecal = "data.php?page=1&newx=1"; 
        
    $('#name_entry').val('');
    $('#address_entry').val('');
    $('#email_entry').val('');
    
    $('#starter2').html($("<div id='daycontent'>").load(urlrecal));
        refresh_message ();    
    
    });    

Daten werden hier zusammengetragen und bereit gemacht für alle möglichen Funktionen.

Die Pagination und viele andere Funktionen und Seiten werde ich hier nicht präsentieren.

Das komplette Sourcecode-Beispiel schicke ich Ihnen gerne per Anfrage.

daten.php



<?php header('content-type: text/html;charset= UTF-8');?>

<!--  
        ***********************************************************************
        IROCODE | Webdesign and Portalsolutions | Databases and Web2 technology
        http://www.irocode.com  
        Vienna, 2014 
        Code: IROCODE 
        ***********************************************************************
        --> 

            <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css"/>    
            <link rel="stylesheet" href="css/irocode.css" type="text/css"/> 
            <link rel="stylesheet" href="css/pagination.css" type="text/css"/>             
            <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>             
            <script src="js/texteffects.min.js" type="text/javascript"></script>     
            <script src="js/functions.js" type="text/javascript"></script>             
            
            <?php
            
if(!empty($_GET)) extract($_GET);
            if(!empty(
$_POST)) extract($_POST);                

            require_once(
"****.php"); 
            
            
$functs = new Functs();
            
$total_rows $functs->Rowpagination_call_totaladdingcategorypage($addingcat); // Number of rows in the table database
            
$total $total_rows['total']; 
            
$per_page 5;  // Number of rows per page ( 8 rows will be displayed per page in this case)
            
$pages ceil($total/$per_page);
            
            
$resultx ceil($per_page*$pages);  //calculation Pagehero
            
$resultxwhole ceil($resultx-$total);
            
$occupied ceil($per_page-$resultxwhole);                    
                
            if(isset(
$_GET['page'])){
                
$page1 intval($_GET['page']);
                if(
$page1>$pages){
                    
$page1 $pages;
                }
            }else{
                
$page1 1;
            }
            
$start = ($page1-1)*5;    
            
$rsd $functs->Rowaddingcategorypagination_ajaxcall($start,$per_page);
        
            if(empty(
$rsd)) 
            {                
            echo
"<br><br><div class='row'>";
            echo
"<div class='col-lg-6 col-lg-offset-3'>";
            echo
"<div class='row'>";        
            echo
"<div class='alert alert-dismissable alert-danger  text-center' ><button class='close' data-dismiss='alert' type='button'></button><strong>No Rows to display!<br><br><img src='image/twin.png'> <br> <br class='text_center'></strong></div>";      
            echo
"</div>";
            echo
"</div>";
            echo
"</div>";                
            }
            else     
            {
                while (
$row mysql_fetch_assoc($rsd))
                { 
        
                
$is=$row['id'];            
                if(
$newx == $is) {$info="<label class='btn btn-info'>NEW</label>";}  /*fresh record*/                    
                    
else
                    {        
                        
$info="&nbsp; "
                    };                    
                    
$seotilite=$functs->TitleFiled($row['title_cols']);        
                
                    
?>
                    
                <div class='row'>
                    <div class='col-lg-12' >
                        <div class='row' id='row_<?= $row['id'];?>' >
                            <div class='col-lg-3'><p><input class='form-control' placeholder='Name' type='text' name='name' id='name_<?= $row['id'];?>' value='<?= $row['name'];?>'></p></div>
                            <div class='col-lg-4'><p><input class='form-control' placeholder='Address' type='text' name='address' id='address_<?= $row['id'];?>' value='<?= $row['address'];?>'></p></div>
                            <div class='col-lg-2'><p><input class='form-control' placeholder='E-Mail' type='text' name='email' id='email_<?= $row['id'];?>' value='<?= $row['email'];?>'></p></div>
                            <div class='col-lg-1'><p><input class='form-control' placeholder='id' type='text' name='id' id='id_<?= $row['id'];?>' value='<?= $row['id'];?>' disabled=''></p></div>
                            <div class='col-lg-1'><button class='btn btn-danger' id='delete_<?= $row['id'];?>'>DELETE</button></div>
                            <div class='col-lg-1'><?= $info;?></div>
                        </div>
                    </div>
                </div>
                    
                    
                <?php
                $id
$row['id'];
                
$name$row['name'];
                
$email$row['email'];
                
$address$row['address'];
                
                if (
$occupied == '0'){ $sum=($page1-1);
                }                 
                    else if   (
$occupied 0) {$sum=($page1); 
                    }                        
                    else {
$sum=($page1+1);   }?>
                
                <script>                         
                
                var paghero = "<?php echo $sum?>";     
                var datacount="<?php echo $total ?>";
                var delete_id = "<?php echo $id ?>"; 
                var update_name_id = "<?php echo "name_" $id "" ?>"; 
                var update_email_id = "<?php echo "email_" $id "" ?>"; 
                var update_name = "<?php echo $name ?>"; 
                var update_email = "<?php echo $email ?>"; 
                var update_address_id = "<?php echo "address_" $id "" ?>"; 
                var update_address = "<?php echo $address ?>"; 
                $ ("#delete_<?php echo $id ?>").click(function () {newid = "<?php echo $id ?>"; delete_user ();  
                });      
                    
                update();      //Call update response       
            
                </script>
                                        
                <?php                    
                
}
                
?>                 
                <div id="paging_button" style="text-align:center;">                
                <?php
                
echo '<ul>';
                
$pag=$functs->pagination_call($page1$pages);                    
                echo 
$pag;
                echo 
'</ul>';
                echo 
'<div class="col-lg-12" id="flash" class="flash text-right"></div>';
                
?>
                </div>    
        
                <?php
                
}                    
                
?>    
                <script>    
                function update (myid) {         
                    messagetrigger="update";          // Message case for refresh_message function          
                    myidsplit = myid.split("_");      // split "id_Nummer" 
                    nameofinput = this.name;          // fetch the fieldname 
                    var $whatiam = nameofinput;       // defined parameter name
                    var data = {id:myidsplit[1],wertmysqlwas:myidsplit[0], wertmysqlwert:this_value };    //Generates data string
                    data[$whatiam] = this.value, 
            
                        $.ajax({ 
                            type:"POST",                 
                            url: "update.php", 
                            data: data, 
                            datatype: "json",               
                            success: refresh_message,        // call Message case                      
                }) 
                ;return false; 
            }     
        
            </script>                
            
            <script>
            $(document).ready(function(){
            
                var Timer  = '';
                var selecter = 0;
                var Main =0;                
                bring(selecter);
                
            });
            function bring ( selecter )
            {    
                $('div.shopp:eq(' + selecter + ')').stop().animate({opacity  : '1.0', height: '60px'},170,function(){
                    
                    if(selecter < 6)
                    {
                        clearTimeout(Timer); 
                    }
                });
                
                selecter++;
                var Func = function(){ bring(selecter); };
                Timer = setTimeout(Func, 20);        
            
            }
            </script>
Demo