473,327 Members | 2,074 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Trouble converting STYLE tags to CLASS tags using an external CSS

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=\"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
  1. var titlea = new Array();
  2. var texta = new Array();
  3. var heightarr = new Array();
  4.  
  5. titlea[0] = "<img src=\"doggie3.jpg\"> Dog Fact #1";
  6. 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.";
  7.  
  8. titlea[1] = "<img src=\"doggie3.jpg\"> Dog Fact #2";
  9. texta[1] = "Dogs DO have better low-light vision than humans because of a special light-reflecting layer behind their retinas ";
  10.  
  11. titlea[2] = "<img src=\"doggie3.jpg\"> Dog Fact #3";
  12. texta[2] = " A German Shepherd guide dog led her blind companion the entire 2100 mile Applachian Trail ";
  13.  
  14. titlea[3] = "<img src=\"doggie3.jpg\"> Dog Fact #4";
  15. texta[3] = "If never spayed or neutered, a female dog, her mate, and their puppies could product over 66,000 dogs in 6 years! ";
  16.  
  17. var mc=4;
  18.  
  19. var inoout=false;
  20. var tmpv;
  21. tmpv=180-8-8-2*parseInt(1);
  22. var psy = new Array();
  23. 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;\">";
  24. uzun2="<div id=\"enuzun2\" style=\"position:absolute;left:0;top:0;\">";
  25. var thetop=0;
  26. var toplay=0;
  27.  
  28. function pauseScroller(gnum,gnum5) {
  29.     inoout=true;
  30.     objd=eval("d"+gnum);
  31.     objd2=eval("hgd"+gnum);
  32.     window.status="The Coolest Dog Facts in Town!!!!! :-)";
  33. }
  34.  
  35. function restime(gnum2,gnum5) {
  36.     inoout=false;
  37.     if(gnum5==1) {
  38.         objd=eval("dz"+gnum2);
  39.         objd2=eval("hgdz"+gnum2);
  40.     } else {
  41.         objd=eval("d"+gnum2);
  42.         objd2=eval("hgd"+gnum2);
  43.     }
  44.     objd.style.color="#000000";
  45.     objd2.style.color="#5700AE";
  46.     window.status="";
  47. }
  48.  
  49. function dotrans() {
  50.     if(inoout==false) {
  51.         theTop--;
  52.         if(theTop<(-1*toplay)) {
  53.             theTop=0;
  54.             enuzun2.style.pixelTop=400;
  55.         }    
  56.         enuzun.style.pixelTop=theTop;
  57.         if((theTop+toplay)<400) { 
  58.             enuzun2.style.pixelTop=theTop+toplay;
  59.         }
  60.     }
  61.     if(psy[(theTop*(-1))+4]==3) {
  62.         setTimeout('dotrans()',3000+35);
  63.     } else {
  64.         setTimeout('dotrans()',35);
  65.     }
  66. }
  67.  
  68. function scroller2() { 
  69.     for(i=0;i<mc;i++) {
  70.         objd=eval("d"+i);objd2=eval("dz"+i);
  71.         if((parseInt(objd.offsetHeight)<=0)||(parseInt(objd2.offsetHeight)<=0)) { 
  72.             setTimeout('scroller2()',1000);return;
  73.         }
  74.     }
  75.     i=0;
  76.     for(i=0;i<mc;i++) {
  77.         objd=eval("d"+i);
  78.         heightarr[i]=parseInt(objd.offsetHeight);
  79.     }
  80.     toplay=4;
  81.     for(i=0;i<mc;i++) {
  82.         objd=eval("d"+i);objd2=eval("dz"+i);
  83.         objd.style.visibility="visible";
  84.         objd2.style.visibility="visible";
  85.         objd.style.pixelTop=toplay;
  86.         objd2.style.pixelTop=toplay;
  87.         psy[toplay]=3;
  88.         toplay=toplay+heightarr[i]+10;
  89.     }
  90.     enuzun.style.left=8+"px";
  91.     enuzun.style.height=toplay+"px";
  92.     enuzun.style.width=tmpv+"px";
  93.     enuzun.style.top=400+"px";
  94.     enuzun2.style.left=8+"px";
  95.     enuzun2.style.height=toplay+"px";
  96.     enuzun2.style.width=tmpv+"px";
  97.     enuzun2.style.top=400+"px";
  98.     theTop=400;
  99.     dotrans();
  100. }
  101.  
  102. function scroller() {
  103.     i=0;
  104.     innertxt=""+uzun;
  105.     for(i=0;i<mc;i++) {
  106.         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>";
  107.     }
  108.     innertxt=innertxt+"</div>";
  109.     innertxt=""+innertxt+uzun2;
  110.     for(i=0;i<mc;i++) { 
  111.         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>";
  112.     }
  113.     innertxt=innertxt+"</div>";spageie.innerHTML=""+innertxt;setTimeout('scroller2()',500);
  114. }
  115. window.onload=scroller;
  116.  
HTML PAGE:

[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]
Feb 20 '08 #1
3 1880
mrhoo
428 256MB
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.
Feb 20 '08 #2
drhowarddrfine
7,435 Expert 4TB
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.
Feb 20 '08 #3
acoder
16,027 Expert Mod 8TB
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?
Feb 21 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

9
by: Penn Markham | last post by:
Hello all, I am writing a script where I need to use the system() function to call htpasswd. I can do this just fine on the command line...works great (see attached file, test.php). When my...
5
by: Dynamo | last post by:
Hi again, Having had a little experience of HTML and style classes but only a limited knowledge of PHP perhaps somebody can tell me the pros and cons of the following. Surely if I write...
4
by: Fred Zilz | last post by:
I am trying to use an external style sheet to create a round cornered box. I am have difficulties correctly referencing my class in my style sheet. I am posting an excerpt from my style sheet: ...
8
by: Xah Lee | last post by:
what does it mean when a style tag gives something like the following? <style type="text/css" media="screen,projection">/*<!]>*/</style> is this standard? Xah xah@xahlee.org ∑...
9
by: anupamjain | last post by:
Hi, After 2 weeks of search/hit-and-trial I finally thought to revert to the group to find solution to my problem.(something I should have done much earlier) This is the deal : On a JSP...
18
by: fishwick | last post by:
I haven't really done any css in quite a while, and am banging my head against the wall trying get the rudimentary layout together of a church website home page to display correctly - I don't want...
3
by: John Dalberg | last post by:
I am using an application that dynamically creates style tags all over the place in the html file. I mean some inside the head section and some in the body section. I have no control over this. ...
2
by: Dawgs9604 | last post by:
I am trying to get a floating center table. I have tables on the left and right, but I am having troubles in particular with my center and right floating boards. I have set the width the boards are...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.