47 users online (1 members and 46 guests)  


  Results 1 to 3 of 3

Related

  1. Changing z-index etc. by clicking a button    Forum: Javascript Forum
    Replies: 2
  2. Replies: 1
  3. Changing Text with a button    Forum: Javascript Forum
    Replies: 1
  4. Changing Text With a Button    Forum: HTML Forum
    Replies: 1
  5. Changing Text Box Scroll Bar Color    Forum: HTML Forum
    Replies: 1
  1. #1
    sparkyjoe34's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2007
    Posts
    1

    Question Changing text size with a button

    Can somebody help me please? I am building a web page that has two buttons labeled standard and magnified. When the magnified button is pushed the text is to change to a larger font and then just the opposite with the standard button. I've started the page butt i still can't figure out how to code the rest. I been looking all over and posted to different forums but still no help. Any advice would be extremely appreciated!
    Here is the code:


    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Week 6 DHTML Assignment</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type = "text/css">
    
             .bigText   { font-size: 3em;
                          font-weight: bold }
    
             .smallText { font-size: .75em }
    
          </style>
    
          <script type = "text/javascript">
             <!--
             function goBig() 
             {
                
                      document.getElementById("bigText").style.fontSize = ""
             }
             
              function restoreSize() 
             {
                
                      document.getElementById("smallText").style.fontSize = ""
             }
             // -->
          </script>
    </head>
    
    <body>
    <form>
    <input type="button" value=" Standard " onClick="restoreSize()">
    <input type="button" value=" Magnified " onClick="goBig()">
    </form>
    
    
    <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.
    </p>
    </body>
    </html>
    Last edited by vinyl-junkie; 09-23-2007 at 10:22 AM. Reason: Added code tags

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Changing text size with a button

    What you're looking for is a stylesheet switcher. http://www.alistapart.com/stories/alternate/ Here is one example. Search http://www.google.com/search?num=100&hl=en&newwindow=1&safe=off&rlz=1B3GGGL_enUS223US223&q=stylesheet+switcher+javascript&btnG=Search Google for others if you don't like the example I gave you.

    Note: You don't have to do this with javascript. You can use other scripting languages such as PHP. Take your choice.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    Aminalaizer's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2003
    Posts
    16

    Cool I write a script for you

    Lock how it work.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Week 6 DHTML Assignment</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type = "text/css" id=myStyleSheet>

    .theText { font-size:16px;}

    </style>

    <script type = "text/javascript">
    <!--


    function doFont(inSize)
    {

    document.getElementById('myStyleSheet').styleSheet.rules[0].style.fontSize=inSize;
    }
    // -->
    </script>
    </head>
    <body>
    <button onclick="javascript:doFont('16px');">to Small</button>
    <button onclick="javascript:doFont('22px');">to Big</button>
    <p class=theText>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do

    eiusmod tempor
    .
    </p>
    </body>
    </html>



Tags for this Thread