Dynamically Updating Styles Using DHTML : HTML Style : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » HTML Style »

 

Dynamically Updating Styles Using DHTML




/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function initialize() {
 state = 0
 if(document.all && !document.getElementById) {
  div0 = document.all["d0"]
  div1 = document.all["d1"]
  div2 = document.all["d2"]
  browser = "ie4"
 }else if(document.getElementById){
  div0 = document.getElementById("d0")
  div1 = document.getElementById("d1")
  div2 = document.getElementById("d2")
  browser = "dom1"
 }else{
  browser = "unknown"
  return
 }
 divs = new Array(div0, div1, div2)
 divStyles = new Array(div0.style, div1.style, div2.style)
}
function moveParagraphs() {
 for(var i=0; i<divStyles.length; ++i) {
  var x = Math.random()*400
  var y = Math.random()*400
  moveDivTo(i, x, y)
 }
}
function moveDivTo(i, x, y) {
 if(browser == "ie4") {
  divStyles[i].posLeft = x
  divStyles[i].posTop = y
 }else if(browser == "dom1") {
  divStyles[i].left = x
  divStyles[i].top = y
 }
}
function slideText(n) {
 divStyles[n].visibility = "visible"
 var max = (n+1)*100
 for(var i=0;i<max;++i) {
  setTimeout("moveDivTo("+n+","+i+","+max+")",500)
 }
}
function italicize() {
 divStyles[0].fontStyle = "italic"
 divStyles[1].fontStyle = "italic"
 divStyles[2].fontStyle = "italic"
}
function applyDHTML() {
 if(browser == "unknown") {
  alert("Sorry. Your browser does not provide sufficient DHTML support to run this example.")
  return
 }
 switch(state) {
  case 0:
   divStyles[0].fontSize = "x-small"
   divStyles[0].fontStyle = "italic"
   divStyles[1].fontSize = "medium"
   divStyles[1].fontVariant = "small-caps"
   divStyles[2].fontSize = "x-large"
   divStyles[2].fontFamily = "Courier"
   break
  case 1:
   divStyles[0].backgroundColor = "cyan"
   divStyles[0].color = "blue"
   divStyles[1].backgroundColor = "green"
   divStyles[1].color = "yellow"
   divStyles[2].backgroundColor = "orange"
   divStyles[2].color = "red"
   break
  case 2:
   moveDivTo(050300)
   moveDivTo(1100200)
   moveDivTo(2200100)
   break
  case 3:
   interval = setInterval("moveParagraphs()",750)
   break
  case 4:
   clearInterval(interval)
   moveDivTo(050100)
   moveDivTo(1150100)
   moveDivTo(2325100)
   break
  case 5:
   divStyles[0].zIndex = 100
   divStyles[0].width = 400
   divStyles[0].height = 300
   break
  case 6:
   divStyles[0].zIndex = 0
   divStyles[1].zIndex = 100
   divStyles[1].width = 400
   divStyles[1].height = 300
   break
  case 7:
   divStyles[1].zIndex = 1
   divStyles[2].zIndex = 100
   divStyles[2].width = 400
   divStyles[2].height = 300
   break
  case 8:
   for(var i=0;i<divStyles.length;++i) {
    divStyles[i].fontFamily = "Times"
    divStyles[i].fontSize = "xx-large"
    divStyles[i].fontStyle = "normal"
    divStyles[i].fontVariant = "normal"
   }
   moveDivTo(1150150)
   moveDivTo(2325200)
   break
  case 9:
   for(var i=0;i<divStyles.length;++i) {
    divStyles[i].color = "black"
    divStyles[i].backgroundColor = "white"
    divStyles[i].visibility = "hidden"
    moveDivTo(i, 0(i+1)*100)
   }
   divs[0].innerHTML = "That's"
   divs[1].innerHTML = "All"
   divs[2].innerHTML = "Folks!"
   setTimeout("slideText(0)",500)
   setTimeout("slideText(1)",1500)
   setTimeout("slideText(2)",2500)
   setTimeout("italicize()",5000)
   break
  case 10:
   window.location.reload()
   break
 }
 ++state
}
//--></SCRIPT>
</HEAD>
<BODY onload="initialize()">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Apply DHTML Style"
 onClick="applyDHTML()">
</FORM>
<DIV ID="d0" STYLE="position:absolute; top:50px">Sample Text 1</DIV>
<DIV ID="d1" STYLE="position:absolute; top:100px">Sample Text 2</DIV>
<DIV ID="d2" STYLE="position:absolute; top:150px">Sample Text 3</DIV>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» HTML Style