CODEWITHSUNDEEP
javascripthtml
jackmeister
jackmeister

Reputation: 1

JavaScript coding to display one div at a time

I drew an image in HTML out of div boxes. I'm not very fluent with JavaScript, I am trying to display one div at a time like a building image. What would be a good JavaScript equation to display each div one at a time like a flash movie without rewriting my code? I have access to Dreamweaver if that would make anything easier. Here is a small piece of my image:

<html>
<head>

<style type="text/css">

</head>

#apDiv6101 {
position:absolute;
width:131px;
height:81px;
z-index:35;
left:119px;
top:785px;
background-color:#80d010;}

#apDiv6102 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:858px;
background-color:#80d010;}

#apDiv6104 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:858px;
background-color:#80d010;}

#apDiv6106 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:785px;
background-color:#80d010;}

#apDiv6108 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:785px;
background-color:#80d010;}

#apDiv6110 {
position:absolute;
width:121px; 
height:73px;
z-index:40;
left:124px;
top:789px;
background-color:#000000;}


</style>

<body bgcolor="#000000">

<div id="apDiv6110"></div>
<div id="apDiv6108"></div>
<div id="apDiv6106"></div>
<div id="apDiv6104"></div>
<div id="apDiv6102"></div>
<div id="apDiv6101"></div>

</body>
</html>

Upvotes: 0

Views: 696

Answers (2)

Cheeso
Cheeso

Reputation: 192657

This page hides all divs, and then stepwise, displays one at a time until all divs in the document are displayed.

http://jsfiddle.net/fFtZc/2/

The JS code: 

var current = 0, L, alldivs;

function displayOne() {
    if (current < L) {
        alldivs[current].style.display = '';
        current++;
        setTimeout(displayOne, 750);
    }
}

function init() {
    var i;
    alldivs = document.getElementsByTagName('div');
    for (i=0, L=alldivs.length; i<L; i++) {
        alldivs[i].style.display='none';
    }
    setTimeout(displayOne, 750);
}

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", init, false);
}
else {
    /* for other browsers */
    window.onload = init;
}

Upvotes: 1

Archan Mishra
Archan Mishra

Reputation: 905

As far as i understand you want the images to appear one after the another. and you want only one image to appear at once(hide the previous one)

the code for that would be .

(assuming Jquery is used)

var img_arr = ['appDiv6101','appDiv6102'....,'appDiv6110'];

var i =0;
function cycleImages(){
// hide all the divs
$('div#^appDiv').hide();
//now show the apppropiate div
i = i++ % 12;
$('div#'+img_arr[i-1]).show();
// wait for sometime and call again.
setTimeout(cycleImages,30);
}

Upvotes: 0

Related Questions