Advertisement

05.11.2008 at 06:20AM PDT, ID: 23392669
[x]
Attachment Details

animate Divs - on/off

Asked by cyberwebservice in JavaScript, Web Languages/Standards, Hypertext Markup Language (HTML)

animating the divs. This question is related to my this question.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23379133.html

Now the divs are animated beautifully, but i want an option for the user to on/off the animation. If i click 'off' the animation should stop. If i click 'on' the animation should start.

I have attached the existing code.

Any help is appreciated.
ThanksStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:

<style type="text/css">
#discounts_container, #quick_facts_container, #safaries_reserves_container, #events_container 
{ display:none; }
</style>
 
<script type="text/javascript">
var rotate = 0;
var ids = [ "discounts_container", "quick_facts_container", "safaries_reserves_container", "events_container" ];
function rotator() {
        for (var i = 0; i < ids.length; i++) {
                document.getElementById(ids[i]).style.display = i == rotate ? 'block' : 'none';
        }
        rotate = (rotate + 1) % ids.length;
}
window.setInterval(rotator, 5000);
</script>
 
<script language="javascript">
function ToggleTeaserIntro(strSelectedTeaser, altBg, newBg){
 
        var contentLayerName = strSelectedTeaser + "_content";
        var teaserNames = new Array("teaser_0","teaser_1","teaser_2","teaser_3");
        var teaserContentContainerNames = new Array("quick_facts_container", "safaries_reserves_container", "events_container", "discounts_container");
 
        for(var i=0; i <= teaserNames.length; i++){
 
                tempTeaserName = teaserNames[i];
                tempCCName = teaserContentContainerNames[i];
                        
                if(tempTeaserName == strSelectedTeaser){
                        document.getElementById(strSelectedTeaser).style.backgroundImage="url("+newBg+")";
                        document.getElementById(tempCCName).style.visibility = "visible";
                }else{
                        document.getElementById(tempTeaserName).style.backgroundImage="url("+altBg+")";
                        document.getElementById(tempCCName).style.visibility = "hidden";
                }
        }
}
</script>
 
<!-- Teaser_Menu //-->
<div id="teaser_menu_container" style="position:absolute; left:200px; top:379px; z-index:100;">
<?
        $teaserMenuArray = Array("Quick Facts", "Safaris & Reserves", "Events", "Discounts");
?>
        <table cellspacing="0" cellpadding="0" border="0" width="601" height="22">
                <tr>
                        <? 
                                $teaserCount = count($teaserMenuArray);
                                for($i=0; $i<$teaserCount; $i++){ 
 
                                        if((($i+1)< $teaserCount)){
                                                $bg = "bg_unclicked_any.gif";
                                                $newBg = "bg_clicked_any.gif";
                                                $bgWidth="150";
                                                $endElement = 0;
                                        }else{
                                                $bg = "bg_unclicked_end.gif";
                                                $newBg = "bg_clicked_end.gif";
                                                $bgWidth="151";
                                                $endElement = 1;
                                        }
 
                                        $element_id = "teaser_".$i;
                                        $bgFinal = $serverRoot."/art/teasers/".$bg ;
                                        $newBgFinal = $serverRoot."/art/teasers/".$newBg;
 
                        ?>
                        <td valign="center" align="center" style="background-image:url(<?= $bgFinal ?>);" width="<?= $bgWidth ?>" height="22" id="<?= $element_id ?>">
                                <a href="javascript:ToggleTeaserIntro('<?= $element_id ?>', '<?= $bgFinal ?>','<?= $newBgFinal ?>');" class="teaser_header"><?= $teaserMenuArray[$i]?></a></td>
                        <? } ?>
                </tr>
        </table>        
