Solved

Animation with Words

Posted on 1999-01-08
35
689 Views
Last Modified: 2013-11-19
OK, I have a black page.  I want to scroll 15 words in random order, direction, color (white --> black) across the screen.  I need them to all be readable.  While all those are scroling, a word that is centered will start very small and gradualy expand to very large in the center.  after the animation is complete, at the bottom of the screen, the word [ ENTER ] appears.  a red bar (graphic or whatever) will fly from the left to right and stop when it reaches the right.  at the same time, a bar below the word will fly from right to left and stop at the left.  ewach bar is about 75% of the screen.  

Anyone interested?  :) (I will award points later)
0
Comment
Question by:MasseyM
  • 13
  • 12
  • 10
35 Comments
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276552
That is a lot of coding for an undetermined amount of points.
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276553
better?
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276554
Which browser(s)?
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276555
Both NS & IE 4.x is acceptable. If it works in below 4.x even better.  IF it doesn't work in a browser, I would like just the one centered word to appear.
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276556
I can do this in Netscape 4.x, but it will not work in IE (layers).  There may be someone out there that can make this happen cross-browser, but I only work with Netscape at work, and have lttile time to learn cross-browser techniques.  I don't know how much time I will have to work on it this weekend, and I am flying to DC for 2 weeks on Monday.  I will see what I can get done this weekend.  If one of the other experts wants to take this, more power to them.  Maybe someone can do this cross-browser.

Kurt
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276557
heh..word zooming is pretty ez.

all you need is a div that can hold the maximum size of text (this will slow things down a bit).  and the div should hold a table.

something like so:
<div id=Zoomer style='position:absolute;top:100;left:0;width:100%;height:240;z-index:100'>
<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>
<tr>
  <td align=center valign=middle>
  <span id=zoomtext style='font:1pt impact;color:maroon;display:none'>ZOOM ME!</span>
  </td>
</tr>
</table>
</div>

We are going to let html take care of the center positioning
(it's already built in, so why not.)

Now all you need is for your timer routine to change the text size (in CSS) until you get the desired size.

if (scale < 72)
{
  scale += 10;
  zoomtext.style.fontSize = scale;
  :
  //timer routine here
}

scrolling bar can be simulated with clipping.
if you have predefined divs already in place, you just need to resize the div. clipping to simulate scrolling / revealing.

put the red bar behind the zooming text.

<div id=redbar style='position:absolute;top:100px;left:0px;width:100%;height:240px;background-color:red;z-index:50;clip:rect(0 0 240 0)'></div>

i am not sure about rhe clip css, you might want to take a look at the syntax of that one since I hardly ever use it that much.

with the timer running,

all you need to do is increase the left clip ordinate from 0 to full screen width.  You could get the screen width ahead of time.

using body.clientWidth

Use the same technique for the other 2 bars, except clip it to the right side first and then decrease the left ordinate till 0.

All these are in IE4+ of course.

The hardest part will be the 15 random words scrolling around.
hmm. perhaps if you create a text sprite object in javacsript, this will not be that difficult.

the text sprite should have the following property (to keep track of itself and it's status)

it's own stylesheet info
(this should cover top,left, width, height, font, color)
the text itself
delta x and delta y to determine its scrolling speed.

and create a method to animate it

and on every tick of the timer, call each text sprite animate method. as many time as you want.  that should be simple enough.

There....all your answer.  all that is left is for you to create a coreographer (time sequence).  That shouldn't be too hard either.

although i didn't really give any specific script, that should give you a bunch of ideas on how to create your page.
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276558
Could I have complete code.  As for a "time sequence", I don't care if it plays EXACTLY the same each time.  I just want 15 word to "fly" across the screen while another word enlarges from the background.  when that is done, two bars fly from the side to encircle the word [ ENTER ]

:)
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276559
Here is a simple 3 text flying all over the screen, with the zooming text appearing at the same time.

I am sure you can expand it to fit your own need.  This will only work on IE however.

<html>
<head>
</head>
<body>

<div id=zoomer style='position:absolute;top:130px;left:0px;width:100%;height:100px'>
<table cellpadding=0 cellspacing=0 border=0 width=100% height=100% >
<tr>
  <td align=center valign=middle>
  <span id=zoomtext style='font:1pt impact;color:darkgreen'>www.me.com</span>
  </td>
</tr>
</table>
</div>

<div id=sprite1 style='position:absolute;top:0px;left:0px;width:200px;height:50px;font:24pt impact;color:maroon'>Style</div>
<div id=sprite2 style='position:absolute;top:240px;left:400px;width:200px;height:50px;font:italic 24pt garamond;color:darkblue'>Excellence</div>
<div id=sprite3 style='position:absolute;top:10px;left:120px;width:200px;height:50px;font:18pt verdana;color:silver'>Innovation</div>

<script>
swidth = document.body.clientWidth;
sheight = document.body.clientHeight;

function textSprite(tscreen,deltaX,deltaY)
{
  this.width = tscreen.style.posWidth;
  this.height = tscreen.style.posHeight;
  this.top = tscreen.style.posTop;
  this.left = tscreen.style.posLeft;
  this.dX = deltaX;
  this.dY = deltaY;
  this.screen = tscreen;

  //methods
  this.animate = fs_animate;
  this.moveTo = fs_moveto;
  this.refresh = fs_refresh;
}

function fs_moveto(left,top)
{
  this.top = top;            //move sprite to its new position
  this.left = left;
  this.refresh();            //update the screen  
}

function fs_refresh()
{
  this.screen.style.posTop = this.top;        //project sprite to its new
  this.screen.style.posLeft = this.left;      //position
}

function fs_animate()
{  
  //assuming bouncing off walls

  //if ((this.top <= 0) || ((this.top + this.height) >= sheight))
  //  this.dX = - this.dX;

  //if ((this.left <= 0) || ((this.left + this.width) >= swidth))
  //  this.dY = - this.dY;

  this.moveTo(this.left+this.dX,this.top+this.dY)
}

</script>


<script>
var arrTextSprites = new Array()

arrTextSprites[0] = new textSprite(sprite1,5,10)
arrTextSprites[1] = new textSprite(sprite2,-10,-3)
arrTextSprites[2] = new textSprite(sprite3,0,5)

var tcnt = 0;
var maxsize = 50;
var csize = 1;

function timertick_handler()
{
  for(var idx=0;idx < arrTextSprites.length; idx++)
  {
    arrTextSprites[idx].animate();
  }

  if (csize < maxsize)
  {
    csize = csize + 5;
    zoomtext.style.fontSize = csize;
  }
 
  tcnt++;
  window.status = 'TickCount = '+ tcnt;

  if (tcnt < 80)
    setTimeout("timertick_handler()",50)  //call self every 50 ms
}

//start timer handler
timertick_handler();
</script>
</body>

</html>
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276560
It is structure this way (script below the regular html)
because some of the quirky things that will happen if the script is placed in head area, such as..

you can't get document.body.clientWidth and clientHeight without doing onLoad event, I am doing it right there and then and IE just won't recognize document.body object because it's not created yet.

But hey, it works :)
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276561
PBall!  Looks VERY good except for two things.  1) The words scrol off the screen and make the browser expand (ie the scroll bar moves).  2) the words stay in the upper left quadrant of the screen..

