dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Text Resizer

  1. #1
    Join Date
    Mar 2011
    Posts
    9

    Text Resizer

    Hello everyone- I'm new here.

    I am looking to add a font selector/ text resizer on one of my websites and I was curious if anyone could tell me how to duplicate what they have done on this website?

    http://www.sfgate.com/cgi-bin/articl...s135603D04.DTL

    I tried to look at the source, but I am not experienced enough to know what I am looking for. I have looked around on the internet and have not found a simple solution for what I am looking to do.

    It would be nice if there was a script out there that I could copy and paste and apply it to a specific DIV id on my site.

    Thanks, Chris

  2. #2
    Join Date
    Apr 2011
    Location
    I live in the pinaple under the sea
    Posts
    107
    Ok I made this simple code for you

    HTML Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    var text_size = 12;
    
    function addSize(){
    	if(text_size <= 16)	
    		text_size++;
    
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    }
    
    function reduceSize(){
    	if(text_size >= 8)
    		text_size--;
    
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    }
    
    function initTextSize(){
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    }
    
    window.onload = initTextSize;
    </script>
    </head>
    <body>
    <div id="myTextContent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ligula metus. Praesent diam 
    
    urna, egestas quis venenatis vel, facilisis nec nisl. Suspendisse ac dolor rhoncus arcu porttitor 
    
    tincidunt. In pretium aliquam lacus. Aliquam enim erat, placerat mattis pellentesque vitae, 
    
    pellentesque at magna. In sed sodales ligula. Nunc sed pellentesque nisi. Nulla et nunc metus. 
    
    Curabitur mi erat, laoreet at dictum et, blandit feugiat nisl. Class aptent taciti sociosqu ad 
    
    litora torquent per conubia nostra, per inceptos himenaeos. Nullam mattis ornare dolor placerat 
    
    consequat. Duis imperdiet egestas convallis. Donec feugiat vulputate lectus vitae bibendum. 
    </div>
    <input type="button" value="+" onclick="addSize()"><input type="button" value="-" 
    
    onclick="reduceSize()">
    </body>
    </html>

  3. #3
    Join Date
    Mar 2011
    Posts
    9
    Awesome thanks! I will try that out!

  4. #4
    Join Date
    Apr 2011
    Location
    I live in the pinaple under the sea
    Posts
    107
    Oh yea I forgot about the font type, well basically it just the same, just make an array of available fonts you want, make sure its a font that is available in all browser [default fonts]

    and then you can use a drop down list to select your user what font they want

  5. #5
    Join Date
    Mar 2011
    Posts
    9
    Thanks again for your help.

    I have absolutely no clue on how to write javascript, so I probably won't be able to figure out how to add the array of fonts, etc.

    But the text resize script is great! I'll just have to settle for that!

  6. #6
    Join Date
    Apr 2011
    Location
    I live in the pinaple under the sea
    Posts
    107
    Ok i revised the code for you to add the functionality to change the font face

    HTML Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    var text_size = 12;
    
    function addSize(){
    	if(text_size <= 16)	
    		text_size++;
    
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    }
    
    function reduceSize(){
    	if(text_size >= 8)
    		text_size--;
    
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    }
    
    function initTextSize(){
    	document.getElementById('myTextContent').style.fontSize = text_size + "px";
    	document.getElementById('myTextContent').style.fontFamily = fontArray[0];
    }
    
    function setFont(i){
    	var fontArray = ["Georgia", "Verdana", "Times New Roman", "Arial"];
    	document.getElementById('myTextContent').style.fontFamily = fontArray[i];
    }
    
    window.onload = initTextSize;
    </script>
    </head>
    <body>
    <select onChange="setFont(this.selectedIndex)">
    	<option value=0>Georgia</option>
    	<option value=1>Verdana</option>
    	<option value=2>Times New Roman</option>
    	<option value=3>Arial</option>
    </select>
    <input type="button" value="+" onclick="addSize()">
    <input type="button" value="-" onclick="reduceSize()">
    <div id="myTextContent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ligula metus. Praesent diam 
    
    urna, egestas quis venenatis vel, facilisis nec nisl. Suspendisse ac dolor rhoncus arcu porttitor 
    
    tincidunt. In pretium aliquam lacus. Aliquam enim erat, placerat mattis pellentesque vitae, 
    
    pellentesque at magna. In sed sodales ligula. Nunc sed pellentesque nisi. Nulla et nunc metus. 
    
    Curabitur mi erat, laoreet at dictum et, blandit feugiat nisl. Class aptent taciti sociosqu ad 
    
    litora torquent per conubia nostra, per inceptos himenaeos. Nullam mattis ornare dolor placerat 
    
    consequat. Duis imperdiet egestas convallis. Donec feugiat vulputate lectus vitae bibendum. 
    </div>
    </body>
    </html>

  7. #7
    Join Date
    Oct 2012
    Posts
    1

    Custom Text

    Is it possible to make it so a visitor can enter their own text to be previewed? Thanks for the code!

Thread Information

Users Browsing this Thread

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

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