</div>  
 
 
<!-- quick_facts //-->
<div id="quick_facts_container" style="position:absolute; left:200px; top:400px; z-index:99;">
        <table cellspacing="1" cellpadding="0" bgcolor="#666666" border="0">
                <tr>
                        <td valign="top" bgcolor="#ffffff">
                                <table cellpadding="0" cellspacing="0" width="599" height="180" border="0">
                                        <tr>
                                                <td height="10"><img src="<?= $serverRoot ?>/art/dummy.gif" width="1" height="10" border="0"</td>
                                        </tr>
                                        <tr>
                                                <td valign="top">
                                                        <table cellpadding="5" cellspacing="0" border="0">
                                                                <tr>
                                                                        <td valign="top"><img src="<?= $serverRoot ?>/art/vis_quick_facts.gif"></td>
 
                                                                        <td class="small" valign="top">The former French Cameroon and part of British Cameroon merged in 1961 to form the present country. Cameroon has generally enjoyed stability, which makes it one of Africas most promising Countries.</a> <a href="" class="small_orange">Read more
                                                                        <ul class="unorderedList_orange">
                                                                                <li> <a href="" class="small_orange">Provincies and Cities</a></li>
                                                                                <li> <a href="" class="small_orange">People and Cultures</a></li></ul></td>
                                                                </tr>
                                                        </table></td>
                                        </tr>
                                </table></td>
                </tr>
        </table>
</div>
 
 
<!-- Safaris & Reserves //-->
<div id="safaries_reserves_container" style="position:absolute; left:200px; top:400px; z-index:99;">
        <table cellspacing="1" cellpadding="0" bgcolor="#666666" border="0">
                <tr>
                        <td valign="top" bgcolor="#ffffff">
                                <table cellpadding="0" cellspacing="0" width="599" height="180" border="0">
                                        <tr>
                                                <td height="10"><img src="<?= $serverRoot ?>/art/dummy.gif" width="1" height="10" border="0"</td>
                                        </tr>                                   
                                        <tr>
                                                <td valign="top">
                                                        <table cellpadding="5" cellspacing="0" border="0">
                                                                <tr>
                                                                        <td valign="top"><img src="<?= $serverRoot ?>/art/vis_safari_reserves.jpg"></td>
                                                                        
                                                                        <td class="small" valign="top">his is a must see for lovers of wildlife safari. With an area of 170000 hectares, it is crammed with a variety of savanna fauna, which makes it one of the most interesting parks in West Africa. <a href="" class="small_orange">Read more</a>
                                                                        <ul class="unorderedList_orange">
                                                                                <li><a href="" class="small_orange">The Waza Park</a></li>
                                                                                <li><a href="" class="small_orange">The Benue National Park</a></li>
                                                                                <li><a href="" class="small_orange">The Faro National Park</a></li></ul></td>
                                                                </tr>
                                                        </table></td>
                                        </tr>
                                </table></td>
                </tr>
        </table>
</div>
 
 
<!-- EVENTS //-->
<div id="events_container" style="position:absolute; left:200px; top:400px; z-index:99;">
        <table cellspacing="1" cellpadding="0" bgcolor="#666666" border="0">
                <tr>
                        <td valign="top" bgcolor="#ffffff">
                                <table cellspacing="0" cellpadding="0" width="599" height="180" border="0">
                                        <tr>
                                                <td valign="center" align="center" class="small"> teaser content for EVENTS.</td>
                                        </tr>
                                </table></td>
                </tr>
        </table>
</div>
 
 
<!-- discounts //-->
<div id="discounts_container" style="position:absolute; left:200px; top:400px; z-index:99;">
        <table cellspacing="1" cellpadding="0" bgcolor="#666666" border="0">
                <tr>
                        <td valign="top" bgcolor="#ffffff">
                                <table cellspacing="0" cellpadding="0" width="599" height="180" border="0">
                                        <tr>
                                                <td valign="center" align="center" class="small"> teaser content for DISCOUNTS.</td>
                                        </tr>
                                </table></td>
                </tr>
        </table>
</div>
Related Solutions: Toggle Divs
[+][-]05.11.2008 at 08:06AM PDT, ID: 21542616

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]05.11.2008 at 08:08AM PDT, ID: 21542619

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, Web Languages/Standards, Hypertext Markup Language (HTML)
Sign Up Now!
Solution Provided By: Mehuge
Participating Experts: 2
Solution Grade: A
 
 
[+][-]05.16.2008 at 10:17PM PDT, ID: 21588068

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]05.17.2008 at 03:48AM PDT, ID: 21588688

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_Related_20080208