Alternate stylesheets problem

masonbarge · #1 (**permalink**) May 8th, 2006, 18:23

Background: I have two sets of alternate stylesheets. "regularfont.css" is the default font size, and "largefont.css" changes the font size to a larger font. There is nothing on the two sheets except font sizes. "checkoff" is a default, while "checkon" brings up the following css hover style that unhides the full text of an article:

Code: Select all

/* style_d_checkon */

div#links a span {display:none; width: 462px;}
div#links a:visited span{display: none;}
div#links a:hover  span{display: block; width:457px; height: auto;  z-index: 2; padding: 0 2px 2px 10px; margin-left: -10px; float: right; background-color: #fdfdf0;}

Code: Select all

<head>
<title>Daily Health Report</title>
<link rel="stylesheet" href="stylea.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="style_b_normalfont.css" type="text/css" title="normalfont">
<link rel="stylesheet" type="text/css" href="style_d_checkoff.css" title="checkoff">
<link rel="alternate stylesheet" type="text/css" href="style_b_largefont.css" title="largefont">
<link rel="alternate stylesheet" type="text/css" href="style_d_checkon.css" title="checkon">
<SCRIPT language="JavaScript" SRC="javascript1.js"></SCRIPT>
</head>
<body>
...
<a href="javascript:activateStyleSheet('largefont')" class="menu"><img src="images/largeprint.png" width="120" height="35" alt="" border="0"></a>
...
<a href="javascript:activateStyleSheet('normalfont')" class="menur">               
 <img src="images/regularprint.png" width="120" height="35" alt="" border="0"> </a>
...
            <div id="menu1">
   <a href="javascript:activateStyleSheet('checkoff')" class="menu"><img src="images/autoexpand_off.png" id="imgl5" width="118" height="33" alt="" border="0"></a>

    <a href="javascript:activateStyleSheet('checkon')" class="menu"><img src="images/autoexpand_on.png"  id="imgl5" width="118" height="33" alt="" border="0"></a>
             </div>

The javascript sheet has:

Code: Select all

<!--

function activateStyleSheet(title){
    var c, i, t;
    if(!(c = document.styleSheets)) {return;}
    i = c.length;
    while(i--){
        if((t = c[i].title)){
            c[i].disabled = (title != t);
        }
    }
}
//-->

Now this all works just fine except for one thing. Depending on how I arrange the main/alternate stylesheets in the <head>, and depending on the browser, either clicking on "largefont" will activate "checkon", or vice versa. In other words, no problem clicking "checkon", but if you click "largefont" you get both alternate style sheets activated.

As it stands now, in IE clicking "checkon" activates "largefont", although you can then click "normalfont" and everything is right. In FF, it's a little worse. You still get "checkon" when you click "largefont", but also, if you then click "checkoff" you return to "normalfont".

In IE:
largefont --> largefont (and checkoff, the main ss)
checkon --> checkon and largefont
After you click checkon:
normalfont --> normalfont

In FF:
largefont --> largefont
checkon --> checkon and largefont

However, after you click checkon,
checkoff--> checkoff and normalfont

FF also defaults to checkon instead of checkoff

herlp!

darryladie · #2 (**permalink**) May 13th, 2006, 15:23

Use this method:

I got it working on my website:

http://www.alistapart.com/articles/alternate/

ukgeoff · #3 (**permalink**) May 13th, 2006, 17:13

The following suggestion doesn't require alternative style stylesheets but does rely on you having used ems to set your font sizes.

If you have done so, then the only thing you need to do with the JavaScript is to adjust the font size for the body tag and everything else will fall into place.

masonbarge · #4 (**permalink**) May 17th, 2006, 17:56

Quote:

Originally Posted by darryladie

Use this method:

I got it working on my website:

http://www.alistapart.com/articles/alternate/

Have you got two of them? I can do one set of alternates fine (actually one double alternate).

At any rate, I just bagged the second one, which was a little too gimmicky and I think would have been confusing. I'll wait until I have the time to figure out and implement a nice big floating "tip"-like box. The alternate font sizes, on the other hand, will be a nice feature for people with visual challenges.

masonbarge · #5 (**permalink**) May 17th, 2006, 18:01

Quote:

Originally Posted by ukgeoff

The following suggestion doesn't require alternative style stylesheets but does rely on you having used ems to set your font sizes.

If you have done so, then the only thing you need to do with the JavaScript is to adjust the font size for the body tag and everything else will fall into place.

That's a great idea. I think I'd rather keep a little more control -- and besides, all the work is done -- but I'll keep it in mind for the future.

If you only have one instance, alternate stylesheets function well. I've had a lot of trouble with more than one instance of the same script of any kind, especially on Firefox. See my post from a few days ago, when I managed to get different javascripts running on different browsers from the same webpage!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08
Alternate Colours	mikka23	Web Page Design	5	Nov 21st, 2006 16:02
Need an Alternate Host	PortlandCompGuy	Hosting & Domains	1	Aug 21st, 2006 21:15
Alternative stylesheets	benbacardi	Web Page Design	18	May 14th, 2004 13:22

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Alternate stylesheets problem