jimrandomh comments on Luminosity (Twilight fanfic) discussion thread - Less Wrong

12 Post author: FAWS 25 August 2010 08:49AM

You are viewing a comment permalink. View the original post to see all comments and the full post content.

Comments (435)

You are viewing a single comment's thread. Show more comments above.

Comment author: jimrandomh 02 September 2010 01:39:46PM 3 points [-]

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.

Comment author: thomblake 02 September 2010 05:32:42PM 1 point [-]

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.

Comment author: Alicorn 02 September 2010 02:01:41PM 1 point [-]

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.

Comment author: jimrandomh 03 September 2010 12:15:37AM *  3 points [-]

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.

Comment author: Alicorn 03 September 2010 03:34:39PM *  2 points [-]

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.

Comment author: jimrandomh 03 September 2010 03:42:26PM *  2 points [-]

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.

Comment author: Alicorn 03 September 2010 03:56:48PM 2 points [-]

Thanks again! :D

Comment author: jimrandomh 03 September 2010 04:42:17PM *  1 point [-]

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

Comment author: Alicorn 03 September 2010 05:22:50PM 1 point [-]

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.

Comment author: jimrandomh 03 September 2010 05:43:39PM 0 points [-]

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 <script src=...> tag or copy it into /chapters. That appears to have broken the color-changing and the default color.

You can edit images in Javascript without having classes or IDs to refer to them, using an attribute selector, like this:

$("[src*='nextBlack.png']").each(
function (index, img) {
img.src = '../images/nextWhite.png'
}
);

This finds every image whose src attribute contains "nextBlack.png" as a substring, and changes it to ../images/nextWhite.png. Adjust URLs according to the particular names and locations of the images you're using, and put this in setColorScheme.

Comment author: Alicorn 03 September 2010 05:47:20PM 2 points [-]

I just added the slash.

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

Comment author: Oscar_Cunningham 03 September 2010 06:50:27PM 6 points [-]

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. ;)

Comment author: ata 03 September 2010 07:16:14PM 1 point [-]

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

Comment author: Eliezer_Yudkowsky 03 September 2010 07:08:17PM 11 points [-]

I just added the slash.

Good! Now your fic is artistically complete as well.

Comment author: jimrandomh 03 September 2010 11:21:22PM 2 points [-]

Ok, so the goal is to change the src attribute of the <img> tags in setColorScheme, when those <img> 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.

Comment author: Alicorn 03 September 2010 11:36:02PM *  1 point [-]

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.