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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Mata Nui
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS changer based on user's preferences

    I'm relatively new to web designing, but I saw a site a while back that had something I would like.
    They had something that displayed a dropdown box to different CSS schemes, changing which CSS sheet the page used and keeping it that way. Say I wanted to use a different style sheet than the "blue, Times New Roman" one I was, the user could specify it be selecting a pre-made style sheet from a dropdown box and go for "scheme 5, a green, Metro font" one. And in doing this not having to create an entire different web using just a different style sheet.

    Is this possible?
    Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you have to use javascript, and change it dynamically with different .css files. so yes it is possible

  • #3
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Mata Nui
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Any premade javascript ot do this?

    Is there any premade javascript that can do this? I only know limited HTML, and I'm trying to learn something else right now.
    Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.

  • #4
    New to the CF scene
    Join Date
    Sep 2002
    Location
    Aberdeen/Edinburgh
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Took most of this from:http://www.codelifter.com/main/javas...ngestyles.html (hence the credit) and changed it so it used a drop down menu .......


    <html>
    <head>
    <script>

    <!--

    function land(ref, target)

    { lowtarget=target.toLowerCase();
    if (lowtarget=="_self") {window.location=loc;}
    else {if (lowtarget=="_top") {top.location=loc;}
    else {if (lowtarget=="_blank") {window.open(loc);}
    else {if (lowtarget=="_parent") {parent.location=loc;}
    else {parent.frames[target].location=loc;};
    }}}
    }
    function jump(menu)
    { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("&");
    target="";
    if (splitc!=-1)
    {loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);}
    else {loc=ref; target="_self";};
    if (ref != "") {land(loc,target);}
    }

    -->

    </script>


    <!--
    ====================================================
    Copyright 2001 by www.CodeLifter.com
    Free for all users, but please leave in this header.
    ====================================================

    //-->


    <link rel="stylesheet" href="style_1.css">
    <link rel="stylesheet" href="style_2.css">
    <link rel="stylesheet" href="style_3.css">
    <link rel="stylesheet" href="style_4.css">



    <script language="JavaScript">
    <!--
    var doAlerts=false;
    function changeSheets(whichSheet){
    whichSheet=whichSheet-1;
    if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
    if(i!=whichSheet){
    document.styleSheets[i].disabled=true;
    }else{
    document.styleSheets[i].disabled=false;
    }
    }
    }
    }
    //-->
    </script>

    </head>

    <body>
    <Form action="" method=post name="">
    <select name="choice" onChange="jump(this.form)">


    <option value="JavaScript:changeSheets(1)">Style One</option>
    <option value="JavaScript:changeSheets(2)">Style Two</option>
    <option value="JavaScript:changeSheets(3)">Style Three</option>
    <option value="JavaScript:changeSheets(4)">Style Four</option>

    </select>

    </form>


    <p>Textity Texity Text</p>

    </body></head>


    any use?
    Lambo

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ALA

    Also check out This article on A List Apart about this subject. They more recently had stuff using PHP, but that might not be possible on the server you use.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Mata Nui
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Thank you sooooo much. I'll be sure to use both..
    Bionicle: BIOlogical chroNICLE. If anyone knows a script that will change an image everytime you refresh, contact me.

  • #7
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The way I have always done it, and correct me please if I am wrong.

    example:

    <link href="style.css" id="cssLink" rel="stylesheet" type="text/css">

    and then somthing along the lines of:

    onclick="document.getElementById('cssLink').href='newstyle.css';"


  •  

    Posting Permissions

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