I am working on a project (for college) and wondered if anyone can help me with my problem. In the project we are not allowed to make use of any "style" attributes but "class" attributes instead. The following is the java script that i am using and i am having trouble in using a class instead of a style tag because simply replacing the style=\"position:absolute;\" tag with class=\"posiAbs\" where in the external css ".posiAbs {position:absolute;} doesn't work. I am very new to this stuff so if anyone has some advice I would really appreciate it.
NOTES: This script only has to be compatible with Internet Explorer
JAVA SCRIPT
Expand|Select|Wrap|Line Numbers
- var titlea = new Array();
- var texta = new Array();
- var heightarr = new Array();
- titlea[0] = "<img src=\"doggie3.jpg\"> Dog Fact #1";
- texta[0] = "It is a myth that dogs are color blind. They can actually see in color, just not as vividly as humans. It is akin to our vision at dusk.";
- titlea[1] = "<img src=\"doggie3.jpg\"> Dog Fact #2";
- texta[1] = "Dogs DO have better low-light vision than humans because of a special light-reflecting layer behind their retinas ";
- titlea[2] = "<img src=\"doggie3.jpg\"> Dog Fact #3";
- texta[2] = " A German Shepherd guide dog led her blind companion the entire 2100 mile Applachian Trail ";
- titlea[3] = "<img src=\"doggie3.jpg\"> Dog Fact #4";
- texta[3] = "If never spayed or neutered, a female dog, her mate, and their puppies could product over 66,000 dogs in 6 years! ";
- var mc=4;
- var inoout=false;
- var tmpv;
- tmpv=180-8-8-2*parseInt(1);
- var psy = new Array();
- divtextb ="<div id=d";divtextb2 ="<div id=dz";divtev1=" onmouseover=\"pauseScroller(";divtev2=")\" onmouseout =\"restime(";divtev3=")\" ";divtev4="";divtexts = " style=\"position:absolute;visibility:hidden;width:"+tmpv+"; COLOR: #000000; left:0; top:0; FONT-FAMILY: MS Sans Serif,arial,helvetica; FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-WEIGHT: normal; TEXT-DECORATION: none; margin:0px; overflow-x:hidden; LINE-HEIGHT: 12pt; text-align:left;padding:0px; cursor:'default';\">";ie6span= " style=\"position:relative; COLOR: #5700AE; width:"+tmpv+"; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 11pt; FONT-STYLE: normal; FONT-WEIGHT: bold; TEXT-DECORATION: none; LINE-HEIGHT: 14pt; text-align:left;padding:0px;\"";uzun="<div id=\"enuzun\" style=\"position:absolute;\">";
- uzun2="<div id=\"enuzun2\" style=\"position:absolute;left:0;top:0;\">";
- var thetop=0;
- var toplay=0;
- function pauseScroller(gnum,gnum5) {
- inoout=true;
- objd=eval("d"+gnum);
- objd2=eval("hgd"+gnum);
- window.status="The Coolest Dog Facts in Town!!!!! :-)";
- }
- function restime(gnum2,gnum5) {
- inoout=false;
- if(gnum5==1) {
- objd=eval("dz"+gnum2);
- objd2=eval("hgdz"+gnum2);
- } else {
- objd=eval("d"+gnum2);
- objd2=eval("hgd"+gnum2);
- }
- objd.style.color="#000000";
- objd2.style.color="#5700AE";
- window.status="";
- }
- function dotrans() {
- if(inoout==false) {
- theTop--;
- if(theTop<(-1*toplay)) {
- theTop=0;
- enuzun2.style.pixelTop=400;
- }
- enuzun.style.pixelTop=theTop;
- if((theTop+toplay)<400) {
- enuzun2.style.pixelTop=theTop+toplay;
- }
- }
- if(psy[(theTop*(-1))+4]==3) {
- setTimeout('dotrans()',3000+35);
- } else {
- setTimeout('dotrans()',35);
- }
- }
- function scroller2() {
- for(i=0;i<mc;i++) {
- objd=eval("d"+i);objd2=eval("dz"+i);
- if((parseInt(objd.offsetHeight)<=0)||(parseInt(objd2.offsetHeight)<=0)) {
- setTimeout('scroller2()',1000);return;
- }
- }
- i=0;
- for(i=0;i<mc;i++) {
- objd=eval("d"+i);
- heightarr[i]=parseInt(objd.offsetHeight);
- }
- toplay=4;
- for(i=0;i<mc;i++) {
- objd=eval("d"+i);objd2=eval("dz"+i);
- objd.style.visibility="visible";
- objd2.style.visibility="visible";
- objd.style.pixelTop=toplay;
- objd2.style.pixelTop=toplay;
- psy[toplay]=3;
- toplay=toplay+heightarr[i]+10;
- }
- enuzun.style.left=8+"px";
- enuzun.style.height=toplay+"px";
- enuzun.style.width=tmpv+"px";
- enuzun.style.top=400+"px";
- enuzun2.style.left=8+"px";
- enuzun2.style.height=toplay+"px";
- enuzun2.style.width=tmpv+"px";
- enuzun2.style.top=400+"px";
- theTop=400;
- dotrans();
- }
- function scroller() {
- i=0;
- innertxt=""+uzun;
- for(i=0;i<mc;i++) {
- innertxt=innertxt+""+divtextb+""+i+""+divtev1+i+",0"+divtev2+i+",0"+divtev3+i+divtev4+divtexts+"<span id=\"hgd"+i+"\""+ie6span+">"+titlea[i]+"</span><br>"+texta[i]+"</div>";
- }
- innertxt=innertxt+"</div>";
- innertxt=""+innertxt+uzun2;
- for(i=0;i<mc;i++) {
- innertxt=innertxt+""+divtextb2+""+i+""+divtev1+i+",1"+divtev2+i+",1"+divtev3+i+divtev4+divtexts+"<span id=\"hgdz"+i+"\""+ie6span+">"+titlea[i]+"</span><br>"+texta[i]+"</div>";
- }
- innertxt=innertxt+"</div>";spageie.innerHTML=""+innertxt;setTimeout('scroller2()',500);
- }
- window.onload=scroller;
[html]
<html>
<head>
<title>
</title>
</head>
<body bgcolor="#8080FF">
<div id="disspageie">
<div id="spageie">
</div>
</div>
<script language="javascript">
document.write("<script language=\"javascript\" src=\"navigationBarScrollerJavaScript.js\"></scr"+"ipt>");
</script>
</body>
</html>
[/html]