ie gives a blank page with the below script, but fire fox works fine

[Revathi Balakrishnan]

Hi All
i am trying to change the font of my web page with user preference.i made use of cookie to get the user's preference, so that the font size selected will remain for the next session. i am changing the style sheet with the cookie set, The below shown is my code


[CODE=javascript]function readCookie(name ) {
alert("i am Reading the cookies");
var nameEQ = name + "=";
var ca = document.cookie .split(';');

for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c .length);
if (c.indexOf(name EQ) == 0)
return c.substring(nam eEQ.length,c.le ngth);
}

}
return null;
}


function setFont(c_value )
{

switch(c_value)
{
case 'big':

var navNam = navigator.appNa me;
var navVer= parseFloat(navi gator.appVersio n);

if (navNam.indexOf ('Microsoft') != -1 ) {
//IE
document.write( '<link rel="stylesheet " type="text/css" href="/imagesvariables _fonts_main_ie_ big.css" />');
} else {
//Netscape
document.write( '<link rel="stylesheet " type="text/css" href="/images/variables_fonts _main_net_big.c ss" />');
}





break;
case 'small':
var navNam = navigator.appNa me;
var navVer= parseFloat(navi gator.appVersio n);


if (navNam.indexOf ('Microsoft') != -1 ) {
//IE
document.write( '<link rel="stylesheet " type="text/css" href="/images/variables_fonts _main_ie.css" />');
} else {
//Netscape
document.write( '<link rel="stylesheet " type="text/css" href="/images/variables_fonts _main_ie.css" />');
}





break;


}

}

function toggleFont()
{
var value;
value=readCooki e("size");
var name;
var c_value;


switch(value)
{

case 'big':
alert("i am inside big");
document.cookie ='size=small; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';
setFont("small" );
break;

case 'small':
alert("i am inside small");
document.cookie ='size=big; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';
setFont("big");
break;

default:
alert("cookie not found!");
document.cookie ='size=small; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';


}

} [/CODE]
[HTML] //-->
</script>
<a class=pagenav href="#" onClick="javasc ript:toggleFont ();" >Text size</a></span>
[/HTML]


but the above code works in fire fox, but it is gives a blank page in ie,can any one help me with the issue?

[Revathi Balakrishnan]

when the user clicks on the Text size link it will call the Toggle font function, that will read the cookie value using readCookie function, if the cookie value set is small it will change it to big and the the call the setFont function,

My problem occurs in the setFont function, it goes inside the proper case of the set Font function, after that it gives a blank page in ie, but in fire fox it works fine,

Any of your advise would be much appreciated.

[Revathi Balakrishnan]

Even i can see the "downloadin g css file " info in the ie , but after that it gives the blank page.

[acoder]

You can't use document.write after the page has loaded. It will open the document again for writing which is not what you want. For using alternate stylesheets with cookies, see this link.

[acoder]

Two more quick points:

If all you want is to change a couple of style rules, use elem.style.colo r instead of changing the whole stylesheet.

Don't use browser detection. There's no need for it here.

[Revathi Balakrishnan]

Hi the link which you have given is really very useful.Timely help!!!!!!!!

i am working on it. i will send you the feed back soon. But i could not under
stand your second reply mail. Could you please elaborate that

[acoder]

Sorry, elem.style.colo r should have been elem.style.font Size. If you only need to change a few elements, then use JavaScript to change the font size - see link. This is a lot better than changing the whole stylesheet. If, however, there a quite a number of changes, it might be better to change the stylesheet. Good design helps here.

Secondly, browser detection (e.g. using navigator.appNa me) is often misused. It is rarely needed. Use feature detection instead- see this link for a good explanation.

[Revathi Balakrishnan]

i have changed my code to as shown below:

but still it is not working.Help me if you see any bug in it,
[HTML]<link rel="stylesheet " type="text/css" rel="stylesheet " title="big" href="/images/variables_fonts _main_ie_big.cs s"/>

<link rel="stylesheet " type="text/css" rel="stylesheet " title="small" href="/images/variables_fonts _main_ie.css"/>



<script type="text/JavaScript">




function readCookie(name ) {
alert("i am Reading the cookies");
var nameEQ = name + "=";
alert(nameEQ);
var ca = document.cookie .split(';');

for(var i=0;i < ca.length;i++) {

var c = ca[i];


while (c.charAt(0)==' ')
{
c = c.substring(1,c .length);
if (c.indexOf(name EQ) == 0)
return c.substring(nam eEQ.length,c.le ngth);
}

}
return null;
}



function setFont(c_value )
{
var i, a, main;

switch(c_value)
{
case 'big':

alert("i am inside big");

for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++)
{
alert(" i am inside for loop");
if(a.getAttribu te("rel").index Of("style") != -1&&a.getAttribu te("title"))
{
alert ("i am inside the if")

a.disabled = true;

if(a.getAttribu te("title") == c_value)
{

alert(title);
a.disabled = false;

}

}

}




break;
case 'small':
document.cookie ='size=big; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/'

alert("i am inside small");

for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++)
{
alert("i am inside the for loop");

if(a.getAttribu te("rel").index Of("style") != -1 && a.getAttribute( "c_value"))
{
a.disabled = true;

alert(c_value);

if(a.getAttribu te("title") == c_value)

alert(c_value);

a.disabled = false;
}
}

break;


default:

alert("Cookie not found!");

document.cookie ='size=big; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/'




}

}




var size;
var value;
var navNam = navigator.appNa me;
var navVer= parseFloat(navi gator.appVersio n);
value=readCooki e("size");
alert("value of font_size cookie is"+value);
setFont(value);

</script>[/HTML]

[Revathi Balakrishnan]

cookie value and style sheet title are not equal at any time, i don understand how it happens, and sorry for taking more space !

[acoder]

Did you follow the steps laid out in the link properly?

I notice you have duplicate rel attributes.

What happens with the code you've posted? Do you get any errors?

[Revathi Balakrishnan]

Thanks for the reply acoder, i have used duplicate rel attribute. after seeing your advice, i have removed them after that the code works fine with ie, to have different style sheets for ie and Fire fox i have read the link given here.


Thanks a lot for help...

and i have one more requirement, Is it possible to swap image with the help of style sheets ? if i have style sheet a1, i should use image a1, if i have style sheet a2 i should use image a2. Is it possibel to do it?

[acoder]

Yes, it should be possible. The best way would be to try it.

[Revathi Balakrishnan]

i have achived image swapping with the below code

<img  name="picture" src="icon1.gif" onClick="swapimage();"></a>

swapimage()
{
window.document.picture.src="icon2.gif";

}

This is a very small tip, but hope it would be useful for new joinees of the javascript world

[acoder]

I thought you were going to use stylesheets.

In your script, you should try to use IDs to refer to elements. See this simple example