Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: include external css based on condition

  1. #1
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default include external css based on condition

    is there any way that i can include external css based on some conditions ?
    something like this
    if(1)
    <link...css1>
    else if(2)
    <link...css1>

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Yes, you can definitely do it, but there may well be a better way. What's the condition?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Thumbs up

    Using JavaScript this can be done

    HTML Code:
    [U]HTML Source code[/U]
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript">
    var input = parseInt(prompt('Enter a value',''));
    
    if(input)
    	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
    else
    	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
    </script>
    </head>
    <body>
    <span class="body">This is a test</span>
    </body>
    </html>
    HTML Code:
    1.css
    
    .body
    {
    background-color:#CCFFFF;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    }

    HTML Code:
    2.css
    
    .body
    {
    background-color:#FFFF00;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    }
    The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

    Hope this is what you were looking

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    stupid question, but relevant.
    Does document.write go where the script is, or does it output at another location?
    For example... if you wanted to just output a body paragraph, would you need to place a script in the <body> section? that's certainly not standard, and might give some errors.... so...?

    I notice the script is conveniently in place css would normally be located, but might just be a coincidence as both script and css tags go in the head.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    its like i want to change skin of my webpage which is based on codeexploiter suggested...actually i tried something similar

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

  7. #7
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by codeexploiter
    Using JavaScript this can be done

    HTML Code:
    [U]HTML Source code[/U]
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript">
    var input = parseInt(prompt('Enter a value',''));
    
    if(input)
    	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
    else
    	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
    </script>
    </head>
    <body>
    <span class="body">This is a test</span>
    </body>
    </html>
    HTML Code:
    1.css
    
    .body
    {
    background-color:#CCFFFF;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    }

    HTML Code:
    2.css
    
    .body
    {
    background-color:#FFFF00;
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    }
    The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

    Hope this is what you were looking

    i did somrthing like this but it gives error

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="script.js" language="Javascript" type="text/javascript"></script>
    </head>
    <body onload="onload(1);">
    <h1>Just hi</h1>
    </body>
    </html>
    HTML Code:
    script.js 
    
    function onload(input) {
    
    if(input == 1)
    	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
    else
    	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
    }

    It fails
    In FF javascript Console it shows
    What i did wrong ?
    Error: too much recursion
    Source file: file:///home/jigar/Desktop/My%20Document/4.Web%20Design/my%20nvu%20web/select%20script/base.html
    Line: 1

  8. #8
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Cool...!! thanks....i searched on dynamic drive but couldn't get one...Thanks again

  9. #9
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Two things:

    1. change the name of your function defined in script.js file from onload to something else.

    2. call the function defined in the .js file from within your head section itself. That is the place to insert the <link> tags.


    HTML Code:
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" src="script.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    onlooad(1); //assuming that the function name defined in script is this no onload
    </script>
    </head>

  10. #10
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by djr33
    Does document.write go where the script is, or does it output at another location?
    Directly after the script element, as though it were a sibling.

    For example... if you wanted to just output a body paragraph, would you need to place a script in the <body> section?
    Yes.

    that's certainly not standard, and might give some errors.... so...?
    Hmm? Placing a script element in the body element, and many of its descendants, is certainly allowable.

    Mike

Bookmarks

Posting Permissions

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