Also, I need a NS version.
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276562
I only code IE, so ...

Yes, the browser expands when the text scroll off screen.  there is a way to stop this by changing the visibility style to hidden and moving them back to (0,0) when they are off screen.  Browser will still expand at certain point and then it will contract again.  Another way is ... display this in a controlled window (no scrollbars and unresizable - use window.open to open new window and use this script in that window.

as for everything stay in the upper left quadrant, the code is flexible enough for alteration.

all you need is to change the div id=sprite... itself.  set their top and left css property to somewhere else. and walla.

same with the zoomer.
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276563
Funny.  I have been working on this (NC4.x), and I am having difficulty with the zoom, but (almost) have the random words ready.  Will continue more tomorrow...

The words staying in the upper-left quadrant may be due to screen resolution - which is the biggest problem I am having.  I have been trying to integrate window.innerWidth, but have been unsuccessful thus far.

I'll work on it a little more tomorrow...

Kurt
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276564
Here.  Tell me what you think.  I found a cross-browser zoom text script that I plopped in for you:

<html>
<head>
<title>"Random" Word Movement</title>

 <script>
 /*############################################################################
 This script is made by bratta from www.bratta.com and can be used freely
 as long as this msg is intact. Visit www.bratta.com for more great scripts.
 ############################################################################
 If you want the text to appear differently on anothe place on the page
 or anything set that in the style tag of the zoom layer.

 Here are the variables you have to set:                                                                
 First the text: (it will stop and fade/change the colors on the last one)*/
         text=new Array('ZoomText')
         
 //set the number of text's
         var numText=1
         
 //Now the colors:
 //all you have to do is set the color you want to have in here:
 //(the first color will be the color that the text is when it zooms.)
         color=new Array('#660000','#FF0000')
         
 //set the number of colors:
         var numColors=2
         
 //set the size you want the zoom to end at:
         var endSize=80

 //Set the speed you want it to zoom in (in milliseconds)
         var Zspeed=250

 //Set the speed you want it too change colors in
         var Cspeed=200

 //Set font
         var font='impact'
         
 //do you want it to hide when its done? (true or false)
         var hide=false
         
 /*You shouldn't really have to set anything below this point
 ######################################################################
 ######################################################################
 ######################################################################*/
 var size=10
 var gonum=0
 /*Browsercheck and settings vars
 ######################################################################*/
 var ie, n;
 if (document.all) {
                 n=0
                 ie=1
                 zoomText='document.all.zoom.innerText=text[num]'
                 zoomSize='document.all.zoom.style.fontSize=size'
                 closeIt=""
                 fadeColor="document.all.zoom.style.color=color[num]"
         }
 if (document.layers) {
                 n=1;ie=0
                 zoomText=""
                 zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
                 closeIt="document.zoom.document.close()"
                 fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"
         }

 /*The functions for zooming text.
 ####################################################################*/
 function zoom(num,fn){
         if (size<endSize){
                 eval(zoomText)
                 eval(zoomSize)
                 eval(closeIt)
                 size+=5;
                 setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
         }else{
                 eval(fn);
         }
 }
 /*The functions for fading/changing colors on text
 ####################################################################*/
 function fadeIt(num){
         if (num<numColors){
                 eval(fadeColor)
                 eval(closeIt)
                 num+=1;
                 setTimeout("fadeIt("+num+")",Cspeed)
         }else{
                 hideIt()
         }
 }
 /*This is the function that hides the layer after the zoom/color change
 ####################################################################*/
 function hideIt(){
         if(hide){
                 if(ie)document.all.zoom.style.visibility="hidden"
                 if(n)document.layers.zoom.visibility="hidden"
         }
 }
 /*This is the functions that calls the right function...or something :}
 ####################################################################*/
 function init2(){
         if(ie){
                 document.all.zoom.style.color=color[0]
                 document.all.zoom.style.fontFamily=font
         }
         if(ie || n) go(0)      
 }
 function go(num){
         gonum+=1
         size=10
         if(num<numText){
                 zoom(num,'go('+gonum+')')
         }else{
                 fadeIt(0)
         }
 }
//####END ZOOM TEXT SECTION - BEGIN RANDOM TEXT#####

//The Rule method for moving layers:

function startSeq(SeqNumber) {
  Time[SeqNumber] = 0;
  SeqController(SeqNumber);
}

function stopSeq(SeqNumber){
   Time[SeqNumber] = Seq[SeqNumber].length;
}

function SeqController(SeqNumber) {
    if (Time[SeqNumber] <= Seq[SeqNumber].length - 1) {
      Time[SeqNumber]++;
        if (Seq[SeqNumber][Time[SeqNumber]] != null){
          eval(Seq[SeqNumber][Time[SeqNumber]]);
        }
        setTimeout('SeqController(' + SeqNumber + ')', 100);
    }
}

function init() {
  Time = new Array();
  Seq = new Array();  

Seq[0] = new Array();
Seq[0][15] = 'moveIt1();';
Seq[0][25] = 'moveIt2();';
Seq[0][35] = 'moveIt3();';
Seq[0][45] = 'moveIt4();';
Seq[0][55] = 'moveIt5();';
Seq[0][70] = 'moveIt6();';
Seq[0][80] = 'moveIt7();';
Seq[0][90] = 'moveIt8();';
Seq[0][100] = 'moveIt9();';
Seq[0][120] = 'moveIt10();';
Seq[0][130] = 'moveIt11();';
Seq[0][145] = 'moveIt12();';
Seq[0][160] = 'moveIt13();';
Seq[0][165] = 'init2();';
Seq[0][175] = 'moveIt14();';
Seq[0][185] = 'moveIt15();';
Seq[0][210] = 'lyr1_show();';

startSeq(0);
}

var totalTime, currTime;
var Time, Seq;

function slideLayer(lyr,xinc,yinc,inctime,xstop) {
 lyr.top += yinc
 lyr.left += xinc
 if (((xinc > 0) && (lyr.left < xstop)) ||
     ((xinc < 0) && (lyr.left > xstop))) {
      setTimeout('slideLayer(document.layers["'+lyr.name+'"],'+xinc+','+yinc+','+inctime+','+xstop+')',inctime)
     }
}

function moveIt1() {
        document.lyr2.visibility = "show"
        slideLayer(document.layers['lyr2'],-8,-8,20,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt2() {
        document.lyr3.visibility = "show"
        slideLayer(document.layers['lyr3'],-8,-8,60,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt3() {
        document.lyr4.visibility = "show"
        slideLayer(document.layers['lyr4'],-20,.001,70,-250);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt4() {
        document.lyr5.visibility = "show"
        slideLayer(document.layers['lyr5'],-20,.001,90,-250);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt5() {
        document.lyr6.visibility = "show"
        slideLayer(document.layers['lyr6'],-8,58,180,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt6() {
        document.lyr7.visibility = "show"
        slideLayer(document.layers['lyr7'],-8,-58,70,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt7() {
        document.lyr8.visibility = "show"
        slideLayer(document.layers['lyr8'],-18,88,350,10);
        }

function moveIt8() {
        document.lyr9.visibility = "show"
        slideLayer(document.layers['lyr9'],-18,88,250,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt9() {
        document.lyr10.visibility = "show"
        slideLayer(document.layers['lyr10'],-20,.001,90,-250);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt10() {
        document.lyr11.visibility = "show"
        slideLayer(document.layers['lyr11'],-20,.001,90,-250);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt11() {
        document.lyr12.visibility = "show"
        slideLayer(document.layers['lyr12'],-20,.001,120,-250);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt12() {
        document.lyr13.visibility = "show"
        slideLayer(document.layers['lyr13'],-8,58,380,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt13() {
        document.lyr14.visibility = "show"
        slideLayer(document.layers['lyr14'],-8,-58,70,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt14() {
        document.lyr15.visibility = "show"
        slideLayer(document.layers['lyr15'],-8,-8,5,10);//lyr,xinc,yinc,inctime,xstop
        }

function moveIt15() {
        document.lyr16.visibility = "show"
        slideLayer(document.layers['lyr16'],-20,.001,10,-250);//lyr,xinc,yinc,inctime,xstop
        }

function lyr1_show() {
        document.lyr1.visibility = "show"
}
</script>

</HEAD>
<BODY onLoad = "init()" bgcolor="black">

<layer  name="lyr1"
        left= 45%
        top= 70%
        z-index= 1
        visibility= hide
        clipwidth=400
        width=400>


<SPAN STYLE="position: absolute; font: 15pt impact; color: red">
<A HREF="enter.html">ENTER</A>
</SPAN>
</layer>

<layer  name="lyr2"
        left= 110%
        top= 110%
        z-index= 1
        visibility= hide
        clipwidth=400
        width=400>


<SPAN STYLE="font: 40pt impact; color: #FFFFFF">
Word1
</SPAN>
</layer>

<layer  name="lyr3"
        left= 1100
        top= 775
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>

<SPAN STYLE="font: 40pt impact; color: #FFFFFF">
Word2</SPAN>
</layer>


<layer  name="lyr4"
        left= 110%
        top= 35
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #FFFFFF">
Word3
</SPAN>
</layer>

<layer  name="lyr5"
        left= 800
        top= 135
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #CCCCCC">
Word4
</SPAN>
</layer>

<layer  name="lyr6"
        left= 800
        top= 235
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #CCCCCC">
Word5
</SPAN>
</layer>

<layer  name="lyr7"
        left=310
        top= 555
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>

<SPAN STYLE="font: 40pt impact; color: #CCCCCC">
Word6
</SPAN>
</layer>

<layer  name="lyr8"
        left= 335
        top= -15
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #C0C0C0">
Word7
</layer>

<layer  name="lyr9"
        left= 500
        top= -15
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>

<SPAN STYLE="font: 40pt impact; color: #C0C0C0">
Word8
</SPAN>
</layer>

<layer  name="lyr10"
        left= 600
        top= 375
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>

<SPAN STYLE="font: 40pt impact; color: #C0C0C0">
Word9
</SPAN>
</layer>

<layer  name="lyr11"
        left= 800
        top= 435
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>


<SPAN STYLE="font: 40pt impact; color: #999999">
Word10
</SPAN>
</layer>

<layer  name="lyr12"
        left= 675
        top= -5
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #666666">
Word11
</SPAN>
</layer>

<layer  name="lyr13"
        left=150
        top= -25
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>        

<SPAN STYLE="font: 40pt impact; color: #666666">
Word12
</SPAN>
</layer>

<layer  name="lyr14"
        left=510
        top= 555
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>        

<SPAN STYLE="font: 40pt impact; color: #333333">
Word13
</SPAN>
</layer>

<layer  name="lyr15"
        left= 1100
        top= 775
        z-index= 1
        visibility= hide
        clipwidth=590
        width=90>


<SPAN STYLE="font: 40pt impact; color: #333333">
Word14
</SPAN>
</layer>

<layer  name="lyr16"
        left= 110%
        top= 215
        z-index= 1
        visibility= hide
        clipwidth=500
        width=251>

<SPAN STYLE="font: 40pt impact; color: #333333">
Word15
</SPAN>
</layer>
<div id="zoom" align="center" style="position:absolute; top:25%"></div>
</body>
</html>
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276565
Just pretty well in Netscape, but I cannot get it to do anything in IE 4.x The words just sit there...

0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276566
That is what I said in an earlier post (NC 4 only because it uses layers).  I must have confused you when I wrote about the zoom text being cross-browser.  I figured you may not be able to use this, but I posted it anyway just in case.  I work in the USPS, and only develop for NC 4.x, therefore, my IE experience is limited.

Good Luck,

Kurt
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276567
No problem.  good script however.. Thanks.
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276568
This is supposed to be cross-browser.  I worked on it a little, but couldn't quite get it to work right.  You may want to see if you can use it:

 <HTML>
<HEAD>
<script language="JavaScript">
 <!--

 IE4 = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4;        
 NS4 = navigator.appName.substring(0,8) == "Netscape" && parseInt(navigator.appVersion) >= 4;
         
 // checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ...

 function checkBrowser(){
         if(IE4 || NS4){
                 return true;
         }
         return false;
 }

 // movableObj() -- Creates a new movable object

 function movableObj(startX, startY, endX, endY, delay, speed, refId){
         this.sX = startX; this.sY = startY;     this.eX = endX;
         this.eY = endY; this.de = delay; this.sp = speed;
         this.ref = refId;
         xL = endX - startX;
         yL = endY - startY;
         with (Math){
                 if(abs(xL) > abs(yL)){
                         this.xS = (xL > 0)?1:-1;
                         this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL);
                         this.howManySteps = abs(xL / speed);
                 } else if(abs(yL) > abs(xL)){
                         this.yS = (yL > 0)?1:-1;
                         this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL);
                         this.howManySteps = abs(yL / speed);
                 } else {
                         this.yS = (yL > 0)?1:-1;
                         this.xS = (xL > 0)?1:-1;
                         this.howManySteps = abs(xL / speed);
                 }
         }
         this.startMovement = startMovement;
 }

 // startMovement() -- starts the movement

 function startMovement(){
         if(checkBrowser()){
                 if(IE4){
                         ref = document.all(this.ref).style;
                 } else {
                         ref = document[this.ref];
                 }
                 doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps);
         }
 }

 // doDynamicMovement() -- does the Dynamic Movement

 function doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){
         if(Math.floor(hS - 1) != 0){
                 hS--;
                 curX += xS * speed;
                 curY += yS * speed;
                 ref.left = Math.round(curX);
                 ref.top = Math.round(curY);
                 setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp);
         } else {
                 setPos(eX, eY, ref);    
         }
 }

 // setPos() -- sets the end position accurately when doDynamicMovement has done its job

 function setPos(x, y, ref){
         ref.left = x;
         ref.top = y;
 }
//******************
//don't change
function startSeq(SeqNumber) {
  Time[SeqNumber] = 0;
  SeqController(SeqNumber);
}

//dont't change
function stopSeq(SeqNumber){
   Time[SeqNumber] = Seq[SeqNumber].length;
}

//don't change
function SeqController(SeqNumber) {
    if (Time[SeqNumber] <= Seq[SeqNumber].length - 1) {
      Time[SeqNumber]++;
        if (Seq[SeqNumber][Time[SeqNumber]] != null){
          eval(Seq[SeqNumber][Time[SeqNumber]]);
        }
        setTimeout('SeqController(' + SeqNumber + ')', 100);
    }
}

//don't change
function init() {
  Time = new Array();
  Seq = new Array();  

Seq[0] = new Array();
Seq[0][10] = 'dynaText1.startMovement();';
Seq[0][40] = 'dynaText2.startMovement();';

//don't change
startSeq(0);
}

var totalTime, currTime;
var Time, Seq;
//*********************


 // -->

 </script>      

 <script language="JavaScript">

 <!--

 // Here we define the movable object
 dynaText1 = new movableObj(-800,550,814,550,1,30,"div1");//startX, startY, endX, endY, //delay, speed, refId
 dynaText2 = new movableObj(800,550,10,550,2,30,"div2");


 // -->

 </script>

 </HEAD>

<BODY BGCOLOR="#ffffff" link="#CC0033" vlink="#333399" alink="#FF0000" onLoad = "init()">

 
<div id="div1" style="position: absolute; left: -110%; top: 550; width: 300; font-family: Verdana, Arial; font-size: 20pt">Word 1</div>  

<div id="div2" style="position: absolute; left: 110%; top: 550; width: 300; font-family: Verdana, Arial; font-size: 20pt">Word 2</div>

 </BODY>
 </HTML>

Kurt
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 6

Expert Comment

by:PBall
ID: 1276569
Heh, I know bratta (sorta).  he hangs out in efnet #asp channel sometimes.  I think he got his techniques from the html guru site which is pretty much the best DHTML (cross browser) site out there in my opinion  - what a tour-de-force :) .

See http://www.htmlguru.com

0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276570
Yeah, I've been there a few times (htmlguru) and I agree with your statement.  I found Bratta's cross-browser zoom from a new place I found called d e v h e a d (at least it is new to me).  I had never heard of him until yesterday.  I need a different job so that I can learn both browsers - I simply don't have the time to learn IE otherwise.  OR, Gates could give in to the superior browser and cooperate ;-)

Kurt
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276571
Heh, stopped by developer.com yesterday. they had this contest to create a cross-browser (4+) DHTML that can animate an animate all around the borders of the browser's client window.

So I attemped my first x-browser DHTML thing hehe.
What I found out is IE DHTML is much much easier to do than Netscape's.

For example:
you can't move the IMG tag by itself, it have to be enclosed in its own layer. UGH.  you can do this in IE

IE has a much more easier control over objects in the page (lotsa shortcuts way to refer to an object).

in IE if you have an IMG tag inside another DIV, if the IMG itself has an ID tag attach to it, it can be referred to directly as img_ID.style.whatever.  while in Netscape you have to do it the lonngggg way... document.layers_name.document.img_name.whatever...

Yikes.

Netscape is not superior vs IE (imo).  IE gives you the easier scripting options and pack more stuffs in them (with dynamic binding, etc.)  Anything that you can do in Netscape can be done in IE and it does more.  Although it might be lacking in the x-platform scheme, but when it comes to Windows platform, IE is king right now :).  The correct wish is...now if they can only done this thing right and make it less prone to bugs!!!! :)

0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276572
AMEN!
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276573
Hehe, that
function movableObj(startX, startY, endX, endY, delay, speed, refId)

of yours look like a brenseham's line algo :)

0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1276574
I couldn't remember where I picked it up at.  Just looking at the code told me it was cross-browser.  It may be the same guy.
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276575
OK Kids, this is what I have so far.  It works PERFECTLY in IE 4.x.  It uses a lot of what PBall already wrote. I need it to work in NS.  the stuf in <% %> tags are ASP commands for those who didn't know.

I can use a separate script for NS if needed.  Please help.  

<% Set BT = Server.CreateObject("MSWC.BrowserType")
BType = BT.browser
Vnum  = BT.version
%>
<BODY BGCOLOR="BLACK" <% If BType="IE" then %>onLoad="javascript:scaleWelcome();" <%Else%>onLoad="javascript:growline();" <%End If%>LINK="#555555" VLINK="#555555" scroll=no>
<CENTER>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER=0>
      <TR>
            <TD HEIGHT="1" ALIGN="CENTER"><IMG ID=TCLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="CENTER" BORDER=0></TD>
      </TR>
      <TR HEIGHT="90%">
            <TD HEIGHT="90%" ALIGN="CENTER"><DIV ID="welcomeDiv"><SPAN CLASS="s10"><FONT COLOR="#555555" SIZE=+5>M.R.Q.</FONT></SPAN></DIV></TD>
      </TR>
      <TR>
            <TD HEIGHT="1"><IMG ID=TopLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="RIGHT" BORDER=0></TD>
      </TR>
      <TR>
            <TD HEIGHT="25" ALIGN="CENTER"><DIV ID=Enter><FONT COLOR="#55555">[ <A HREF="main.asp">ENTER</A> ]</FONT></DIV></TD>
      </TR>
      <TR>
            <TD HEIGHT="1"><IMG ID=BottomLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="LEFT" BORDER=0></TD>
      </TR>

</TABLE>
</CENTER>
<% If BType = "IE" then %>
<div id=sprite1 style='position:absolute;top:0px;left:0px;font:24pt impact;color:gray'>Style</div>
<div id=sprite2 style='position:absolute;top:640px;left:480px;font:italic 24pt garamond;color:silver'>Excellence</div>
<div id=sprite3 style='position:absolute;top:10px;left:120px;font:18pt verdana;color:white'>Quality</div>
<div id=sprite4 style='position:absolute;top:150px;left:120px;font:12pt impact;color:antiquewhite'>Determination</div>

<div id=sprite5 style='position:absolute;top:640px;left:480px;font:18pt verdana;color:darkgray'>Innovation</div>
<div id=sprite6 style='position:absolute;top:640px;left:480px;font:18pt verdana;color:#555555'>Loyalty</div>
<div id=sprite7 style='position:absolute;top:640px;left:0px;font:18pt verdana;color:lightgray'>Synergy</div>
<% End If %>

<script language="javascript"><!--
var swidth = document.body.clientWidth;
var wwidth = swidth * .75
var sheight = document.body.clientHeight;
var lcnt = 0;

function growline()      {
      if (lcnt < wwidth ) {
      lcnt = lcnt + 5;
      this.TopLine.width = lcnt;
        this.BottomLine.width = lcnt;
        this.TCLine.width = lcnt;
      setTimeout('growline();',.5);
      }
      if (lcnt > wwidth-10) {
            if (lcnt < swidth - 50) {
                  lcnt = lcnt + 5;
                    this.TCLine.width = lcnt;
                  setTimeout('growline();',.5);
            }
      }
}
//-->
</script>

<SCRIPT LANGUAGE="JavaScript"><!--

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function layerWrite(id,nestref,text) {
      if (ns4) {
            if (nestref) var lyr = eval('document.'=nestref+'.document.'+id+'.document')
            else var lyr = document.layers[id].document
            lyr.open()
            lyr.write(text)
            lyr.close()
      }
      else if (ie4) document.all[id].innerHTML = text
}

var size = 10
var xpos = 0

function scaleWelcome() {
      if (size <100) {
            size++
            layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'"><FONT COLOR="#555555"><B>M R Q&nbsp;</B></FONT></SPAN>')
            setTimeout('scaleWelcome()',40.5)
      }
      if (size >= 100) {
            layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'"><FONT COLOR="#555555"><B>M.R&nbsp;Q&nbsp;</B></FONT>')
            layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'"><FONT COLOR="#555555"><B>M.R.Q&nbsp;</B></FONT>')
            layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'"><FONT COLOR="#555555"><B>M.R.Q.</B></FONT>')
            growline();
      }
}

var sizestr = '<STYLE TYPE="text/css">\n'
for (var i=10;i<=100;i++) sizestr += '.s'+i+' {font-size:'+i+'pt;\n'+'font-color:#555555}\n'
sizestr += '</STYLE>'
document.writeln(sizestr)

//-->
</SCRIPT>

<script>
swidth = document.body.clientWidth;
sheight = document.body.clientHeight;

function textSprite(tscreen,deltaX,deltaY)
{
  this.width = tscreen.style.posWidth;
  this.height = tscreen.style.posHeight;
  this.top = tscreen.style.posTop;
  this.left = tscreen.style.posLeft;
  this.color = deltaX;
  this.dX = deltaX;
  this.dY = deltaY;
  this.screen = tscreen;

  //methods
  this.animate = fs_animate;
  this.moveTo = fs_moveto;
  this.refresh = fs_refresh;
}

function fs_moveto(left,top)
{
  this.top = top;            //move sprite to its new position
  this.left = left;
  this.refresh();            //update the screen  
}

function fs_refresh()
{
  this.screen.style.posTop = this.top;        //project sprite to its new
  this.screen.style.posLeft = this.left;      //position
}

function fs_animate()
{  
  this.moveTo(this.left+this.dX,this.top+this.dY)
}

</script>


<script>
var arrTextSprites = new Array()

//arrTextSprites[2] = new textSprite(sprite3,13,0)
//arrTextSprites[3] = new textSprite(sprite4,8,0)
//arrTextSprites[4] = new textSprite(sprite5,14,0)
//arrTextSprites[5] = new textSprite(sprite6,10,0)
//arrTextSprites[6] = new textSprite(sprite7,11,0)

arrTextSprites[0] = new textSprite(sprite1,6,6)
arrTextSprites[1] = new textSprite(sprite2,2,-5.5)
arrTextSprites[2] = new textSprite(sprite3,10,4)
arrTextSprites[3] = new textSprite(sprite4,8,-2)
arrTextSprites[4] = new textSprite(sprite5,-5,-4)
arrTextSprites[5] = new textSprite(sprite6,-8,-10)
arrTextSprites[6] = new textSprite(sprite7,5,-8)


var tcnt = 0;
var maxsize = 50;
var csize = 1;

function timertick_handler()
{
  for(var idx=0;idx < arrTextSprites.length; idx++)
  {
    arrTextSprites[idx].animate();
  }

  if (csize < maxsize)
  {
    csize = csize + 5;
  }
 
  tcnt++;

  if (tcnt < 180)
    setTimeout("timertick_handler()",2)

}

timertick_handler();
//-->
</script>
</body>

</html>

0
 
LVL 6

Expert Comment

by:PBall
ID: 1276576
Updated this method:

function fs_refresh()
{
  if (ie4)
  {
    this.screen.style.posTop = this.top;        //project sprite to its new
    this.screen.style.posLeft = this.left;      //position
  }
  if (ns4)
  {
    this.screen.top = this.top;
    this.screen.left = this.left;
  }
}

change the constructor too:

function textSprite(tscreen,deltaX,deltaY)
{  
  if (ie4)
  {
    this.screen = eval(tscreen);
    this.width = this.screen.style.posWidth;
    this.height = this.screen.style.posHeight;
    this.top = this.screen.style.posTop;
    this.left = this.screen.style.posLeft;
  }

  if (ns4)
  {
    this.screen = document.layers[tscreen];
    this.width = this.screen.width;
    this.height = this.screen.height;
    this.top = this.screen.top;
    this.left = this.screen.left;
  }
 
  this.dX = deltaX;
  this.dY = deltaY;
 
  //methods
  this.animate = fs_animate;
  this.moveTo = fs_moveto;
  this.refresh = fs_refresh;
}

change the object construction to:
arrTextSprites[0] = new textSprite("sprite1",6,6)
instead of
arrTextSprites[0] = new textSprite(sprite1,6,6)
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276577
ugh..looks like it is still not working on NS.

I cleaned up your code a bit, moved the scaleWelcome function call to timertick_handler instead of doing its own timer routine.

So far, I got the flying texts to work on Netscape also.
The zooming text is the !@(*!@(* hehehe.

We might have to restructure that part completely.  for some reason Netscape just refuses to recognize welcomeDiv as a layer.  wonder why...

anyhow, following is the modified code with Netscape part of the zooming text commented out, same with the growing lines.

<HTML>
<HEAD>

<script language="javascript">
<!--

var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false

var swidth = 800;
var sheight = 600;
var wwidth = 800;
var lcnt = 0;

var size = 10;
var xpos = 0;

var tcnt = 0;
var maxsize = 100;
var csize = 1;

function growline() {
//  if (lcnt < wwidth ) {
//    lcnt = lcnt + 5;
//    this.TopLine.width = lcnt;
//    this.BottomLine.width = lcnt;
//    this.TCLine.width = lcnt;
//    setTimeout('growline();',.5);
//  }
//  if (lcnt > wwidth-10) {
//    if (lcnt < swidth - 50) {
//      lcnt = lcnt + 5;
//      this.TCLine.width = lcnt;
//      setTimeout('growline();',.5);
//    }
//  }
}

function layerWrite(id,nestref,text) {

  if (ie4) document.all[id].innerHTML = text;

  if (ns4) {
  //  if (nestref)
  //     var lyr = eval('document.'+nestref+'.document.'+id+'.document');
  //  else
  //     var lyr = document.layers[id].document;
  //  lyr.open()
  //  lyr.write(text)
  //  lyr.close()
  }

}

function scaleWelcome() {
  if (size < maxsize) {
    size += 3;
    layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+size+'"><FONT COLOR="#555555"><B>M R Q&nbsp;</B></FONT></SPAN>')
  }
  else
  {
    size++;

    if (size == (maxsize+5))
      layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+maxsize+'"><FONT COLOR="#555555"><B>M.R&nbsp;Q&nbsp;</B></FONT>');
    if (size == (maxsize+10))
      layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+maxsize+'"><FONT COLOR="#555555"><B>M.R.Q&nbsp;</B></FONT>');
    if (size == (maxsize+15))
      layerWrite('welcomeDiv',null,'<SPAN CLASS="s'+maxsize+'"><FONT COLOR="#555555"><B>M.R.Q.</B></FONT>');
  }
}

function textSprite(tscreen,deltaX,deltaY)
{
  if (ie4)
  {
    this.screen = eval(tscreen);
    this.width = this.screen.style.posWidth;
    this.height = this.screen.style.posHeight;
    this.top = this.screen.style.posTop;
    this.left = this.screen.style.posLeft;
  }

  if (ns4)
  {
    this.screen = document.layers[tscreen];
    this.width = this.screen.width;
    this.height = this.screen.height;
    this.top = this.screen.top;
    this.left = this.screen.left;
  }

  this.dX = deltaX;
  this.dY = deltaY;

  //methods
  this.animate = fs_animate;
  this.moveTo = fs_moveto;
  this.refresh = fs_refresh;
}
 
function fs_moveto(left,top)
{
this.top = top; //move sprite to its new position
this.left = left;
this.refresh(); //update the screen
}

function fs_refresh()
{
  if (ie4)
  {
    this.screen.style.posTop = this.top; //project sprite to its new
    this.screen.style.posLeft = this.left; //position
  }

  if (ns4)
  {
    this.screen.top = this.top;
    this.screen.left = this.left;
  }
}

function fs_animate()
{
  this.moveTo(this.left+this.dX,this.top+this.dY)
}

var arrTextSprites = new Array()

function docInit()
{
  var swidth = (ie4) ? document.body.clientWidth : innerWidth;
  var sheight = (ie4) ? document.body.clientHeight : innerHeight;
  var wwidth = swidth * .75

  arrTextSprites[0] = new textSprite("sprite1",6,6)
  arrTextSprites[1] = new textSprite("sprite2",2,-5)
  arrTextSprites[2] = new textSprite("sprite3",10,4)
  arrTextSprites[3] = new textSprite("sprite4",8,-2)
  arrTextSprites[4] = new textSprite("sprite5",-5,-4)
  arrTextSprites[5] = new textSprite("sprite6",-8,-10)
  arrTextSprites[6] = new textSprite("sprite7",5,-8)

  timertick_handler();
}

function timertick_handler()
{
  for(var idx=0;idx < arrTextSprites.length; idx++)
  {
    arrTextSprites[idx].animate();
  }

  if (size <= maxsize+15) scaleWelcome();

  tcnt++;
  window.status = tcnt;

  if (tcnt < 200)

  setTimeout("timertick_handler()",50)
}

//-->
</script>

</HEAD>

<BODY BGCOLOR="BLACK" onLoad="docInit()" LINK="#555555" VLINK="#555555" scroll=no>
<CENTER>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER=0>
<TR>
<TD HEIGHT="1" ALIGN="CENTER"><IMG ID=TCLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="CENTER" BORDER=0></TD>
</TR>
<TR HEIGHT="90%">
<TD HEIGHT="90%" ALIGN="CENTER"><DIV ID="welcomeDiv"><SPAN CLASS="s10"><FONT COLOR="#555555" SIZE=+5>M.R.Q.</FONT></SPAN></DIV></TD>
</TR>
<TR>
<TD HEIGHT="1"><IMG ID=TopLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="RIGHT" BORDER=0></TD>
</TR>
<TR>
<TD HEIGHT="25" ALIGN="CENTER"><DIV ID=Enter><FONT COLOR="#55555">[ <A HREF="main.asp">ENTER</A> ]</FONT></DIV></TD>
</TR>
<TR>
<TD HEIGHT="1"><IMG ID=BottomLine SRC="/graphics/redline.gif" HEIGHT="1" WIDTH="0" ALIGN="LEFT" BORDER=0></TD>
</TR>
</TABLE>
</CENTER>

<div id=sprite1 style='position:absolute;top:0px;left:0px;font:24pt impact;color:gray'>Style</div>
<div id=sprite2 style='position:absolute;top:640px;left:480px;font:italic 24pt garamond;color:silver'>Excellence</div>
<div id=sprite3 style='position:absolute;top:10px;left:120px;font:18pt verdana;color:white'>Quality</div>
<div id=sprite4 style='position:absolute;top:150px;left:120px;font:12pt impact;color:antiquewhite'>Determination</div>
<div id=sprite5 style='position:absolute;top:640px;left:480px;font:18pt verdana;color:darkgray'>Innovation</div>
<div id=sprite6 style='position:absolute;top:640px;left:480px;font:18pt verdana;color:#555555'>Loyalty</div>
<div id=sprite7 style='position:absolute;top:640px;left:0px;font:18pt verdana;color:lightgray'>Synergy</div>

<script>
<!--
var sizestr = '<STYLE TYPE="text/css">\n'
for (var i=10;i<=100;i++) sizestr += '.s'+i+' {font-size:'+i+'pt;\n'+'font-color:#555555}\n'
sizestr += '</STYLE>'
document.writeln(sizestr)
//-->
</script>

</body>

</html>

0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276578
PBall, the lines don't grow in IE  and the MRQ displays too fast.  I think I can fix that though.  The lines don't grow in NS either.  I am not too worried about the MRQ expanding in NS I guess... If you can get the bars to grow in both versions, you can have the points.

Thanks for your diligence man!

0
 
LVL 6

Expert Comment

by:PBall
ID: 1276579
I'll recheck the line growth code, I did some more modifications (mostly optimization) for the text sprite object.  I commented out the line growth and the NS portion of the zooming text to get the flying texts working on both.  Also added some routines to check when text sprite went out of bound (off screen) and place them "above" the normal viewing area, this way, the window size will stay the same (at least on IE) and the text is hidden once it's out of bound.

the MRQ zooming fast because I increase its zoom factor to 3 instead of 1, and it should slow down to 1 when doing the dots.

Bar growing hehehe..I'll play with it :)

0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276580
I really like that "dot" thing you did.. It looks good!!  Thanks for sticking with this...

Obviously, you can tell that I know nothing about Javascript... I just piece together what I know and hope for the best :)
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276581
Hehe, maybe you should repost this question..it's getting too long because of the length of code in it :)

I have the optimized version at work...shhh..don't tell my boss hehehe. (damn experts-exchange is too addictive hehe).

I'll post it on Monday.
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276582
you can send it to me at masseym@javanet.com if you like.
0
 
LVL 6

Expert Comment

by:PBall
ID: 1276583
Here is the missing expanding bar thingy.  Not sure if this is the kind of things that you want.

Basically the there are 2 divs one that goes from left to right and the other from right to left.  both are of the same size.  the illusion is built using tables inside the divs.

Take a look:

<html>
<head>
<style>

#back0 {
  position:absolute;
  top:15%;
  left:0px;
  width:100%;
  height:70%;
  clip: rect(0 0 100% 0);
}

#back1 {
  position:absolute;
  top:15%;
  left:0px;
  width:100%;
  height:70%;
  clip: rect(0 0 100% 0);
}

</style>
<script>
var ie = (document.all) ? 1:0;
var ns = (document.layers) ? 1:0;

var b0rp = 0;
var b0ac = -1;

var b1rp = -1;
var b1ac = 1;

var swidth = 0;

function grow_back0()
{
  if (b0rp > 0)
  {
    b0rp -= b0ac;
    b0ac += 3;
 
    if (ie) back0.style.clip = "rect(0 "+swidth+" 100% "+ b0rp +")";
    if (ns) document.layers["back0"].clip.left = b0rp;
  }
  else
  {
     b0rp = 0;
    if (ie)  back0.style.clip = "rect(0 "+swidth+" 100% "+ b0rp +")";
    if (ns) document.layers["back0"].clip.left = b0rp;
  }
}

function grow_back1()
{
  if (b1rp < swidth)
  {
    b1rp += b1ac;
    b1ac += 3;
    if (ie) back1.style.clip = "rect(0 "+b1rp+" 100% 0)";
    if (ns) document.layers["back1"].clip.right = b1rp;
  }
  else
  {
     b1rp = swidth;
     if (ie) back1.style.clip = "rect(0 "+b1rp+" 100% 0)";
     if (ns) document.layers["back1"].clip.right = b1rp;
  }
}

function timertick_handler(tick)
{
  grow_back0();
  grow_back1();
 
  setTimeout("timertick_handler(50)",50);
}

function docInit()
{
  if (ie) swidth = document.body.clientWidth;
  if (ns) swidth = innerWidth;

  b0rp = swidth+1;

  if (ie)
  {
    back0.style.clip = "rect(0 "+b0rp+" 100% "+b0rp+")"
  }

  if (ns)
  {
    document.layers["back0"].clip.left = b0rp;
    document.layers["back0"].clip.right = b0rp;
  }

  timertick_handler(50);
}
</script>
</head>
<body onLoad='docInit()' style='margin:0px 0px 0px 0px;padding:0px 0px 0px 0px'>
<div id=back1>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
<tr>
  <td height=15%>&nbsp;</td>
</tr>
<tr>
  <td height=70% bgcolor=maroon>&nbsp;</td>
</tr>
<tr>
  <td height=15%>&nbsp;</td>
</tr>
</table>
</div>
<div id=back0>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
<tr>
  <td height=15% bgcolor=blue>&nbsp;</td>
</tr>
<tr>
  <td height=70%>&nbsp;</td>
</tr>
<tr>
  <td height=15% bgcolor=blue>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

It work on both netscape and ie (because everyting is relative - using %, hmm..ie looks nice and clean, netscape however...., but close enough).


0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276584
PBall, post as answer...
 You have helped me the most.

0
 
LVL 6

Accepted Solution

by:
PBall earned 400 total points
ID: 1276585
Claiming point!! :)
0
 
LVL 10

Author Comment

by:MasseyM
ID: 1276586
Thanks PBall
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now