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

Article Navigation

Comments (435)
Tags: luminosity fanfiction twilight fiction

Comments (435)

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

Comment author: Alicorn 02 September 2010 01:22:56PM *  3 points [-]

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

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: 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: thomblake 02 September 2010 08:45:52PM 2 points [-]

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

Powered by Reddit Powered by Reddit