PDA

View Full Version : Resolved Changing font sizes needs extra clicks!



Loggy
04-30-2009, 02:31 PM
I have a puzzle. Below is some very simple code that updates the font size for all elements on a page. I have not added the get_cookie or set_cooking scripts as they are pretty standard and the links at the bottom would need modifying.

When I link to another page that has the same header (ie it reads the cookies and tells me so), some default font is loaded first and the user needs to click the set font button to get the right font size. I can see the cookie changes and it is read correctly.

But the fonts printed by write.document() do change immediately which is correct!

This happens on FF, IE7, Chrome, Opera, Safari.

I can reset things by deleting the cookies.

Deleting the cache has no effect neither does setting the browser not to cache (by the meta statement that forces a complete load each time).

Note there is no size set anywhere except in the js...

Can anyone explain this bizarre behaviour?


<html><head>
<style>
body,td,p,div,span {font-family: Verdana;}
h1 {font-size:1.8em}
h2 {font-size:1.6em}
h3 {font-size:1.4em}
h4 {font-size:1.3em}
h5 {font-size:1.2em}
h6 {font-size:1.1em}
a.mainlinks:link {color: Black ; font-weight: bold; text-decoration: none; font-size: 1.0em;}
a.mainlinks:visited {color: Red ; font-weight: bold; text-decoration: none; font-size: 1.0em;}
a.mainlinks:active {color: Green ; font-weight: bold; text-decoration: none; font-size: 1.0em;}
a.mainlinks:hover {color: Blue ; font-weight: bold; text-decoration: none; font-size: 1.0em;}
a.seclinks:link {color: Black ; font-weight: bold; text-decoration: none; font-size: 0.8em;}
a.seclinks:visited {color: Red ; font-weight: bold; text-decoration: none; font-size: 0.8em;}
a.seclinks:active {color: Green ; font-weight: bold; text-decoration: none; font-size: 0.8em;}
a.seclinks:hover {color: Blue ; font-weight: bold; text-decoration: none; font-size: 0.8em; }
</style>
<script>
<!--
function changeFontSize(inc){
if(inc!=0){px=(parseInt(px.replace('px',''))+inc)+'px';}
for(i=0;i<alltags.length;i++) {
alltags[i].style['fontSize']=px;
}
set_cookie('size',px,30,'/', '', '');
}
function isnull(x){
if(typeof(x)=='undefined'||x==null||x==''||x.length==0){return true}else{return false}
}
document.write('Hello 1<br>');
// Set font size
alltags = document.getElementsByTagName('*');
var px=get_cookie('size');
if(isnull(px)){
document.write('Found no size cookie<br>');
px='10px';
set_cookie('size',px,30,'/', '', '');
}
changeFontSize(0);
document.write('Goodbye 1 px='+px+'<br>');
//-->
</script>
</head><body>
<p>Set <a class="mainlinks" href="javascript:changeFontSize(0)">default </a>, </a><a class=mainlinks href="javascript:changeFontSize(1)">bigger </a> or <a class="mainlinks" href="javascript:changeFontSize(-1)">smaller</a> font size</p>
<p>Another paragraph</p>
<p>A paragraph with no font-size set</p>
Body size<br><br>
<table><tbody><tr><td>
TD font size
</td></tr></tbody></table>
<div>DIV text</div>
<h1>H1 size</h1>
<h2>H2 size</h2>
<h3>H3 size</h3>
<h4>H4 size</h4>
<h5>H5 size</h5>
<h6>H6 size</h6>
<a class=mainlinks href="link1">A mainlinks</a><br><br>
<a class=seclinks href="link2">A seclinks</a>
</body></html>

Loggy
05-07-2009, 03:09 PM
Solved this with <body onload="....">

Duh!