Trouble converting STYLE tags to CLASS tags using an external CSS

[Michellevt]

Hi

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=\"positio n:absolute;\" tag with class=\"posiAbs \" where in the external css ".posiAbs {position:absol ute;} 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

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 PAGE:

[html]
<html>
<head>
<title>
</title>
</head>
<body bgcolor="#8080F F">
<div id="disspageie" >
<div id="spageie">
</div>
</div>
<script language="javas cript">
document.write( "<script language=\"java script\" src=\"navigatio nBarScrollerJav aScript.js\"></scr"+"ipt>");
</script>
</body>
</html>

[/html]

[mrhoo]

Well, at least it will not work in a browser that is not IE, which seems to be the idea.

Any style assignment you make in a class in a stylesheet will work exactly like an inline style, but classes are trumped by inline styles, by more specific selectors in the cascade, and by any user stylesheet declarations.

You could try making your classes more specific, targetting element tags as well as classnames, but really specific classes could be set on id selectors.

[drhowarddrfine]

I'm pretty sure the issue is properly inserting the styling using javascript, so this is a javascript question and I'm sending it there.

btw, JavaScript is one word, not two, and totally unrelated to Java.

[acoder]

I am working on a project (for college)...
NOTES: This script only has to be compatible with Internet Explorer

A bit off-topic, but is that what they're teaching you?