Resize text onLoad

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Lars Forslin

    Resize text onLoad

    Hi,
    I am configurating this guestbook that shows text way too big. I have tried
    with style sheets and font tags, but they are ignored (not the font, but the
    size). I figure a javascript could do it, but I haven't found an applicable
    script anywhere. I do think it would be rather straightforward though. I
    want the text to be set to x-small (or a relative zoom level) immediately on
    load. Anyone that has a script ready?

    Regards,

    --
    Lars Forslin

    Connect your stack you use everyday to automate your web development. 100+ actions and integrations - get started in minutes.


    "Doing time on Earth"

    *************** ***********


  • Lasse Reichstein Nielsen

    #2
    Re: Resize text onLoad

    "Lars Forslin" <lars.forslin_r emove_this_@hom e.se> writes:
    [color=blue]
    > I am configurating this guestbook that shows text way too big. I have tried
    > with style sheets and font tags, but they are ignored (not the font, but the
    > size).[/color]

    Probably because the code contains something like <font size="+7">.
    If that is the case, drop the crap. It's either ancient or written
    by somebody not familiar with modern web design.

    Alternatively, it might contain elements with an attribute
    style="font-size:huge"
    or something.
    [color=blue]
    > I figure a javascript could do it, but I haven't found an applicable
    > script anywhere. I do think it would be rather straightforward though. I
    > want the text to be set to x-small (or a relative zoom level) immediately on
    > load. Anyone that has a script ready?[/color]

    Guesses, if it is font tags::

    1) find font tags. Remvove the size attribute:
    <script type="text/javascript">
    function removeFont(){
    var fonts = document.getEle mentsByTagName( "font");
    for (var i=0;i<fonts.len gth;i++) {
    var font = fonts[i];
    font.size = "";
    font.setAttribu te("size","");
    }
    }
    </script>

    2) find and remove font tags using DOM:
    <script type="text/javascript">
    function removeFont(){
    var fonts = document.getEle mentsByTagName( "font");
    for (var i=0;i<fonts.len gth;i++) {
    var font = fonts[i];
    var next = font.nextSiblin g;
    var parent = font.parentNode ;
    while(font.hasC hildNodes) {
    var last = font.lastChild;
    parent.insertBe fore(last,next) ;
    next = last;
    }
    }
    }
    </script>

    Code not tested (no pages with <font> available).

    Run it from the onload handler.


    /L
    --
    Lasse Reichstein Nielsen - lrn@hotpop.com
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
    'Faith without judgement merely degrades the spirit divine.'

    Comment

    • Lars Forslin

      #3
      Re: Resize text onLoad

      Thanks a lot for the suggestions and swift answers. After I wrote I found
      this script which I implemented so it looks like this:

      <body style="backgrou nd-color:transpare nt" class="brodtext ">
      <INPUT ID="zoomfactor " TYPE="text" VALUE="50" SIZE="3" MAXLENGTH="4"
      onkeyup="update Zoom()">%

      <DIV ID="container" >

      <!--- Don't modify the cgi tag --->
      <cgi>
      <!--- Don't modify the cgi tag --->
      </DIV>
      <SCRIPT LANGUAGE="JavaS cript">
      <!--
      function updateZoom() {
      container.style .zoom = zoomfactor.valu e + "%";
      }
      // -->
      </SCRIPT>

      <P align="center"> <a href="javascrip t:history.back( 1)" class="adress"> Back
      to guestbook form</a>
      </p>

      </body>
      It does what it should, it works, but I don't want the user to have to write
      in a value. I want this to happen onload automatically with a standard value
      of 70%. Can you rewrite this for me?
      Many thanks
      Lars


      "Lasse Reichstein Nielsen" <lrn@hotpop.com > skrev i meddelandet
      news:k73soi7h.f sf@hotpop.com.. .[color=blue]
      > "Lars Forslin" <lars.forslin_r emove_this_@hom e.se> writes:
      >[color=green]
      > > I am configurating this guestbook that shows text way too big. I have[/color][/color]
      tried[color=blue][color=green]
      > > with style sheets and font tags, but they are ignored (not the font, but[/color][/color]
      the[color=blue][color=green]
      > > size).[/color]
      >
      > Probably because the code contains something like <font size="+7">.
      > If that is the case, drop the crap. It's either ancient or written
      > by somebody not familiar with modern web design.
      >
      > Alternatively, it might contain elements with an attribute
      > style="font-size:huge"
      > or something.
      >[color=green]
      > > I figure a javascript could do it, but I haven't found an applicable
      > > script anywhere. I do think it would be rather straightforward though. I
      > > want the text to be set to x-small (or a relative zoom level)[/color][/color]
      immediately on[color=blue][color=green]
      > > load. Anyone that has a script ready?[/color]
      >
      > Guesses, if it is font tags::
      >
      > 1) find font tags. Remvove the size attribute:
      > <script type="text/javascript">
      > function removeFont(){
      > var fonts = document.getEle mentsByTagName( "font");
      > for (var i=0;i<fonts.len gth;i++) {
      > var font = fonts[i];
      > font.size = "";
      > font.setAttribu te("size","");
      > }
      > }
      > </script>
      >
      > 2) find and remove font tags using DOM:
      > <script type="text/javascript">
      > function removeFont(){
      > var fonts = document.getEle mentsByTagName( "font");
      > for (var i=0;i<fonts.len gth;i++) {
      > var font = fonts[i];
      > var next = font.nextSiblin g;
      > var parent = font.parentNode ;
      > while(font.hasC hildNodes) {
      > var last = font.lastChild;
      > parent.insertBe fore(last,next) ;
      > next = last;
      > }
      > }
      > }
      > </script>
      >
      > Code not tested (no pages with <font> available).
      >
      > Run it from the onload handler.
      >
      >
      > /L
      > --
      > Lasse Reichstein Nielsen - lrn@hotpop.com
      > DHTML Death Colors:[/color]
      <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=blue]
      > 'Faith without judgement merely degrades the spirit divine.'[/color]


      Comment

      • Lars Forslin

        #4
        Re: Resize text onLoad

        As you might suspect I am a novice in this field. I took a look at the
        scripts you provided and I have a few questions concerning the first script:
        1) Where do I place it? In <head> or <body>?
        2) Am I supposed to write the desired font size in: font.size = "";?
        3) What about: font.setAttribu te("size",""); - should I enter something
        here?
        Regards,
        Lars

        "Lars Forslin" <lars.forslin_r emove_this_@hom e.se> skrev i meddelandet
        news:0uGNb.7844 5$dP1.192863@ne wsc.telia.net.. .[color=blue]
        > Thanks a lot for the suggestions and swift answers. After I wrote I found
        > this script which I implemented so it looks like this:
        >
        > <body style="backgrou nd-color:transpare nt" class="brodtext ">
        > <INPUT ID="zoomfactor " TYPE="text" VALUE="50" SIZE="3" MAXLENGTH="4"
        > onkeyup="update Zoom()">%
        >
        > <DIV ID="container" >
        >
        > <!--- Don't modify the cgi tag --->
        > <cgi>
        > <!--- Don't modify the cgi tag --->
        > </DIV>
        > <SCRIPT LANGUAGE="JavaS cript">
        > <!--
        > function updateZoom() {
        > container.style .zoom = zoomfactor.valu e + "%";
        > }
        > // -->
        > </SCRIPT>
        >
        > <P align="center"> <a href="javascrip t:history.back( 1)" class="adress"> Back
        > to guestbook form</a>
        > </p>
        >
        > </body>
        > It does what it should, it works, but I don't want the user to have to[/color]
        write[color=blue]
        > in a value. I want this to happen onload automatically with a standard[/color]
        value[color=blue]
        > of 70%. Can you rewrite this for me?
        > Many thanks
        > Lars
        >
        >
        > "Lasse Reichstein Nielsen" <lrn@hotpop.com > skrev i meddelandet
        > news:k73soi7h.f sf@hotpop.com.. .[color=green]
        > > "Lars Forslin" <lars.forslin_r emove_this_@hom e.se> writes:
        > >[color=darkred]
        > > > I am configurating this guestbook that shows text way too big. I have[/color][/color]
        > tried[color=green][color=darkred]
        > > > with style sheets and font tags, but they are ignored (not the font,[/color][/color][/color]
        but[color=blue]
        > the[color=green][color=darkred]
        > > > size).[/color]
        > >
        > > Probably because the code contains something like <font size="+7">.
        > > If that is the case, drop the crap. It's either ancient or written
        > > by somebody not familiar with modern web design.
        > >
        > > Alternatively, it might contain elements with an attribute
        > > style="font-size:huge"
        > > or something.
        > >[color=darkred]
        > > > I figure a javascript could do it, but I haven't found an applicable
        > > > script anywhere. I do think it would be rather straightforward though.[/color][/color][/color]
        I[color=blue][color=green][color=darkred]
        > > > want the text to be set to x-small (or a relative zoom level)[/color][/color]
        > immediately on[color=green][color=darkred]
        > > > load. Anyone that has a script ready?[/color]
        > >
        > > Guesses, if it is font tags::
        > >
        > > 1) find font tags. Remvove the size attribute:
        > > <script type="text/javascript">
        > > function removeFont(){
        > > var fonts = document.getEle mentsByTagName( "font");
        > > for (var i=0;i<fonts.len gth;i++) {
        > > var font = fonts[i];
        > > font.size = "";
        > > font.setAttribu te("size","");
        > > }
        > > }
        > > </script>
        > >
        > > 2) find and remove font tags using DOM:
        > > <script type="text/javascript">
        > > function removeFont(){
        > > var fonts = document.getEle mentsByTagName( "font");
        > > for (var i=0;i<fonts.len gth;i++) {
        > > var font = fonts[i];
        > > var next = font.nextSiblin g;
        > > var parent = font.parentNode ;
        > > while(font.hasC hildNodes) {
        > > var last = font.lastChild;
        > > parent.insertBe fore(last,next) ;
        > > next = last;
        > > }
        > > }
        > > }
        > > </script>
        > >
        > > Code not tested (no pages with <font> available).
        > >
        > > Run it from the onload handler.
        > >
        > >
        > > /L
        > > --
        > > Lasse Reichstein Nielsen - lrn@hotpop.com
        > > DHTML Death Colors:[/color]
        > <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=green]
        > > 'Faith without judgement merely degrades the spirit divine.'[/color]
        >
        >[/color]


        Comment

        Working...