Alicorn comments on Luminosity (Twilight fanfic) discussion thread

[Alicorn]

That’s an elegantly constructed website.

Thanks :D On my to-do list, after I have buffers in place for all my works (hahahaha), is to code a black-text-on-white version that people can switch to, so there will be fewer objections to its use, because I really really hate ff.net.

Perhaps consider creating a shortened version of the title for the FF.net version btw. :: Title too long ::

I typed “title too long” in there on purpose; it’s not an automatic insertion. I guess I could truncate it, but it’s just so infuriating that I have to do things like that in order to play nice with the website. Hate hate hate.

[wnoise]

FWIW, I prefer white-on-black. Monitors aren’t paper.

[Alicorn]

I like it too, but people have complained. White-on-black will remain the default; I just want to make it possible to switch.

[JulianMorrison]

My reason for preferring plain black-on-white: makes it less conspicuous to read at work.

[Alicorn]

As an interim solution, try http://​​luminous.elcenia.com/​​story/​​luminosity##.html where ## is the chapter number. This is where I upload the files with the text, and then they go wherever else they need to be via file include.

[JulianMorrison]

Thanks. I did read you mentioning that trick, but it’s good to be reminded.

I see your posts appear via the RSS feed, which currently contains a title and a one sentence summary. If you changed the configuration to include the whole chapter text into the feed, that would neatly obviate the problem.

[Alicorn]

I’ll do a little testing and see if I can make it take file includes there. Pasting would leave the problem that the feed would require separate correction if I fix a typo or something.

Edit: I just tried a test of this and it didn’t work. If anyone knows how to make RSS feeds accept file includes, please let me know (it’d be useful for Elcenia, too! HTHT already sends the new comic page through the feed, but that’s just an image.)

[jimrandomh]

The best solution would be to put some Javascript links on the page that change the text and background colors when you clicked on them. The downside to this would be that it would revert to default every time you went to a different chapter, though.

That Javascript is something I could reasonably write in ten minutes after I get home from work tonight. I’ll do so and post it here unless someone produces a better solution before then.

[thomblake]

The downside to this would be that it would revert to default every time you went to a different chapter, though.

Well they’re all on the same domain, so it should be easy enough to cookie it up.

[Alicorn]

Thanks! I have, just barely, the coding skills to do this myself, and it was the solution I was planning to use when I got around to it—but it’d take me way more than ten minutes.

[jimrandomh]

This should do it. Put a copy of jquery-1.4.2.min.js in the same directory (jQuery is a Javascript library for keeping browser compatibility bugs at bay).

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
function setColorScheme(colorScheme)
{
    setCookie("colorScheme", colorScheme, 30);

    if(colorScheme=="whiteOnBlack")
    {
        $("body").css({
            "background-color": "black",
            "color": "white"
        });
    }
    else if(colorScheme=="blackOnWhite")
    {
        $("body").css({
            "background-color": "white",
            "color": "black"
        });
    }
}

$(document).ready(function()
{
    var cookie = getCookie("colorScheme");
    if(cookie)
        setColorScheme(cookie);
});

function setCookie(c_name,value,expiredays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

function getCookie(c_name)
{
    if (document.cookie.length>0)
    {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1)
        {
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        }
    }
    return "";
}
</script>

Background color: <a href="javascript:setColorScheme('blackOnWhite')">white</a> | <a href="javascript:setColorScheme('whiteOnBlack')">black</a>

This stores the color scheme in a cookie, so it’s preserved when you move between chapters. The setCookie and getCookie functions came from here. Given the example, this should be pretty easy to extend for things like changing text size and margins, if you are so inclined.

[Alicorn]

This appears to work perfectly! However, it looks like the default color scheme is black on white, and I’d like it to be the other way around—what do I change to make the black background default?

Also, is there any way for changing the color scheme to bring a different set of navigation buttons in? I made some white ones (not a complete set yet) which would look much nicer than the existing ones on the white background.

[jimrandomh]

That’s odd—if I’m understanding it correctly it’ll leave the page unchanged unless you click one of the links or have a cookie set. But it’s not handling the default case explicitly, so try replacing the $(document).ready section in the code above with this:

var defaultColorScheme = "whiteOnBlack";

$(document).ready(function()
{
    var cookie = getCookie("colorScheme");
    if(cookie && cookie != "")
        setColorScheme(cookie);
    else
        setColorScheme(defaultColorScheme);
});

To see what first-time visitors would see, clear your cookies. Otherwise it should remember what color it was last time.

[Alicorn]

Thanks again! :D

[jimrandomh]

Also, is there any way for changing the color scheme to bring a different set of navigation buttons in?

Yes. First, move the determination of which images to use into CSS, by making each navigation a div with its own CSS class, and making a style like

.blackBackground .navButtonNext {
    background-image: url("nextButtonBlack.png");
    width: 123px;
    height: 123px;
}

Add “class=blackBackground” to the tag. Make CSS classes like this for each of the buttons and each of the background colors. Then in setColorScheme, use

$("body").addClass("blackBackground");
$("body").removeClass("whiteBackground");

And the reverse, to change the class on the body tag.

[Alicorn]

Is there a way to make this happen without having to change how the nav buttons are coded in to the body of each page? I’m doing all the styling with file includes, but the “first/​prior/​next/​last” buttons are hardcoded into each page because the numbers change. Messing with all of them would be a medium-sized deal.

[jimrandomh]

I just looked at the site, and it’s failing to find jquery-1.4.2.min.js because it’s looking in /​chapters rather than /​. Add a ../​ to the

[Alicorn]

I just added the slash.

I am afraid I do not understand the rest of your instructions.

[Eliezer Yudkowsky]

I just added the slash.

Good! Now your fic is artistically complete as well.

[Oscar_Cunningham]

This comment has an entirely different meaning when you can see it’s in a fanfic thread, but can only see the first few words. ;)

[ata]

Heh, that was my first thought too. I clicked your comment in the Recent Comments sidebar, and, since it only shows one level of context, the first thing I saw was “I just added the slash.”

[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.

[thomblake]

If anyone knows how to make RSS feeds accept file includes, please let me know

In case anyone else is having this problem, I’ve posted one solution on my blog: Using SSI in XML for RSS

[thomblake]

I’ve had the same thought

[wedrifid]

Which is also far more appropriate in the context… it’s supposed to be dark and there is supposed to be red involved somewhere on the page!