I have this page that has 4 links in the bottom left that change the href attribute of the link tag and thus change the style sheet of the page.
If you have Mozilla, than try clicking on 2, than 3 and again 2 (in the bottom left) and you'll see that there is a bug (?).
My div's also have onmouseover and onmouseout event handlers that change the div's border color. But if you than change the style sheet the div's border color doesn't change (although all my .csss have their div {border-color} set).
Try first changing the style (using 4 links in the bottom left) and than moving the mouse over those "cells" (divs) and again changing the style.
I think noticing the bug is inevitable. I just wanna know why this happens.
Oh, here's the page:link (http://www2.arnes.si/~rcarl/STJANI%20TEST/nova.html)
As far as I can see, it appears that if you resize the window, everything
changes as it should in Mozilla, and in IE there isn't any problem
whatsoever. Could it be the way Mozilla browsers interperet the
Dynamic Content?
Other than that, I can't make much of it, but just a suggestion,
maybe you should do something extra to your spStil function, to
make it skip any clicks from Mozilla to the links labeled 5 and 6,
seeing as they don't exist. Also, in IE, the links 5 and 6 are set
up in a way that covers the style links, which is likely to become
a disadvantage.
Sorry if I couldn't be of more help.
Guardian
PS. it might be quicker, considering that the link already has an
id, to just use the getElementById method, rather than creating
a custom set...
Yes, as you said, resizing the window in Mozilla fixes the problem.
But what about mouse roll over?
Once you have rolled your mouse over a div, that div's border color won't change anymore by clicking one of those 4 "links" in the bottom left.
Ahh yes, I missed that (black's my favorite (non-)color, couldn't
help it:)).
I'll check it out, downloading CSS and the page in question, I'll
see if I can't find out why it won't work.
Guardian
I believe this happens because some browsers don't respond to
additions in code that affect certain things: I tried to Script out a
PerlScript in IE once (I didn't know how to integrate), and it ignored all the content in it. :(
Here's your problem: (last for statement)
for (i = 0; i < document.getElementsByTagName('div').length; i++) {
var el = document.getElementsByTagName('div')[i];
el.onmouseover = function() {this.style.borderColor = '#ffffff';}
el.onmouseout = function() {this.style.borderColor = '#000000';}
}
But I can't think of how to change it back to the original color, you
could get the href attribute of the style link and go from there:
Note: This worked for me in Mozilla
for (i = 0; i < document.getElementsByTagName('div').length; i++) {
var el = document.getElementsByTagName('div')[i];
el.onmouseover = function() {this.style.borderColor = '#ffffff';}
el.onmouseout = function() {reset()}
}
function reset() {
el = document.getElementsByTagName('div')
var csslnk = document.getElementById("style").getAttribute ("href")
csslnk = csslnk.slice (11,csslnk.length-4)
for (i=0; i<el.length; i++) {
switch (csslnk) {
case "NS1V":
el[i].style.borderColor = "#000000"
break;
case "NS2V":
el[i].style.borderColor = "#ccccff"
break;
case "NS3V":
el[i].style.borderColor = "#9999ff"
break;
case "NS4V":
el[i].style.borderColor = "#bbbbbb"
break;
}
}
}
Also place a call to reset in your links, and you may want to do
something similar to the background.
Guardian
PS. placing a call to reset for the background would be done by
extendending the capabilities of the function reset() with a paramter
for the tagName and for the style attribute.
e.x.
reset (tN, stlAtr, val){
el = getElementsByTagName(tN)
....
switch (csslnk){
case "NS1V":
el.style.stlAtr = val
break;
...
}
}
PSS. Happy Coding!
What a reply :) Thnx!
But still... I think the script should work anyway. When you change the href of the link tag, borders should change too, at least until you roll your mouse over a div.
But anyway: thanx again!
Weelll, actually, I have to admit a small oversight on my part:
In actuality (except for the bgColor??? ?Moz bug?), the problem is
because of the style interperetation...
it goes from top to bottom, so any div without a class name, id
or inline style definition, will have a black border.
But, after that, a class will override a normal div style, and
an id will override a classed div style, and an inline div style will override
any of the above... (but only if the style-type is the same)
What a JS style change does is change the inline style type,
so it overrides any CSS-ref style types, including those that are
DIV specific...
Guardian
Yes, you're right!
So there's no way for me other than to change my script thus that it will change the rollover color depending on the style selected. So I guess I'll do that.
I have tried setting !important in the style sheet for the border and than this !imporatant overwrites the inline style from JavaScript. But now when you roll you mouse over a div the div's color does not change because it's inline importance is lower then the !important rule in the style sheet :) ...
So is there a way to reference the style rule in CSS? Or style rule in between <style> tags? That's also important elsewhere, cause sometimes you have to set your div's or whatever explicit style in JavaScript or inline style for script to use it.
BTW, I fixed the problem: here (http://www2.arnes.si/~rcarl/STJANI%20TEST/nova.html).
It works just for the first two styles... It was really easy ;)