Results 1 to 2 of 2

Thread: Changing font sizes needs extra clicks!

  1. #1
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing font sizes needs extra clicks!

    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 Code:
    <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>
    Last edited by Snookerman; 05-07-2009 at 04:13 PM. Reason: added [html] tags, added “Resolved” prefix

  2. #2
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Solved this with <body onload="....">

    Duh!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •