Jump to content

Changing Divs Again


garyblackpool
 Share

Recommended Posts

hi i to change some divs i expaned some code, but dont seem to be able to make it work. Could someone please tell me where i have gone wrong thank you gary

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen;function initiate(){one = setTimeout("first()",500);}function first(){clearTimeout(one);document.getElementById("one").style.visibility="hidden";document.getElementById("two").style.visibility="visible";two = setTimeout("second()",500);}function second(){clearTimeout(two);document.getElementById("two").style.visibility="hidden";document.getElementById("three").style.visibility="visible";three = setTimeout("third()",500);}function third(){clearTimeout(three);document.getElementById("three").style.visibility="hidden";document.getElementById("four").style.visibility="visible";four = setTimeout("fourth()",500);}function fourth(){clearTimeout(four);document.getElementById("four").style.visibility="hidden";document.getElementById("five").style.visibility="visible";five = setTimeout("fifth()",1750);}function fifth(){clearTimeout(five);document.getElementById("five").style.visibility="hidden";document.getElementById("six").style.visibility="visible";six = setTimeout("sixth()",2000);}function sixth(){clearTimeout(six);document.getElementById("six").style.visibility="hidden";document.getElementById("seven").style.visibility="visible";seven = setTimeout("seventh()",2500);}function seventh(){clearTimeout(seven);document.getElementById("seven").style.visibility="hidden";document.getElementById("eight").style.visibility="visible";eight = setTimeout("eighth()",3000);}function eighth(){clearTimeout(eight);document.getElementById("eight").style.visibility="hidden";document.getElementById("nine").style.visibility="visible";nine = setTimeout("ninth()",3500);}function ninth(){clearTimeout(nine);document.getElementById("nine").style.visibility="hidden";document.getElementById("ten").style.visibility="visible";ten= setTimeout("tenth()",4000);}function tenth(){clearTimeout(ten);document.getElementById("ten").style.visibility="hidden";document.getElementById("eleven").style.visibility="visible";eleven= setTimeout("eleventh()",4500);}function eleventh(){clearTimeout(eleven);document.getElementById("eleven").style.visibility="hidden";document.getElementById("twelve").style.visibility="visible";twelve = setTimeout("twelth()",5000);}function twelth(){clearTimeout(twelve);document.getElementById("twelve").style.visibility="hidden";document.getElementById("thirteen").style.visibility="visible";}/*--*//*]]>*/</script><style type="text/css">body{background-color:black;}div.intro{font-size:100px;color:white;font-family:areal,helvetica,sans-serif;font-weight:bold;width:50%;position:absolute;left:25%;top:30%;}div#one{visibility:visible;}div#two{visibility:hidden;}div#three{visibility:hidden;div#four{visibility:hidden;}div#five{visibility:hidden;}div#six{visibility:hidden;}div#seven{visibility:hidden;}div#eight{visibility:hidden;}div#nine{visibility:hidden;}div#ten{visibility:hidden;}div#eleven{visibility:hidden;}div#twelve{visibility:hidden;}div#thirteen{visibility:hidden;}</style></head><body onload="initiate();"><div class="intro" id="one"> Touch It</div><div class="intro" id="two"> Bring It </div><div class="intro" id="three"> Baby! </div><div class="intro" id="four"> You  </div><div class="intro" id="five"> Know </div><div class="intro" id="six"> My Scripts </div><div class="intro" id="seven"> Amazing !!</div><div class="intro" id="eight"> Drop It </div><div class="intro" id="nine"> Make You </div><div class="intro" id="ten"> Crazy!!! </div><div class="intro" id="eleven"> Gazey</div><div class="intro" id="twelve"> BABY</div><div class="intro" id="thirteen"> CRAZY</div></body></html> 

Link to comment
Share on other sites

here try this! this script adds id ref, class ref. css styling automatically. save creating css code for each one.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var one, two;var InnerDivTotal;var runthis;function initiate(){var a = document.getElementById("text_container");var b = a.getElementsByTagName("div");InnerDivTotal = b.length;for(i=0;i<InnerDivTotal;i++) // add id and class ref{b.setAttribute('id','div'+(i+1));b.setAttribute('class','intro');b.setAttribute('className','intro');//for IEif(i>0){b.style.visibility="hidden"; //hides all div except first(not including 'text_container' div}}var div1 = setTimeout("runthis(1)",500);}var dothis;function runthis(divref){if(divref<InnerDivTotal){document.getElementById("div"+divref).style.visibility="hidden";document.getElementById("div"+(divref+1)).style.visibility="visible";dothis=setTimeout("runthis("+(divref+1)+")",500);}else{clearTimeout(dothis);}}/*--*//*]]>*/</script> <style type="text/css">body{background-color:black;}div.intro{font-size:100px;color:white;font-family:areal,helvetica,sans-serif;font-weight:bold;width:50%;position:absolute;left:25%;top:30%;}</style></head><body onload="initiate();"><div id="text_container"><div> Touch It</div><div> Bring It </div><div> Baby </div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

It only affect the divs within 'text_container'.a = ref to outer divvar a = document.getElementById("text_container");next assign b the list of div tags within 'text_container' var b = a.getElementsByTagName("div");find the number/length of inner tags InnerDivTotal = b.length;then you basically use 'for' loop which increment the value by 1 until InnerDivTotal value is matched, to assign a "div" + current loop value 'i', as id ref "div1","div2" etcthen add css styling to all inner divs except the first one.the setTimeout does the same thing, but everytime it runs it increase the value by one which is used to as id ref to hide and show current and next inner div's, until total inner div's reached then it clears/ends the settimeout function.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...