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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript choosing colors and CSS

    Hello,

    I have this script that allows users that goto my site to change the appearce of the site thanks to different CSS. I have a special section in the site that when you roll over it changes colors. I want that color change to be a dark color that goes with that particual theme.

    In short my question is this. If someone chooses for instances: darkblue.css, how does the if...else... syntax work so that the highlighting will be a dark green (for instance). But if someone choose red.css i want that highlighting to be a dark blue. (Does this make sense?)

    Below is my code for the switch of the CSS. At the very bottom is my "highlighting" code.


    Selection of CSS Code
    var today = new Date();
    var expiry = new Date(today.getTime() + 365 * 24 * 60 * 60 * 1000);

    function doSkin(skin) {
    document.getElementById("skin").href='css/' + skin + '.css';
    document.cookie="skin=" + escape(skin) + "; expires=" + expiry.toGMTString() + "; path=/";
    if (document.all) {
    var sel = document.getElementsByTagName("SELECT")
    for (i=0;i<sel.length;i++) {
    sel[i].style.visibility = "hidden";
    sel[i].style.visibility = "visible";
    }
    }
    window.location.reload();

    }

    function drawSkinSelector() {
    if (document.getElementById) {
    str = "";
    str += "<select name=\"skinsel\" onchange=\"doSkin(this.options[this.options.selectedIndex].value)\" class=\"searchbox\">";
    str += "<option value=\"default\">Switch Skin</option>";
    str += "<option value=\"default\">Grey</option>";
    str += "<option value=\"chocolate_rose\">Chocolate Rose</option>";
    str += "<option value=\"forest\">Forest</option>";
    str += "<option value=\"mint\">Mint</option>";
    str += "<option value=\"acidblue\">Acid Blue</option>";
    str += "<option value=\"darkblue\">Dark Blue</option>";
    str += "<option value=\"khaki\">Khaki</option>";
    str += "</select>";
    }
    else {
    str = "<img src=\"http://www.yoursite.com\">";
    }
    document.write(str);

    }

    function browserChk() { // write dumbed-down CSS document for Netscape 4
    var nm = navigator.appName.indexOf("Netscape") != -1;
    var vers = parseInt(navigator.appVersion);
    if (nm && (vers == 4)) {
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.www.yoursite.com/skin/darkblue.css\">");
    }
    }



    Highlight code
    function movein(which){
    which.style.background='C8C8A0'
    }

    function moveout(which){
    which.style.background=' '
    }

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    I would suggest that you specify a class Name in the css files. That will make it easier in my mind since you would not have to wrroy about if statement.


    function movein(which){
    which.className = "highlight";
    }

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by A1ien51
    I would suggest that you specify a class Name in the css files. That will make it easier in my mind since you would not have to wrroy about if statement.


    function movein(which){
    which.className = "highlight";
    }

    Eric
    Pardon my stupidity, but i cant get it to work

    I put this in one of my css files that i am testing:

    CSS Highligh
    .highlight {
    color : #ffffff;
    }


    than i put that code that you gave

    function movein(which){
    which.className = "highlight";
    }


    And now when you move over a paticular spot, the highlight only stays for a milisecond, and if you move mouse over it again it will not show up.

  • #4
    New Coder
    Join Date
    Apr 2004
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey!

    i finally got it to work, i had to declare the "moveout" function as another class. Once i did that it started working correctly. Thanks for your help


  •  

    Posting Permissions

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