Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Weird sh.t applying styles

    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

  • #2
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #3
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what about the mouse roll over thing?

    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.

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Code:
    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
    Code:
    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.
    Code:
    reset (tN, stlAtr, val){
    el = getElementsByTagName(tN)
    ....
    switch (csslnk){
    case "NS1V":
    el.style.stlAtr = val
    break;
    ...
    }
    }
    PSS. Happy Coding!
    Last edited by Guardian23; 09-17-2002 at 09:34 AM.

  • #6
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

    Consider the following:

    #1&nbsp;div {border-color: #000000}
    #2&nbsp;div.classname {border-color: #ffffff}
    #3&nbsp;div# {border-color: #00ff00}
    #4&nbsp;<div style="border-color: #000000"></div>

    it goes from top to bottom, so any div without a class name, id
    or inline style definition, will have a black border.
    &nbsp;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)

    &nbsp;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

  • #8
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    good thinking!

    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.

  • #9
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mission acomplished

    BTW, I fixed the problem: here.

    It works just for the first two styles... It was really easy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •