By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,886 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

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

P: 40
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


Expand|Select|Wrap|Line Numbers
  1. function readCookie(name) {
  2.         alert("i am Reading the cookies");
  3.         var nameEQ = name + "=";
  4.         var ca = document.cookie.split(';');
  5.  
  6.         for(var i=0;i < ca.length;i++) {
  7.               var c = ca[i];
  8.              while (c.charAt(0)==' ')
  9.                 {
  10.                 c = c.substring(1,c.length);
  11.                 if (c.indexOf(nameEQ) == 0)
  12.                 return c.substring(nameEQ.length,c.length);
  13.                }
  14.  
  15. }
  16. return null;
  17. }
  18.  
  19.  
  20. function setFont(c_value)
  21. {
  22.  
  23. switch(c_value)
  24. {
  25. case 'big':
  26.  
  27. var navNam = navigator.appName;
  28. var navVer= parseFloat(navigator.appVersion);
  29.  
  30. if (navNam.indexOf('Microsoft') != -1 ) {
  31.         //IE 
  32.         document.write('<link rel="stylesheet" type="text/css" href="/imagesvariables_fonts_main_ie_big.css" />');
  33. }    else {
  34.         //Netscape
  35.         document.write('<link rel="stylesheet" type="text/css" href="/images/variables_fonts_main_net_big.css" />');
  36. }
  37.  
  38.  
  39.  
  40.  
  41.  
  42. break;
  43. case 'small':
  44. var navNam = navigator.appName;
  45. var navVer= parseFloat(navigator.appVersion);
  46.  
  47.  
  48. if (navNam.indexOf('Microsoft') != -1 ) {
  49.         //IE 
  50.         document.write('<link rel="stylesheet" type="text/css" href="/images/variables_fonts_main_ie.css" />');
  51. }    else {
  52.         //Netscape
  53.         document.write('<link rel="stylesheet" type="text/css" href="/images/variables_fonts_main_ie.css" />');
  54. }
  55.  
  56.  
  57.  
  58.  
  59.  
  60. break;
  61.  
  62.  
  63. }
  64.  
  65. }
  66.  
  67. function toggleFont()
  68. {
  69. var value;
  70. value=readCookie("size");
  71. var name;
  72. var c_value;
  73.  
  74.  
  75. switch(value)
  76. {
  77.  
  78. case 'big':
  79. alert("i am inside big");
  80. document.cookie ='size=small; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';
  81. setFont("small");
  82. break;
  83.  
  84.  case 'small':
  85.  alert("i am inside small");
  86.   document.cookie ='size=big; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';
  87.   setFont("big");
  88.   break;
  89.  
  90. default:
  91. alert("cookie not found!");
  92. document.cookie ='size=small; expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/';
  93.  
  94.  
  95. }
  96.  
  97. }    
[HTML] //-->
</script>
<a class=pagenav href="#" onClick="javascript: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?
Aug 3 '08 #1
Share this Question
Share on Google+
13 Replies


P: 40
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.
Aug 3 '08 #2

P: 40
Even i can see the "downloading css file " info in the ie , but after that it gives the blank page.
Aug 3 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Aug 3 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Two more quick points:

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

Don't use browser detection. There's no need for it here.
Aug 3 '08 #5

P: 40
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
Aug 4 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Sorry, elem.style.color should have been elem.style.fontSize. 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.appName) is often misused. It is rarely needed. Use feature detection instead- see this link for a good explanation.
Aug 4 '08 #7

P: 40
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.css"/>

<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(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}

}
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.getElementsByTagName("link")[i]); i++)
{
alert(" i am inside for loop");
if(a.getAttribute("rel").indexOf("style") != -1&&a.getAttribute("title"))
{
alert ("i am inside the if")

a.disabled = true;

if(a.getAttribute("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.getElementsByTagName("link")[i]); i++)
{
alert("i am inside the for loop");

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("c_value"))
{
a.disabled = true;

alert(c_value);

if(a.getAttribute("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.appName;
var navVer= parseFloat(navigator.appVersion);
value=readCookie("size");
alert("value of font_size cookie is"+value);
setFont(value);

</script>[/HTML]
Aug 4 '08 #8

P: 40
cookie value and style sheet title are not equal at any time, i don understand how it happens, and sorry for taking more space !
Aug 4 '08 #9

acoder
Expert Mod 15k+
P: 16,027
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?
Aug 4 '08 #10

P: 40
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?
Aug 5 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Yes, it should be possible. The best way would be to try it.
Aug 5 '08 #12

P: 40
i have achived image swapping with the below code
Expand|Select|Wrap|Line Numbers
  1. <img  name="picture" src="icon1.gif" onClick="swapimage();"></a>
  2.  
  3. swapimage()
  4. {
  5. window.document.picture.src="icon2.gif";
  6.  
  7. }
  8.  
This is a very small tip, but hope it would be useful for new joinees of the javascript world
Aug 9 '08 #13

acoder
Expert Mod 15k+
P: 16,027
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
Aug 9 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.