Loading ...
Sorry, an error occurred while loading the content.

java script question

Expand Messages
  • Mike Breiding
    Greetings, I added a script for changing the text size on this page:
    Message 1 of 30 , Aug 30, 2008
    • 0 Attachment
      Greetings,
      I added a script for changing the text size on this page:
      http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php

      Two questions:
      Why does the first click on the + sign decrease the text size?
      How do I change the script so it only effects a specified target or
      targets and not all paragraphs?
      I tried changing the line: var p = document.getElementsByTagName('p');
      But could not get it right.

      Here is the script I am using:

      <script language="JavaScript" type="text/javascript">
      function changeFontSize(inc)
      {
      var p = document.getElementsByTagName('p');
      for(n=0; n<p.length; n++) {
      if(p[n].style.fontSize) {
      var size = parseInt(p[n].style.fontSize.replace("px", ""));
      } else {
      var size = 12;
      }
      p[n].style.fontSize = size+inc + 'px';
      }
      }
      </script>
      From:
      http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html
    • Bob Janes
      Hi Mike, ... The first click sets the font-size to 13px, as you previously didn t have a font-size defined (it was 100%) you were seeing the browser default
      Message 2 of 30 , Aug 30, 2008
      • 0 Attachment
        Hi Mike,

        > Why does the first click on the + sign decrease the text size?

        The first click sets the font-size to 13px, as you previously didn't have a
        font-size defined (it was 100%) you were seeing the browser default which
        presumably was something bigger than 13px. To get round this you'll need to
        set a default font-size of say 12px.

        > How do I change the script so it only effects a specified target or
        targets

        Typically you'd select certain paragraphs in JavaScript by using either id
        or class attributes. Add a 'class="change_me"' to those you want to change
        and have the script work on those.

        Best wishes

        Bob
      • Mike Breiding
        ... have a ... need to ... Hi Bob, All my pages use a font size definition of 100% in the CSS. As I understand it this is preferable to setting a default size
        Message 3 of 30 , Aug 30, 2008
        • 0 Attachment
          Bob Janes wrote:
          > Hi Mike,
          >> Why does the first click on the + sign decrease the text size?
          >>
          >
          > The first click sets the font-size to 13px, as you previously didn't
          have a
          > font-size defined (it was 100%) you were seeing the browser default which
          > presumably was something bigger than 13px. To get round this you'll
          need to
          > set a default font-size of say 12px.
          >
          Hi Bob,
          All my pages use a font size definition of 100% in the CSS.
          As I understand it this is preferable to setting a default size in px
          and allows the user to the default size.
          I think I am stating the correctly, not sure.

          >> How do I change the script so it only effects a specified target or
          targets
          >>

          >> Typically you'd select certain paragraphs in JavaScript by using
          either id
          >> or class attributes. Add a 'class="change_me"' to those you want to
          change
          >> and have the script work on those.
          >>
          Do you have any examples of the code needed?
          I have no javascript experience what so ever.
          I already have defined #div I can use for targets.
          Thanks!
          -Mike
        • Bob Janes
          Hi Mike, This version *should* keep the font size in percent and increase/decrease it by 10% on each click. The extra var line limits the changes to the div
          Message 4 of 30 , Aug 30, 2008
          • 0 Attachment
            Hi Mike,

            This version *should* keep the font size in percent and increase/decrease it
            by 10% on each click.

            The extra var line limits the changes to the div id='content'.

            Not tested but it should work OK - fingers crossed.

            Bob

            +++++

            <script language="JavaScript" type="text/javascript">
            function changeFontSize(inc) {
            var d = document.getElementById('content');
            var p = d.getElementsByTagName('p');
            for ( n = 0; n < p.length; n++ ) {
            if ( p[n].style.fontSize ) {
            var size = parseInt(p[n].style.fontSize.replace("%", ""));
            } else {
            var size = 100;
            }
            p[n].style.fontSize = size+(inc*10)+'%';
            }
            }
            </script>

            +++++
          • Axel Berger
            ... I m not doing an example myself here, because my Javascript is just terrible, but why don t you just change the font size of the body element? If all
            Message 5 of 30 , Aug 30, 2008
            • 0 Attachment
              Bob Janes wrote:
              > This version *should* keep the font size in percent and
              > increase/decrease it by 10% on each click.

              I'm not doing an example myself here, because my Javascript is just
              terrible, but why don't you just change the font size of the body
              element? If all others are derived from that through ems or
              percentages they shall follow suit.

              As a purist I do not believe these funtions do any good anyway.
              These display decisions, font, size, colour, whathaveyou, are under
              the control of the browser and the reader, not the author. (Anything
              inside the code are to be considered suggestions.) It would be far
              better to remind users of the functions of their own programs. I've
              not yet had any "I can't change the font size on your site." yet,
              but you're helping to guide user's expectations in totally the wrong
              direction.

              I have two scripts for related problems. The first supplies an
              alternative for the missing max-width in IE<7. The object here are
              manageable line lengths, so the max-width is defined in ems of the
              user's chosen size.
              The second script checks whether the window is wide enough, at the
              chosen font size, to prevent horizontal scrolling and high enough to
              take the whole navigation menu. If so the latter is made fixed, so
              after reading down to the bottom you need not scroll up again to
              choose your next page.
              Both are part of the German site http://www.fdp-odenthal.de/ :
              http://www.fdp-odenthal.de/base/fix-width.js
              http://www.fdp-odenthal.de/base/fix-menue.js

              Axel
            • Mike Breiding
              ... This is selecting *only* paragraphs in the the DIV content . That is what I was looking for. But I forgot about the lists. I tried to expand on that by
              Message 6 of 30 , Aug 30, 2008
              • 0 Attachment
                Bob Janes wrote:
                > Hi Mike,
                > This version *should* keep the font size in percent and increase/decrease it
                > by 10% on each click.
                >
                > The extra var line limits the changes to the div id='content'.
                >
                > Not tested but it should work OK - fingers crossed.
                > Bob
                > +++++
                >
                > <script language="JavaScript" type="text/javascript">
                > function changeFontSize(inc) {
                > var d = document.getElementById('content');
                > var p = d.getElementsByTagName('p');
                >
                This is selecting *only* paragraphs in the the DIV "content".
                That is what I was looking for. But I forgot about the lists.
                I tried to expand on that by adding:

                var d = document.getElementById('journalbirdlist');
                var p = d.getElementsByTagName('ol');

                But it did not work. I need to add 'ul' as well.
                > for ( n = 0; n < p.length; n++ ) {
                > if ( p[n].style.fontSize ) {
                > var size = parseInt(p[n].style.fontSize.replace("%", ""));
                > } else {
                > var size = 100;
                > }
                > p[n].style.fontSize = size+(inc*10)+'%';
                >
                Does the last line increase/decrease it by 10% on each click?
                I changed (inc*10) to (inc*5) in an effort to get a smaller incremental
                change, but it did not work.
                What do I need to change that?

                Thanks for your help with this!
                It is starting to make some sence to me, but I am not a quick study.
                -Mike


                > }
                > }
                > </script>
                >
                > +++++
                >
                >
                >
                >
                >
              • Bob Janes
                Hi Axel. ... Broadly I agree with you though in this case Mike specifically said that he wanted to increase the size of certain elements. Best wishes Bob
                Message 7 of 30 , Aug 30, 2008
                • 0 Attachment
                  Hi Axel.

                  Axel Berger <> wrote:
                  > why don't you just change the font size of the body element?

                  Broadly I agree with you though in this case Mike specifically said that he
                  wanted to increase the size of certain elements.

                  Best wishes

                  Bob
                • Axel Berger
                  ... In that case I suggest you style the font size for DIV.content in your style and then change just and only that in your script. Font sizes in elements
                  Message 8 of 30 , Aug 30, 2008
                  • 0 Attachment
                    Mike Breiding wrote:
                    > This is selecting *only* paragraphs in the the DIV "content".
                    > That is what I was looking for. But I forgot about the lists.

                    In that case I suggest you style the font size for DIV.content in
                    your style and then change just and only that in your script. Font
                    sizes in elements inside that DIV are inherited verbatim or should
                    be defined in units of em. They will then vary in line with all
                    changes of the outer em-size.
                    Just think about all the other things, perhaps added later, you
                    might have forgotten: headings, lists, quotes ...

                    Axel
                  • Mike Breiding
                    ... Good point and forward thinking. Now I need to think the same way. Thanks,Mike www.EpicRoadTrips.us/dad/
                    Message 9 of 30 , Aug 30, 2008
                    • 0 Attachment
                      Axel Berger wrote:
                      > Mike Breiding wrote:
                      >
                      >> This is selecting *only* paragraphs in the the DIV "content".
                      >> That is what I was looking for. But I forgot about the lists.
                      >>
                      >
                      > In that case I suggest you style the font size for DIV.content in
                      > your style and then change just and only that in your script. Font
                      > sizes in elements inside that DIV are inherited verbatim or should
                      > be defined in units of em. They will then vary in line with all
                      > changes of the outer em-size.
                      > Just think about all the other things, perhaps added later, you
                      > might have forgotten: headings, lists, quotes ...

                      Good point and forward thinking.
                      Now I need to think the same way.

                      Thanks,Mike
                      www.EpicRoadTrips.us/dad/
                    • Mike Breiding
                      ... I removed: var p = d.getElementsByTagName( p ); Thinking the change would then apply to all of the tags in the div#content. But it broke the script. I
                      Message 10 of 30 , Aug 30, 2008
                      • 0 Attachment
                        Axel Berger wrote:
                        > Mike Breiding wrote:
                        >
                        >> This is selecting *only* paragraphs in the the DIV "content".
                        >> That is what I was looking for. But I forgot about the lists.
                        >>
                        >
                        > In that case I suggest you style the font size for DIV.content in
                        > your style and then change just and only that in your script.
                        I removed:
                        var p = d.getElementsByTagName('p');
                        Thinking the change would then apply to all of the tags in the div#content.
                        But it broke the script.

                        I neglected to upload the page with Bob's script:
                        http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
                        -mb

                        Altered script:
                        <script language="JavaScript" type="text/javascript">
                        function changeFontSize(inc) {
                        var d = document.getElementById('content');
                        for ( n = 0; n < p.length; n++ ) {
                        if ( p[n].style.fontSize ) {
                        var size = parseInt(p[n].style.fontSize.replace("%", ""));
                        } else {
                        var size = 100;
                        }
                        p[n].style.fontSize = size+(inc*10)+'%';
                        }
                        }
                        </script>
                      • loro
                        ... So what s the point of a text resizer? Every browser has that feature built in. You don t use a fixed font size so IE s inability to resize text set in
                        Message 11 of 30 , Aug 30, 2008
                        • 0 Attachment
                          Mike Breiding wrote:
                          >All my pages use a font size definition of 100% in the CSS.

                          So what's the point of a text resizer? Every browser has that feature
                          built in. You don't use a fixed font size so IE's inability to resize
                          text set in points or pixels doesn't come into play.

                          The font resizer widget mania stems from "designer sites" not wanting
                          to give up on their beloved miniscule pixel sized Verdana and at the
                          same time pay lip service to accessibility. You have no need for it.
                          Your text is already accessible. K.I.S.S. ;-)

                          Lotta
                        • Axel Berger
                          ... Exactly. This places us in a bit of a quandry as conscientious designers, I think. On the one hand a script resizer offers a service to people unaware of
                          Message 12 of 30 , Aug 30, 2008
                          • 0 Attachment
                            loro wrote:
                            > You have no need for it.
                            > Your text is already accessible. K.I.S.S. ;-)

                            Exactly. This places us in a bit of a quandry as conscientious
                            designers, I think.
                            On the one hand a script resizer offers a service to people unaware of
                            their own browser's capabilities. It is a nice extra without making
                            anything difficult for those with scripting off, that's all good.
                            On the other hand it reinforces the wrong notion, that the designer is
                            the arbiter of how a page is to be viewed, and it takes people away from
                            learning about browsers, that's all bad.

                            I do not offer any sizers on principle myself, as there's no place for
                            them, when the web is used sensibly. But on the other hand stupid people
                            not knowing the first thing about their tools and not the least bit
                            prepared and able to learn are a huge majority. So catering for the
                            reader as he is and not as I want her to be, one might well go for
                            option number one. It's not my way, but I wouldn't call it wrong.

                            Axel
                          • loro
                            ... I have to disagree. Doesn t a widget just confirm that they can t change the text size themselves? A link to an short instruction about how to change text
                            Message 13 of 30 , Aug 30, 2008
                            • 0 Attachment
                              Axel Berger wrote:
                              >On the one hand a script resizer offers a service to people unaware of
                              >their own browser's capabilities

                              I have to disagree. Doesn't a widget just confirm that they can't
                              change the text size themselves? A link to an short instruction about
                              how to change text size in their browser is something they would
                              benefit from. On the other hand, it's right there on the browser menu...

                              Lotta
                            • Mike Breiding
                              ... What can I say - I like gadgets. -mb
                              Message 14 of 30 , Aug 31, 2008
                              • 0 Attachment
                                loro wrote:
                                > Mike Breiding wrote:
                                >
                                >> All my pages use a font size definition of 100% in the CSS.
                                >>
                                >
                                > So what's the point of a text resizer? Every browser has that feature
                                > built in. You don't use a fixed font size so IE's inability to resize
                                > text set in points or pixels doesn't come into play.

                                What can I say - I like gadgets.

                                -mb
                              • loro
                                ... Boys and their toys! :-P Lotta
                                Message 15 of 30 , Aug 31, 2008
                                • 0 Attachment
                                  Mike Breiding wrote:
                                  >What can I say - I like gadgets.

                                  Boys and their toys! :-P

                                  Lotta
                                • Axel Berger
                                  ... That s what I say in the next sentence. ... Many people would benefit from instruction,[1] but few are willing to take it. A case in point is the bland
                                  Message 16 of 30 , Aug 31, 2008
                                  • 0 Attachment
                                    loro wrote:
                                    > Doesn't a widget just confirm that they can't change the text
                                    > size themselves?

                                    That's what I say in the next sentence.

                                    > A link to an short instruction about how to change text size
                                    > in their browser is something they would benefit from.

                                    Many people would benefit from instruction,[1] but few are willing
                                    to take it. A case in point is the bland look I get when asking
                                    people, if they also put a big wad of photocopies of all the
                                    previously exchanged letters with every new one, when writing on
                                    paper. (I add, that for me this would actually be helpful, it takes
                                    me ages to find older paper letters, but with mail it is just one
                                    single keystroke.) And the next question, why they make their mails
                                    one size smaller than I find comfortable to read, i.e. deliberately
                                    make it uncomfortable for me (size=2, the IE default), usually
                                    elicits the answer "I didn't write that email, that was the
                                    computer".

                                    So I stand by what I said: You and I will not do it, but I won't
                                    call Mike's solution wrong.

                                    [1] Q: How does one indent a parapgraph?
                                    A: Press Tab once at the beginning of each line.
                                    Q: What is Excel for?
                                    A: It's a program for aligning text in columns
                                    and for making squared paper.
                                  • Mike Breiding
                                    ... No one knows more than they want to know. Yes it would be wonderful to be so helpful and add all kinds of instructional links to my pages. But, I think
                                    Message 17 of 30 , Sep 1, 2008
                                    • 0 Attachment
                                      Axel Berger wrote:
                                      > Many people would benefit from instruction,[1] but few are willing
                                      > to take it.
                                      No one knows more than they want to know.
                                      Yes it would be wonderful to be so helpful and add all kinds of
                                      instructional links to my pages.
                                      But, I think this would be futile for 99% of the viewers.

                                      Just two weeks ago I found out one could Ctrl +- to change the font size
                                      in FF.
                                      But in IE 6 this does not work.

                                      Ctrl Mouse in IE 6 to change font size?
                                      Try it on this page:
                                      http://www.google.com/hws/dell-usuk-rel/afe?hl=en&channel=us&s=http://wvrts.org/
                                      For me, only the menu tabs change size.
                                      In FF all the text changes size.

                                      Why not make it simpler by just adding the Jscript instead of confusing
                                      people with something like:
                                      "If your are using FF, change the text by Ctrl Mouse or Ctrl +-.
                                      In IE 6.0 blah, blah
                                      In IE 7. o blah, blah"

                                      Ad naseum...

                                      I know people who work with computers for a living and/or teach PC skills.
                                      Some of the them do know even the most fundamental and important things
                                      about software/hardware.
                                      But who am I to decide what is fundamental and important?

                                      No one knows more than they want to know.

                                      -Mike
                                    Your message has been successfully submitted and would be delivered to recipients shortly.