WordPress.org

Ready to get started?Download WordPress

Forums

need DOM advice (3 posts)

  1. anatman
    Member
    Posted 10 years ago #

    Hey,
    I have two javascripts conflicting on my website (still trying these scripts locally), and i thought of a solution but i don't know if it even exists.
    The problem is: i am using ALA's styleswitcher.js, which chooses between two color schemes. The layout is defined by a persistent stylesheet, and the color schemes by the preferred and alternate stylesheets, link by a "link rel" and with a title attribute each. I am also using a fade-in effect for the text, made by a script that changes the color attribute for the "content" ID using document.getElementById("content").style.color="rgb(and_here_the_variables)".
    Now, when i load the page, the persistent and preferred stylesheets are loaded, and then the fade-in scripts kicks in and the text appears (from white to black). Then i can go to the style switching buttons and choose the alternate style, BUT the color that was changed by the fade-in script STAYS, instead of changing to the color specified in the alternate stylesheet.
    So my question is: is there a way to change the color (using that document.getElementByID or something similar) ONLY in the preferred stylesheet, so that when i change to the alternate the new color kicks in?
    If not - any other solution you can think off?
    Thanks a lot, all help appreciated!
    Eduardo

  2. seriocomic
    Member
    Posted 10 years ago #

    This is one of those examples where it would be beneficial to either see the code or see it action for ourselves.
    I ASSUME that you are using onload in the body tag for the fade in script and that the styleswitcher javascript is being called onclick?
    If that's correct then you might want to combine two js calls in the one onclick function.

  3. anatman
    Member
    Posted 10 years ago #

    OK, here goes the code!
    The styleswitcher script is (from ALA):
    function setActiveStyleSheet(title) {
    var i, a, main;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
    a.disabled = true;
    if(a.getAttribute("title") == title) a.disabled = false;
    }
    }
    }
    function getActiveStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
    }
    return null;
    }
    function getPreferredStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
    && a.getAttribute("rel").indexOf("alt") == -1
    && a.getAttribute("title")
    ) return a.getAttribute("title");
    }
    return null;
    }
    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }
    window.onload = function(e) {
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    }
    window.onunload = function(e) {
    var title = getActiveStyleSheet();
    createCookie("style", title, 365);
    }
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    And it is called by these two clickable style names:
    yin | yang
    The fade-in script is this:
    initial = 240;
    col = 240;
    active = getActiveStyleSheet();
    function initialColor()
    {
    if (active=='yang')
    {
    document.getElementById("content").style.color="rgb(" + initial + ", " + initial + ", " + initial + ")";
    }
    }
    function sa()
    {
    if (active=='yang')
    {
    document.getElementById("content").style.color="rgb(" + col + "," + col + "," + col + ")";
    col-=5;
    if (col>15) setTimeout('sa()', 1);
    }
    }
    You see, it originaly didn't have the IFs, i wrote that in to check that the active stylesheet is the one called 'yang' so that only then i get the fade-in. This works. This script is called like this:
    the body tag contains then onload="sa()", and just after the div id="content" tag there is a call saying initialColor() (no onclick or onload).
    The purpose of this setup is: the 'yang' stylesheet specifies a text color of #111. If the user has JS off, then there is no fade-in and the color remains #111 on a white background. If the users has JS enabled, the initialColor() function sets the inital color to white, and when the page finishes loading the sa() function does the fade-in.
    Ah, and the header of the document contains, of course:
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $siteurl; ?>/style/style.css" />
    <link rel="stylesheet" type="text/css" media="screen" title="yang" href="<?php echo $siteurl; ?>/style/yang.css" />
    <link rel="alternate stylesheet" type="text/css" media="screen" title="yin" href="<?php echo $siteurl; ?>/style/yin.css" />
    <script type="text/javascript" src="./scripts/styleswitcher.js"></script>
    <script type="text/javascript" src="./scripts/fadein.js"></script>
    Sorry i didn't post the code at first, i should have, for sure.
    Thanks for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.