ansaurus

Question

Show and hide divs at a specific time interval using jQuery

Answer 1

+1 A:

<script type="text/javascript">
 $(document).ready(
  function(){
   $('#portfolio').innerfade({
    speed: 'slow',
    timeout: 10000,
    type: 'sequence',
    containerheight: '220px'
   });
  }
 );
</script>


<ul id="portfolio"> 
 <li>
  <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"&gt;
   <img src="images/ggbg.gif" alt="Good Guy bad Guy" />
  </a>
 </li>
 <li>
  <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html"&gt;
   <img src="images/whizzkids.gif" alt="Whizzkids" />
  </a>
 </li> 
 <li>
  <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html"&gt;
   <img src="images/km.jpg" alt="Königin Mutter" />
  </a>
 </li> 
 <li>
  <a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html"&gt;
   <img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
  </a>
 </li> 
 <li>
  <a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html"&gt;
   <img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
  </a>
 </li> 
</ul>

eed3si9n 2009-05-27 10:25:17

Answer 2

+6 A:

Working Example here - add /edit to the URL to play with the code

You just need to use JavaScript setInterval function

$('html').addClass('js');

$(function() {

  var timer = setInterval( showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('div','#container')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 3? counter = 0 : counter++; 

  }

});

and the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<h2>Example of using setInterval to trigger display of Div</h2>
<p>The first div will display after 10 seconds...</p>
<div id='container'>
<div id='div1' class='display' style="background-color: red;"> 
  div1
</div>

<div id='div2' class='display' style="background-color: green;"> 
  div2
</div>

<div id='div3' class='display' style="background-color: blue;"> 
  div3
</div>
<div>

</body>
</html>

EDIT:

In response to your comment about the container div, just modify this

$('div','#container')

to this

$('#div1, #div2, #div3')

Russ Cam 2009-05-27 10:29:40

Russ Thanks for the quick reply to the post. In your example it shows we need to have a div container and in to that we need to have other divs.. But my divs are not inside to an container its seperate. how to modify the code accordingly ?

Webrsk 2009-05-27 10:40:27

do you have access to modify the HTML? If so, I would suggest wrapping the divs in a container div for context and ease of selection. Without a container div, the code would need to be modified to select only those divs in question i.e. divs with ids 1, 2 and 3. I'll update my answer now

Russ Cam 2009-05-27 10:44:50

Ya makes sense i can have it in a container div for better clarity.Russ tell me can we show another div (named : div_sub1) at the time of displaying div1 and subsequently.Will the same code can be resued ?

Webrsk 2009-05-27 11:18:27

Sure. There's a number of ways of tackling that scenario, you could use an attribute match on the id to show div_sub1 at the same time as div1, you could chain it onto the visibility of div1, to name a couple of solutions.

Russ Cam 2009-05-27 11:23:01

P.S. I have also provide a solution to your other question using an anchor to toggle showing different divs - http://stackoverflow.com/questions/914558/using-jquery-how-to-show-and-hide-different-divs-onclick-event/914793#914793

Russ Cam 2009-05-27 11:37:04

Russ for an understanding can you explain what this line does .filter( function() { return this.id.match('div' + counter); }) Thanks.

Webrsk 2009-05-27 11:37:11

the $('div','#container') selector selects all divs in the context of the element with container id. Then all of the matched elements are hidden, then we want to filter the matched elements to only elements whose id matches 'div' + the value of counter (in this case, only one element will match) and then show the filtered elements

Russ Cam 2009-05-27 12:12:28

Thanks Russ . I have accepted this as an answer :)

Webrsk 2009-05-29 06:09:13

Answer 3

+2 A:

Loop through divs every 10 seconds.

$(function () {

    var counter = 0,
        divs = $('#div1, #div2, #div3');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 10 * 1000); // do this every 10 seconds    

});

Alexander Ulizko 2009-05-27 10:38:06

Answer 4

+1 A:

here is a jQuery plugin I came up with:

$.fn.cycle = function(timeout){
    var $all_elem = $(this)

    show_cycle_elem = function(index){
        if(index == $all_elem.length) return; //you can make it start-over, if you want
        $all_elem.hide().eq(index).fadeIn()
        setTimeout(function(){show_cycle_elem(++index)}, timeout);
    }
    show_cycle_elem(0);
}

You need to have a common classname for all the divs you wan to cycle, use it like this:

$("div.cycleme").cycle(5000)

duckyflip 2009-05-27 10:39:12

Answer 5

A:

Same question for me,now im using InnerFade.

Xaldada 2010-03-09 02:42:50

Answer 6

A:

I have a question regarding Russ Cam's solution.I'm trying to place my content inside any of the div1,div2,div3 <div id='div2' class='display' style="background-color: green;"> <div class="column1">...</div>... </div> but for some reason it won't show up.I can only have clear text inside <div id='div1,2,3'>.What could be the problem?

reloadro 2010-08-24 16:24:48

Answer 7

A:

Hi Russ,

This solution works perfect for my requirement. Thanks!!! Could you please let me know why is there a 10 second delay initially. Is it possible to avoid it. I looked through the script and was not able to figure out why it would do it. I changed .show('fast') to .show() and still could see the delay. Could you please point me out how to handle this? Thanks in advance.

Regards, Raj

Raj 2010-08-30 15:59:09

ansaurus

tags:

views:

answers:

Show and hide divs at a specific time interval using jQuery

related questions