dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: Dave, got a JS, CSS, DOM question for you...

  1. #1
    Join Date
    Feb 2003
    Posts
    13

    Dave, got a JS, CSS, DOM question for you...

    Hi, Dave.
    I'm writing to you, but anyone interested in contributing would be welcome to add in.

    I'm trying to figure out how to create three hidden DOM elements (DIVs), set the background color of each one to a different color, then later read those colors.

    Basically, it's sort of a rough 'CSS enabled' check. If the DIVs are created with, say, a red, white, and blue background, but are read back with different colors (or no color), then either CSS is disabled or unsupported, or the user has specified his own style sheet.

    I know I'll probably have to use the DOM heirarchy (we won't worry about the older browsers) to do it, but I'm not sure how to get started.

    Any ideas? Even if it doesn't use DIVs, that'd be fine, just some way to check for the style sheet I specified as the one being used.

    Thanks

  2. #2
    Join Date
    Feb 2003
    Posts
    13
    Hi, Dave.

    I'm unsure about what you're asking. Let me explain our setup, maybe that will clear things up.

    Our style sheet is imported:
    <style type="text/css">
    <!--
    @import url(css/style.css);
    -->
    </style>

    We have different <DIV>s set up in the style sheet (div.header, div.footer, div.content, etc.).

    But I don't want to touch any of those <DIV>s to do the CSS check. I want to create three <DIV>s that are hidden, give them ID's:
    (<div id="red" style="background-color : #FF0000; visibility : hidden;">
    <div id="white" style="background-color : #FFFFFF; visibility : hidden;">
    <div id="blue" style="background-color : #0000FF; visibility : hidden;">)
    or something similar to that.

    Then I want to figure out, (using the DOM heirarchy? I'm not sure how.) what the background colors of those <DIV>s are, and compare that to what we expect them to be (red, white, blue). If it's not the same, we can assume that CSS is either unsupported, disabled, or has been over-ridden by a user-specified style sheet. (At least, I hope that's how it works )

    I'm not even sure if we can do this with <DIV>s. Perhaps we could do it with the BODY background color and the text color, or something like that? We need some element that, if CSS is either unsupported, disabled, or is over-ridden by a user style sheet, will change it's color (or some other attribute that will work).

    I got some code that was supposed to check if CSS is supported and enabled, but when I disabled CSS, it didn't work like it was supposed to.

    Here's the code:
    <div id="checkcss" style="position:absolute;"></div>
    <script language="javascript1.2" type="text/javascript">
    <!-- Begin
    var yes = "yes.htm";
    var no = "no.htm";
    checktype = document.layers ? document.checkcss : checkcss;
    top.location.href = (checktype) ? yes : no;
    // End -->
    </script>

    Even with CSS disabled, it still forwarded me to yes.htm.

    So, I came up with the idea of creating the three <DIV>s, but I'm not sure if even that will work.

    So, I'm casting about for ideas as to how to do it, using either <DIV>s or any other element or technique you know about.

    I hope this clears up what I'm looking for. Any ideas?

  3. #3
    Join Date
    Feb 2003
    Posts
    13
    So, I would use something like this?
    <html>
    <head>
    <script language="javascript1.2" type="text/javascript">
    <!--
    function checkCSS() {
    var divwhitecolor=(document.getElementById("white").style.backgroundColor);

    var divredcolor=(document.getElementById("red").style.backgroundColor);

    var divbluecolor=(document.getElementById("blue").style.backgroundColor);

    If divwhitecolor!='#FFFFFF' && divredcolor!='#FF0000' && divbluecolor!='#0000FF' then {
    top.location.href = "no.htm";
    }
    else {
    top.location.href = "yes.htm";
    }
    }
    // -->
    </script>
    </HEAD>
    <BODY onload="checkCSS();">
    <div id="white" style="background-color : #FFFFFF; visibility : hidden;">

    <div id="red" style="background-color : #FF0000; visibility : hidden;">

    <div id="blue" style="background-color : #0000FF; visibility : hidden;">
    </BODY>
    </HTML>


    I'm pretty sure I've messed up the coding (if so, please point out my errors), but something like that?

  4. #4
    Join Date
    Feb 2003
    Posts
    13
    You know, I just thought of something...if we're specifying the <DIV> colors using in-line style declarations, and CSS is ENABLED, but the user is using a different style sheet. then these <DIV>s will still be the right color (won't they?). But, if we put them into the imported style sheet, (which won't be used because it's being over-ridden by the user-specified style sheet), that should work...I hope.

    So, we'd HAVE to put the color specifications into the imported style sheet.

    That way, if CSS isn't supported or is disabled, the <DIV>s won't have any color to begin with (is that the way it works? I'm not sure.), and if the style sheet is over-ridden, the colors won't be right.

    Something like this, I think:
    Style.css:
    ----------------------------------------------------------------------
    div.red {
    background-color : #FF0000;
    }

    div.white {
    background-color : #FFFFFF;
    }

    div.blue {
    background-color : #0000FF;
    }
    ----------------------------------------------------------------------

    <html>
    <head>
    <style type="text/css">
    <!--
    @import url(css/style.css);
    -->
    </style>
    <script language="javascript1.2" type="text/javascript">
    <!-- // Begin
    function checkCSS() {
    if(document.getElementById("white").style.backgroundColor == "#ffffff"
    && document.getElementById("red").style.backgroundColor == "#ff0000"
    && document.getElementById("blue").style.backgroundColor == "#0000ff") {
    top.location.href = "yes.htm";
    } else {
    top.location.href = "no.htm";
    }
    return true;
    }
    // End -->
    </script>
    </HEAD>
    <BODY onload="return checkCSS();">
    <div id="white" class="white" style="visibility : hidden;">
    <div id="red" class="red" style="visibility : hidden;">
    <div id="blue" class="blue" style="visibility : hidden;">
    </BODY>
    </HTML>

    Would that work?

  5. #5
    Join Date
    Feb 2003
    Posts
    13
    Yes, what we're trying to determine is if CSS is both supported and enabled, and not over-ridden...although I don't think the over-ridden part is very important, mostly the supported and enabled parts.

    I also thought of something...if I'm thinking correctly, the 4.0 version browsers don't support imported stylesheets, do they?

    If that's the case, then this would also function as a rough sort of browser version check, as well. The older browsers could be shunted off to the no.htm, which would urge them to upgrade their browsers.

    Last edited by SanFran; 02-13-2003 at 11:49 PM.

  6. #6
    Join Date
    Feb 2003
    Posts
    13
    I just figured that out...I was playing around with the code, I made the <DIV>s visible, then set them up to be 50px tall, with one at 50px from the top, one at 100, and one at 150.

    They showed up, alright, in red, white, and blue glory, but the Javascript alert boxes I'd set up with both:
    document.getElementById("white").style.backgroundColor
    and
    document.all.white.style.backgroundColor

    showed up as blank, meaning there was no value.

    Why is that? Why does it not have a color value when the color is set from an imported CSS file? What should I use instead to read the colors?

    Sorry if I'm not very good at Javascript...my knowledge doesn't extend much beyond cut-and-paste of already written code.

  7. #7
    Join Date
    Feb 2003
    Posts
    13
    So, it'd have to be something like:

    Style.css:
    ----------------------------------------------------------------------
    #red {
    background-color : #FF0000;
    }

    #white {
    background-color : #FFFFFF;
    }

    #blue {
    background-color : #0000FF;
    }
    ----------------------------------------------------------------------

    <html>
    <head>
    <style type="text/css">
    <!--
    @import url(css/style.css);
    -->
    </style>
    <script language="javascript1.2" type="text/javascript">
    <!-- // Begin
    function checkCSS() {
    if(document.getElementById("white").style.backgroundColor == "#ffffff"
    && document.getElementById("red").style.backgroundColor == "#ff0000"
    && document.getElementById("blue").style.backgroundColor == "#0000ff") {
    top.location.href = "yes.htm";
    } else {
    top.location.href = "no.htm";
    }
    return true;
    }
    // End -->
    </script>
    </HEAD>
    <BODY onload="return checkCSS();">
    <div id="white" style="visibility : hidden;">
    <div id="red" style="visibility : hidden;">
    <div id="blue" style="visibility : hidden;">
    </BODY>
    </HTML>

    I probably messed up the CSS, but using #red, #white, and #blue should allow us to put the color attribute into the <DIV>'s style objects, allowing us to read it back with the document.getElementById("color").style.backgroundColor blurb. (Sorry if I'm not using the correct vernacular here...I'll pick up on the proper names to call different things as I learn more.)

    Is my thinking correct on this?

  8. #8
    Join Date
    Feb 2003
    Posts
    13
    So what holds the color value for the <DIV> background when an external style sheet is used?

    It's got to be held somewhere, otherwise the <DIV> wouldn't know what color to be.

    I'll do some searching on the 'net, see what I can turn up.

  9. #9
    Join Date
    Feb 2003
    Posts
    13
    Could we do something like this:

    if(document.styleSheets && document.styleSheets.length > 0 && document.styleSheets[0].rules[0].style.cssText = ''POSITION: relative; HEIGHT: 30px; BACKGROUND-COLOR: red') {
    alert("Stylesheets are supported.");
    } else {
    alert("Stylesheets are not supported.");
    }

    I'm still unsure about the styleSheets[x] and rules[x] numbering scheme...how do they work? Does it start at 0 and increment up with each stylesheet used in the page? Does rules[x] start at 0 and increment up with each new rule you put in the stylesheet?

    If a user has over-ridden the imported stylesheet, would that imported stylesheet still be styleSheets[0]? Or would the style sheet they specify take its place?

    I was thinking that we could set up a style sheet with a specific structure, then read it back with the document.styleSheets[x].rules[x].style.cssText attribute, and if the user-specified style sheet over-rides the imported style sheet (or imported style sheets aren't supported or CSS is disabled), the value of that attribute would be all wrong, so we could assume that either CSS is unsupported, disabled, or over-ridden.

    Would that work?

  10. #10
    Join Date
    Feb 2003
    Posts
    13
    Or, a more elegant way of doing it:

    if(document.styleSheets && document.styleSheets.length > 0)
    {
    if (document.styleSheets[0].rules[0].style.cssText = ''POSITION: relative; HEIGHT: 30px; BACKGROUND-COLOR: red'){
    alert("Correct stylesheet is in use.");
    else
    alert("Incorrect stylesheet is in use.");
    }
    else
    alert("Stylesheets are not supported.");
    }

    Again, I'm pretty sure I messed up the coding (I'm still trying to figure out nesting if-then-else), but that'd give us the ability to determine if CSS is not only enabled or disabled, but whether or not the correct style sheet is in use.

  11. #11
    Join Date
    Feb 2003
    Posts
    13
    I just visited the W3C website, and looked up everything I could about CSS.

    Apparently, they insist on using:
    document.styleSheets[x].cssRules[x]

    instead of:
    document.styleSheets[x].rules[x].

    Thus, using the first one allows it to work in IE 5.5+, NN6, Konquerer, Mozilla, whereas the second one only works on IE 5.5+ for Mac and Windows.

  12. #12
    Join Date
    Feb 2003
    Posts
    13
    Apparently, cssRules is the W3C DOM2 way of doing things.

    I think you have to put IE into standards mode with a strict DOCTYPE declaration to get it. I'm not sure, though.

    I'm still trying to get their example working in my testCSS page...can't figure out why theirs works, and mine doesn't.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles