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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts

    document.write()

    I'm building a style switcher and need to use document.write(), the problem is that whenver I use it, it gets written but nothing else appears on the page.

    Am I doing something wrong?

    TIA
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    This seems like the usual DOM vs document.write situation. You see, the DOM can't be used while the document is still loading, only after it's finished loading. On the other hand, document.write can only be used while the document is loading, not after it's finished loading.

    Styleswitching is kinda my speciality...(I've written a total of three style switchers)
    If you tell me how you want your style switcher to appear and function, I can probably tell you how to write it. Serverside, clientside or combo, and what level of browser support do you want? (NN4 requires special care, and if you drop the demand for op support you can get far more versatile style switcher. After all, op has a built-in style switcher anyways...)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, this is what I've got so far (nice and simple)

    Code:
    function foo() {
     
      if ((document.cookie.indexOf('style=1') >= 0) || (document.cookie == '')) {
        document.write('<link rel="stylesheet" type="text/css" href="normal.css">\n');
      }
      else if (document.cookie.indexOf('style=2')>= 0) {
        document.write('<link rel="stylesheet" type="text/css" href="alt.css">\n');}
    }
    
    function switchstyle(which) {  
      document.cookie = 'style=' + String(which);
      alert('The style has been switched. Please reload the page.');
    }
    
    onload = foo;
    It's clientside and at the moment the style is changed with <a onclick="switchstyle(1/0)">, but I guess I could use a combo.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, seems like a good situation for this link: <http://liorean.web-graphics.com/scri...emeswitch.html>

    You'll be doing this on a link click, in other words the document will have finished loading. That means you'll have to use the DOM instead of document.write. What you can do, is to include one style as default using <link ref="stylesheet" type="text/css" href="blah" title="Default"> and the other as <link ref="alternate stylesheet" type="text/css" href="blah" title="SomethingElse">

    Then you use either document.styleSheets or document.getElementsByTagName('link') to go through the stylesheets, and set the disabled property to false on the stylesheets you want to apply, true on the stylesheets you want to hide, based on your cookie. That's what the Theme Switcher that I linked does. For a live example, see <http://liorean.web-graphics.com/dhtml/tabs/tabs.html>, where I'm doing a tabbed interface based on the alternate stylesheets mechanism.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot. I'm at the last hurdle - all the DOM has been written and the correct disable properties have been set. But unfortunately my alternate stylesheet is not applying. I think I know why.

    <link ... href="normal.css"> is disabled.
    <link ... href="alt.css"> is not disabled, but I still have it down as 'alternate stylesheet'. I think this is why it's not applying.

    Any insight?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, could I have a look at your code?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, this is what actually sets the property:

    Code:
      styles = document.getElementsByTagName('link');
      for (var i = 0; i < styles.length; i++)  
        if (styles.item(i).attributes.item(1).nodeValue == which) 
          styles.item(i).disabled = false;
        else 
          styles.item(i).disabled = true;
    PS: thanks for the speedy reply
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, the only thing that doesn't look right is that you use item(1) to reach the disabled attribute, though that is a question of form. A DOM user agent isn't required to put the attributes in any specific order in the NamedNodeMap, so you can't know that it's actually the item 1 that you are looking for. Why don't you use getAttribute(attrName) instead?
    Code:
    // Try if this works:
    var
        i=style.length;
    while(i-->0)
        styles.item(i).disabled=(
            styles.item(i).getAttribute('title')!=
            which);
    Why don't you drop that if statement anyways, since you get your boolean from the condition and it's the boolean you want to assign.
    Last edited by liorean; 09-30-2003 at 07:18 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shouldn't that be while (i-->=0)?

    It goes from 0 to styles.length -1, so when i decremented is 0 then there's still one more to evaluate.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, while(i-->0) should work like this:

    var arr=['a','b','c'],
    i=arr.length: (i=3 in other words)
    (i-->0) is evalutated as 3>0==true, i=2, loop is executed
    (i-->0) is evalutated as 2>0==true, i=1, loop is executed
    (i-->0) is evalutated as 1>0==true, i=0, loop is executed
    (i-->0) is evalutated as 0>0==false, i=-1, loop is not executed



    In other words, it should work. It just goes through the array from length-1 through 0 instead of the other way. (It's faster, too)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your help first off. Just one final problem. When I click on the 'Alternate Style' link, it comes up with a style-less page.

    Code:
    Code:
    function switchstyle(which) {
      styles = document.getElementsByTagName('link');  
      var i = styles.length;
    
      while(i-- > 0)    
        styles.item(i).disabled = (styles.item(i).getAttribute('href') != which);
    }
    Called with:
    Code:
        <li><a href="#" onclick="switchstyle('normal.css')">Normal Style</a></li>
        <li><a href="#" onclick="switchstyle('alt.css')">Alternative Style</a></li>
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #12
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, have you tried to alert the href attributes to see how they look from the browser perspective? They might get resolved, you know. Besides, the title attribute is just as fine and is indeed the attribute intended for this mechanism.

    (BTW, does the alternate stylesheets work through the UI menus in Moz and Op7? If not, you can find your problem in the link tags.)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #13
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Both the alternate stylesheets at http://redmelon.net and www.massless.org work.

    Wow! changed to title and suddenly everything works!

    Incredible

    Thanks loads for your help on this subject
    Last edited by me'; 10-01-2003 at 07:03 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Yeah, through the on page provided link for massless, but not through the UI. I meant the feature avalable from the menu, View>Use Style in Moz and the stylesheet icon in op7. If it doesn't work through them, then you won't find it working through this mechanism. It worked for redmelon, though. Maybe you should have a look at how those link tags are written and compare to your own link tags. (massless works serverside and doesn't actually provide any alternate stylesheets)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #15
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're right - View->Use Style works for redmelon and my page, but not for massless (which also explains why the source didn't make any sense to me ).

    As for the link tag bit, what exactly do you mean? My link tags are written more or less exactly the same, rel, href, type and title attributes with an oblique at the end. What else is there?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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