Forum Moderators: open
I'd hoped this would be more straightforward than it is. The code below does not throw up errors in the Firefox Javascript Console, but nor does it actually DO anything to the page in question. In addition to just sitting there like a limp fish, it causes FF's display bar to read "Waiting for localhost" in perpetuity as soon as (a) the link is clicked, or (b) the page is reloaded.
In IE, the script also throws up no errors, but again, has no apparent effect.
If anyone would be so kind as to briefly go over the code and see if anything jumps out as blatantly amateurish, I would appreciate the advice.
Thanks.
js code:
function changeFont(newsize) {
var size = new Array('x-s','s','m','l','x-l');
var font = new Array('8px','10px','12px','14px','16px');
for (i=0; i<size.length; i++) {
if(newsize == size[i]) {
if (document.styleSheets[0].rules) {
document.styleSheets[0].rules[2].style.fontSize=font[i];
}
else if (document.styleSheets[0].cssRules) {
document.styleSheets[0].cssRules[2].style.fontSize=font[i];
}
else {
alert('This script does not work in your browser');
return;
}
}
}
}
First, why not send the actual font-size value instead of creating two arrays and comparing?
<a href="javascript: changeFont('10px')">s</a>
etc...
Now you can plug the value right in.
Now, to the function. If you simply add an id attribute to your body tag, you can change it's styles using getElementById to reference it.
<body id="body_id">...
function changeFont(newsize) {
if (document.getElementById("body_id").style.fontSize = newsize){
return true;
} else {
alert("This script does not work in your browser");
return false;
}
}
Birdman
I did think of using body ID as an option, but it conflicts with other functionality on the page (variable passing in my URLs dynamically writes an ID to the body tag in order to set a 'current' button on a css menu. Since there are 6 options for what the body ID could be, I thought it easier to go into the styleSheets array and alter the style, rather than write six different references to six different body IDs.)
I plan to follow your advise, however, and just directly pass the PX value and avoid the arrays altogether.
As an update, I've got the switcher working now. Turns out my problem was the index I was using to alter the style (had it set to alter the preferred stylesheet, but was viewing the page with an alternate stylesheet, so the effect, obviously, wasn't showing up. Duh.)
Here's a follow up question: If I want to store the selected value in a cookie, should I create a NEw cookie, or can I append it to an existing cookie (that stores the user selected stylesheet)?
You're welcome!
>>rather than write six different references to six different body IDs
In that case, you could simply attach the id to the html tag instead. Or just do it the way you are now ;) I thought I read that the stylesheets object wasn't as well supported, but I'm not sure about that.
>>If I want to store the selected value in a cookie, should I create a NEw cookie, or can I append it to an existing cookie (that stores the user selected stylesheet)?
Both will work. New cookie seems easier to me.
Re: Referencing the body element's style object..
The good old fashioned way would be:
document.body.styleI agree that there may be problems with that somewhere. I reckon the foolproof, DOM way, without using an id would be:
document.getElementsByTagName('body')[0].styleNow for the Voice of Dissent.
if (document.getElementById("body_id").style.fontSize = newsize)
All being well, that statement will make the assignment, but, if for any reason the browser doesn't like it, it will produce an error - rather than evaluating false. The only error is likely to be that
getEl..function changeFont(newsize) {
if(document.getElementById)
return document.getElementByTagName('body')[0].style.fontSize = newsize;
else
alert("This script does not work in your browser");
return false;
}
Ah, very good! I forgot about accessing the document.body directly. That should solve the problem of having variable ids on the body tag.
>> Now for the Voice of Dissent.
:) I had a feeling that little error check was wrong.
DrDoc shows a cross-browser method in the thread below. It uses the document.body.style method that Bernard mentioned. See msg. #9...
[webmasterworld.com...]
document.getElementsByTagName('body')[0].style
This seems to be working perfectly, with the added bonus of being simple and to the point. So far it's not causing problems in FF, or IE back to 5.0, which is pretty good coverage.
Thank you both for the help. It's easy to get mired down in the complexity of new (for you) stuff, and skim blissfully over the most simple of solutions. Thanks for being there.
