Topic: JavaScript Styleswitcher
Kevin3824's photo
Wed 03/14/07 11:12 PM
Ok here is a test for the guru people here. I am working on a JavaScript
style switcher to allow a person to click a button on my website that
will implement a different CSS stylesheet for them so they can view the
same page with a different size text. It is part ot the accessibility
for the handicapped and disabled.

Here is the code I currently have for the JavaScript switcher:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
createCookie("currentstyle", title, 365);
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); 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++) {
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;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}

function styleswitcher_onload(){
var cookie = readCookie("currentstyle");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

function styleswitcher_unload(){
var title = getActiveStyleSheet();
createCookie("currentstyle", title, 365);
}

// To be run in the dispatcher

function styleswitcher(){

styleswitcher_onload();

var cookie = readCookie("currentstyle");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}


Can anyone tell me why it is not working? I believe it has something to
do with the title attribute of the link element not being recognized but
am unsure at this point.

no photo
Thu 03/15/07 04:55 AM
It looks like 8 separate functions - have you tried unit testing to see
which of the 8 functions is not behaving as expected?

Are any of these functions called separately from other (working) code,
possibly implying that those functions are known to be working properly?

no photo
Thu 03/15/07 05:10 AM
I don't know javascript well enough to help debug your code, but i'm
curious:

Setting aside the style-switcher for the moment, is it known that each
of the stylesheets you have does what you want?

I visited your site, and in firefox i try "View"->"Page
Style"->[selected stylesheet] and while i see your ss there (text_small,
text_xlarge, etc), manually selecting different sheets has no effect on
the page - is that caused by the problem in the styleswitcher code, or
is it a symptom of another problem (like improperly defined
stylesheets?)

no photo
Thu 03/15/07 05:45 AM
Do you have the access permissions set correctly for these stylesheets?

Kevin3824's photo
Thu 03/15/07 09:25 AM
I not only have access to changing the code at anytime I wrote it
originally. I will plug them all in manually and verify they all work
but they did when I wrote them. I actually found another way to do this
last night in PHP and ma reluctent to do it that way although it is only
five lines of code and does not require cookies at all it would require
me to change each page to .php instead of .html that would remove me
from the search engines entirely till they reindex the site.

That is why I was hoping one of the gurus on here would have my magical
answer. I will keep testing till I beat the problem to death as usual I
guess.

no photo
Thu 03/15/07 02:47 PM
Kevin, it looks the files "small.css" etc. are not accessible, or are
not placed where the code expects them to be. (Which i think for this
page is "http:...com/css/small.css").

I don't know if these files are loaded and used by the server, or if
they are supposed to be accessible to my browser on my machine, but i
can say that they are not available for public access at /css/small.css.
Maybe the files just aren't there, or maybe they are there but don't
have the right "file access permissions" set (for the files, or the
parent directory, etc).

no photo
Thu 03/15/07 02:49 PM
(i have a "feeling" that the code you posted is fine, and the problem
lies elsewhere, maybe in the stylesheets themselves, their location,
permissions etc, or maybe somewhere else altogether)

no photo
Thu 03/15/07 03:03 PM
I meant /css/text_s.css

Kevin3824's photo
Thu 03/15/07 03:10 PM
Thanks dude I got it working it was a problem with the IDs within the
css I currently have it working on myhome page only now I have to go
back and put it into the other pages then go back and pretty up the
pages in generalso they look the same when the switcher changes them to
the larger font. I really should have done it with PHP it would have
been more reliable as well as easier but to do that I would have to
change all the file names and that would in effect remove my pages from
the search engines entirely.

no photo
Fri 03/16/07 03:20 AM
Kevin,

>>> PHP it would have been more reliable as well as easier but to do that I would have to change all the file names and that would in effect remove my pages from the search engines entirely

Depending on what software you are using to run your webserver, you
may have the ability to configure your software to look for an parse php
code in "*.html" files.

This may (?) slow down the serving of ordinary .html files on your site,
some imperceptible (?) amount, but it would allow you to switch over to
your php solution without effecting your google ranking.

Kevin3824's photo
Sun 03/18/07 11:29 AM
I agree the more reliable way to do it was with PHP. If you think about
it though. as soon as you embed php code into a document you must change
the extension of that document to .php from .htm or .html. The reason
being is with the document having htm or html extensions it is never
parsed. If a document has a .php extension however it is parsed by the
php processor on the server. If it encounters another language or script
it will send it out for processing and await the results to come back in
html prior to delivering the finished html page to the client user.

I may not have stated it very clearly here but basically if you want to
use php within an html document you need to change the extension to .php
for it to be parsed correctly.

I am currently hosting on what is knkown as a (LAMP)Linux + Apache +
MySQL + PHP environment as it is the preferred development environment
worldwide.

no photo
Sun 03/18/07 05:20 PM
Kevin,

I understand that the 'normal' way to do things is to rename your file
to .php, and depending on how your server is set up, it might (or might
not) be the 'only' way to do things. I'm also under the impression that
people frown upon the idea of parsing php within .html.

All i was trying to say is that with some systems it is -possible- to
configure your system to parse php within html. If you really value
your google page rankings, and really want to switch to php within
.html, it is possible on some systems.

I just wanted you to know all your options, even if there are reasons to
reject this option.

Excerpted from elsewhere:
"
To make your .htm or .html pages process like they were .php, just add
this line to your .htaccess file:
AddType application/x-httpd-php .html .php .htm
"

Kevin3824's photo
Tue 03/20/07 04:51 PM
I caught that as well I have not asked my current webhost for that at
this point. I do not have access to the htaccess file.

The hosting company I deal with I have been very spoiled with. Recently,
though my favorite person to talk to at my web host was put into the
hospital and may not be back to work for a month or more. This makes me
feel awkward if I ask for something different of the people currently
covering for him. I do not want him to think I was trying to pull a fast
one. The people that are covering for him are not nearly as
knowledgeable as he is. He actually owns one of the 12 DNS root servers.
That makes him a very powerful ally to have in my corner. I can't wait
for him to get back to work. I am planning on implementing alot of new
things on my site to generate traffic and business here. My statistic
have been increasing exponentially since January on my site. I believe
that within the next few months my site will be flooded with traffic and
work for me as well. I actually have set a goal in my head of a million
pageviews in a month. I think I will achieve that goal within the next
few months maybe 6 or less.