jimrandomh comments on Luminosity (Twilight fanfic) discussion thread

[jimrandomh]

Ok, so the goal is to change the src attribute of the

tags in setColorScheme, when those

tags don’t have classes or IDs to refer to them by. So the first thing to do is to add a class to them so we can refer to them by something other than the thing we’re changing. We’ll do that with calls to the markImagesWithClass function in the $(document).ready function. Then in setColorScheme, find all the images with a particular class, and change their src attribute to point to the right version of the image.

function markImagesWithClass(imageName, className)
{
    $("[src*='" + imageName + "']").each(
        function (index, img) {
            $(img).addClass(className);
        }
    );
}

function changeImage(imageName, className)
{
    $("." + className).each(
        function (index, img) {
            img.src = imageName;
        }
    );
}

function setColorScheme(colorScheme)
{
    setCookie("colorScheme", colorScheme, 30);

    if(colorScheme=="whiteOnBlack")
    {
        $("body").css({
            "background-color": "black",
            "color": "white"
        });
        changeImage("first.png", "firstButton");
        changeImage("next.png", "nextButton");
        changeImage("prior.png", "priorButton");
        changeImage("last.png", "lastButton");
    }
    else if(colorScheme=="blackOnWhite")
    {
        $("body").css({
            "background-color": "white",
            "color": "black"
        });
        changeImage("firstWhite.png", "firstButton");
        changeImage("nextWhite.png", "nextButton");
        changeImage("priorWhite.png", "priorButton");
        changeImage("lastWhite.png", "lastButton");
    }
}

$(document).ready(function()
{
    markImagesWithClass("first.png", "firstButton");
    markImagesWithClass("next.png", "nextButton");
    markImagesWithClass("prior.png", "priorButton");
    markImagesWithClass("last.png", "lastButton");

    var cookie = getCookie("colorScheme");
    if(cookie && cookie != "")
        setColorScheme(cookie);
    else
        setColorScheme(defaultColorScheme);
});

Replace the existing $(document).ready and setColorScheme functions with these. Adjust the file names to match the actual names and paths of your images, and add calls to markImagesWithClass and changeImage for any other images you want to change.

[Alicorn]

Can you point out which references to images should contain the paths to the white buttons and which should contain the paths to the black buttons? I’m kind of lost.

Edit: http://​​luminous.elcenia.com/​​images/​​ is the directory that holds all the buttons. I’m adding white versions (their names start with “w”) as I make them, but I can change the names of everything except the four navigational buttons easily.

Moar Edit: White buttons all made and uploaded.

[jimrandomh]

Ok, so change the line in the setColorScheme function that says

changeImage("firstWhite.png", "firstButton");

to instead say

changeImage("/images/wfirst.png", "firstButton");

That line is in a block of four similar-looking lines; change the other 3 lines in the block the same way. There are a total of three places with blocks of similar lines; to make another image change when the color scheme changes, you’ll have to visit all three.

In the setColorScheme function, there are a bunch of calls to changeImage. The first call is a file name (either for the black version, or the white version); the second argument is a class. (A class is a tag that can be applied to an HTML element. It doesn’t do anything directly, but CSS stylesheets and Javascript functions often refer to “all elements with tag asdf”; the notation for that is ”.asdf”). The markImagesWithClass function searches for images with a given file name, and adds a class (tag) to them; the changeImage function searches for images with a given class, and changes their file name.

The third block of similar-looking calls is to markImagesWithClass, in $(document).ready. The first argument is the original file name, ie the file name as it appears in the original HTML. But it only needs a substring, so you can leave off prefixes like /​images/​ there.

[Alicorn]

Implemented! Thank you so much, you’ve been an immense help!

[jimrandomh]

It was no trouble. Keep up the good writing!

[Alicorn]

A reader has detected a bug, which I didn’t think to check for when I saw it worked on one page: On chapter pages (of the form http://​​luminous.elcenia.com/​​chapters/​​ch1.shtml), the buttons are the black versions and the background is white. This won’t change with clicking the color change button imagemap I made. Every other page appears to work. The only thing I can think of that’s different is the navigation buttons—I don’t know why they’d be breaking it, though, unless it’s the div tag I used to center them. Halp!

[jimrandomh]

The slash is missing from the

[Alicorn]

That accursed piece of punctuation evaporated or something. I know I put it there. People made fun of my comment announcing that I put it there. *grumble*

[jimrandomh]

It’s called a regression; it happens when you make changes on two different copies of the same project, and then overwrite one with the other instead of merging them. It can be avoided by using a version control tool such as SVN or git.

I’ve also noticed another regression: the line

var defaultColorScheme = "whiteOnBlack";

from this comment got lost in a merge.

[Alicorn]

Oh, I know when it happened now. Anyway, now it works, huzzah! You are as before quite awesome and helpful.

[jimrandomh]

The defaultColorScheme is still missing, which makes it broken, but only for people who don’t have a cookie set with a color scheme.

[Alicorn]

Gorramit. It functions now, I’m not going to touch it again. It will only break in a different way.