www.webdeveloper.com
Results 1 to 6 of 6

Thread: text resize in dreamweaver

  1. #1
    Join Date
    Mar 2012
    Posts
    21

    text resize in dreamweaver

    Hi all!

    I have a small problem that I need help with in Dreamweaver. I'm creating a webpage about a BB's history and I want to put in a Javascript text resize which would only increase/decrease the written content.

    However, I put one code in but the text in the middle (the part I want to increase/decrease) stays the same while my navigation text changes.

    Any idea's on how to fix this problem?!

    My text resizing code is :
    Code:
    <div id="resize">Change text size:<br><a name="change">
    <img src="images/subtract.png" alt="Decrease text size" width="30" height="30" hspace="2" id="minustext" onclick="resizeText(-1)" />
    <img src="images/add.png" alt="Increase text size" width="30" height="30" id="plustext" onclick="resizeText(1)" /></a></div>
    </div>
    <script type="text/javascript">
    function resizeText(multiplier) {
      if (document.body.style.fontSize == "") {
        document.body.style.fontSize = "1.0em";
      }
      document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
    }

    Any help is greatly appreciated! Thanks.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,083
    where is the text that you want to resize?

    the logical solution would be to put all of the text that you want to resize inside a div and only resize that text rather than all of the text in the document.body which is what you are doing now

    or if the text is going to be in various locations, filter them by giving their containing elements a class name or something...

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    make sure the font-size for the div is spec'd in css using % or em, if you hard-code px, i don't think it will cascade from body...

  4. #4
    Join Date
    Mar 2012
    Posts
    21
    xelawho, this is what I have so far..
    Code:
      <div id="information">
        <p>The Boys&rsquo;  Brigade was founded in Glasgow, Scotland on 4th October 1883 by  William Alexander Smith who was a businessman part time soldier and a devoted  Christian. </p>
        <p>William Smith was 29 years old when he had founded the first ever Boys Brigade. Mr Smith had the idea of turning Sabbath school boys into a volunteer brigade but with the same military order, obedience discipline and importantly self respect. Combining all this with religious services with games and enjoyment became the core of the Boys’ Brigade. </p>
    <p><img src="images/williamsmith.jpg" width="197" height="226" hspace="10" align="right" />On October 1883, the leaders invited the boys of the North Woodside Mission Sabbath School to the join the Boys’ Brigade. The anchor badge that we know of now was created then and the motto, “Sure and Steadfast” was from Hebrews, chapter 6, verse 19. .</p>
    <p>  By this  time, William Smith had given up all his jobs to work fulltime for the Boys&rsquo;  Brigade. </p>
        <p>  In July  1909, William Alexander Smith had been knighted by King Edward VII for outstanding services to boys. 5 years later, he had died.</p>
        <p>  Although Sir  William Smith could not see the improvement for himself, he would have been  proud of the work that had been started. In early 20th Century there  were well over 2,000 companies connected with different churches throughout the  United Kingdom, British Empire and the United States.</p>
        <p><img src="images/oribblogo.jpg" width="144" height="148" hspace="10" align="left" />Each company  is normally affiliated to a battalion which are organized at a district and  then to national level. However, here in Scotland, each company (such as  ourselves) are attached to a local district – which is attached to a battalion. </p>
        <p>&nbsp;</p>
        <div id="keydates">
          <h3>&nbsp;</h3>
          <h3>&nbsp;</h3>
          <h3>Key  Dates</h3>
          <p><img src="images/boys_brigade_poster.jpg" alt="" width="200" height="300" border="2" align="right" />1854 - William Alexander Smith born (27th October)<br />
            1883 - BB Founded in Glasgow (4th October)<br />
            1886 - First BB Camp (Tignabruaich)<br />
            1908 - Scout Movement Formed (by Baden Powell, developed from the BB)<br />
            1909 - William Alexander Smith knighted (July)<br />
            1914 - Sir William Alexander Smith died (10th May)<br />
            1917 - Boy Reserves started<br />
            1926 - Amalgamation of The Boys' Brigade with The Boys' Life Brigade<br />
            1933 - Jubilee Celebrations<br />
            1976 - World Conference (of The Boys' Brigade) formed<br />
            1983 - Centenary Celebrations<br />
            1993 - Junior Section 75th Anniversary (previously called 'Life Boys')<br />
            2002 - World Conference renamed to Global Fellowship of Christian Youth<br />
            2004 - 150th Anniversary of the Founder's birth<br />
            2008 - 125th Anniversary of The Boys' Brigade<br />
            2011 - 125th Anniversary of Camping in The Boys' Brigade</p>
        </div>
        <p>&nbsp;</p>
      </div>
      <div id="bbnotes"></div>
    <div id="footer">
      <p>Scottish Charity number: 09382032039</p>
    </div>
      
            
      <div id="resize">Change text size:<br><a name="change">
    <img src="images/subtract.png" alt="Decrease text size" width="30" height="30" hspace="2" id="minustext" onclick="resizeText(-1)" />
    <img src="images/add.png" alt="Increase text size" width="30" height="30" id="plustext" onclick="resizeText(1)" /></a></div>
    </div>
    <script type="text/javascript">
    function resizeText(multiplier) {
      if (document.body.style.fontSize == "") {
        document.body.style.fontSize = "1.0em";
      }
      document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
    }
    Where would you suggest I put the Javascript part, inside the information div?

  5. #5
    Join Date
    Nov 2010
    Posts
    1,083
    it seems to work ok to me, but like I say if you just want to change the font size of a section, just target that section (I took your "information" div as an example):
    Code:
    <script type="text/javascript">
    function resizeText(multiplier) {
    var thediv=document.getElementById("information")
      if (thediv.style.fontSize == "") {
        thediv.style.fontSize = "1.0em";
      }
      thediv.style.fontSize = parseFloat(thediv.style.fontSize) + (multiplier * 0.2) + "em";
    }
    </script>
    is that what you meant?

  6. #6
    Join Date
    Mar 2012
    Posts
    21
    This is exactly what I mean! Thanks a lot!
    One final question, do I put that bit of javascript code into my "information" div, or can I put it anywhere?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles