Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Aug 2006
    Location
    Dallas, Texas
    Posts
    19
    Member #
    13686
    I am trying to use Javascript to select a css style sheet based on the window size. My code is copied below. In Firefox, when I resize the window, I still get the gt800 version. Is there a different value to test for Firefox, other than window.screen.width or screen.width? (I have tried both.)
    I am using % for a liquid flow, but still have trouble because of the blue border.
    <link href="css%20files/page-blueBordergt800.css" id="screenSize" type="text/css" rel="stylesheet">
    <script language="JavaScript" type="text/javascript">
    <!--
    var temp=screen.width;
    if(temp>800){
    document.getElementById('screenSize').href="css%20 files/page-blueBordergt800.css";
    }
    else{
    document.getElementById('screenSize').href="css%20 files/page-blueBorderlt801.css";
    }
    //-->
    </script>
    </head>

    the page is http://www.web-design-jholmes900.com...lueBorder.html
    Any ideas? Do I have some of the JavaScript typed incorrectly?
    See Final Resolution posted below.

  2.  

  3. #2
    Senior Member Arkette's Avatar
    Join Date
    Jan 2006
    Location
    Europe
    Posts
    102
    Member #
    12297
    CSS is applied during the render phase of the page lifecycle (ie the very begining) Attempting to change the style-sheet after the page has been rendered will not change anything because the page is already onscreen. It is possible to change the styling of individual elements in the document programmatically post render but it's not possible to re-invoke the render engine without re-loading the page.
    End of Line.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by Arkette
    CSS is applied during the render phase of the page lifecycle (ie the very begining) Attempting to change the style-sheet after the page has been rendered will not change anything because the page is already onscreen. It is possible to change the styling of individual elements in the document programmatically post render but it's not possible to re-invoke the render engine without re-loading the page.
    That is untrue in just about every way. CSS is applied dynamically, thus why you can create animations and neat effects with Javascript. Changing the src of an externally linked stylesheet will also reapply the stylesheet, albeit with a small delay. What it may not do is clear the original stylesheet's settings (I'm not 100% sure about that).

    Your code works fine, but you need to make sure it fires onResize. You should be able to set the body element's onResize attribute to call a function that runs that bit of code. If you'd like, you can also run it onLoad, so that it runs when the page first comes up.

  5. #4
    Junior Member
    Join Date
    Aug 2006
    Location
    Dallas, Texas
    Posts
    19
    Member #
    13686
    I changed my code to a function and then put the onResize and onLoad in the body tag. It did not change anything. Do I have to put the onResize and onLoad in other places?

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    If you look at the top of the page, you've placed it outside of the script tags. Make that read:
    Code:
    window.onresize = cssChange;
    window.onload = cssChange;
    And put it inside the script tag, after the function.

  7. #6
    Junior Member
    Join Date
    Aug 2006
    Location
    Dallas, Texas
    Posts
    19
    Member #
    13686
    Thank you Shadowfiend, for your help. In addition to needing the JavaScript defined as a function executed at onLoad and onResize, I had problems because my testing was invalid. I have a large monitor and I expected screen.width to be reset when I resized the screen in Firefox to 800x600. Apparently screen.width is always based on the actual hardware. I tested by setting var temp to 800 and it worked great. There was no problem with the css substitution. I also tested the defaulting by switching the order of testing gt800 and lt801 and by changing the one that is defined in the link. They both worked.
    The final code follows:
    <link href="Bordergt800.css" id="screenSize" type="text/css" rel="stylesheet">
    <SCRIPT type="text/javascript" language="JavaScript">
    <!-- hide from browsers that do not support javascript
    function cssChange()
    {
    var temp = window.screen.width;
    if (temp > 800) {
    document.getElementById("screenSize").href="Border gt800.css";
    }
    else {
    document.getElementById("screenSize").href="Border lt801.css";
    }}
    window.onresize = cssChange;
    window.onload = cssChange;
    // stop hiding javascript -->
    </SCRIPT>
    </head>

    Thank you again.

  8. #7
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by Shadowfiend
    That is untrue in just about every way. CSS is applies dynamically, thus why you can create animations and neat effects with Javascript. Changing the src of an externally linked stylesheet will also reapply the stylesheet, albeit with a small delay. What it may not do is clear the original stylesheet's settings (I'm not 100% sure about that).
    Agreed - I've been practising a javascript stylesheet changer, and the sheet changes just by changing the href of the sheet in javascript. I too don't know whether it cascades - will experiment with that.

  9. #8
    Senior Member aubreyisland's Avatar
    Join Date
    Oct 2005
    Posts
    125
    Member #
    11643
    uhm you're goin to get alot of angry javascript non-users when they stretch that window too far...

  10. #9
    Junior Member
    Join Date
    Aug 2006
    Location
    Dallas, Texas
    Posts
    19
    Member #
    13686
    Quote Originally Posted by aubreyisland
    uhm you're goin to get alot of angry javascript non-users when they stretch that window too far...
    Do you have any suggestions?

  11. #10
    Senior Member aubreyisland's Avatar
    Join Date
    Oct 2005
    Posts
    125
    Member #
    11643
    Unheartedly, don't use javascript.....

    I don't know what you are trying to acomplish or what is happening when the window gets to a certain point.

    Looking...


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com