Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text Resize (increase/decrease on click)

    Hi guys,

    Pretty quick question (I think)...

    I'm working on a wordpress site and the client wants the 3 A's in the header that alters the size of fonts on the site. Does anyone know a good wordpress plugin for this? Or another javascript one?

    Thanks advaince,
    Ste

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Step 1: Add the following Javascript in the insde the <HEAD> tag of your HTML.
    Code:
    <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>
    Step 2: Insert the following HTML anywhere in your blog - you can customize the text or replace it with visual graphics (like the alphabet A - one small and the other one slightly large)
    Code:
    <a href="javascript:changeFontSize(1)">Increase Font Size</a> 
    <a href="javascript:changeFontSize(-1)">Decrease Font Size</a>
    You can extend this to either all the HTML elements on your blog or limit it to only the text sections. The font size is specified in pixels.


    Let me know if it is same what you are looking for

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That looks great, I've got to pop off for an hour but I'll give this a whirl as soon as I get back!

    I take it all the font sizes should be px based in my CSS then?

    Would this method work using the "3 A's" as well? I know what the clients like, we've done it other ways but apparently it HAS to be done with 2 A's - each one bigger than the other ha.

    So I guess the left most 'A' would always reset it to the default size. The middle one would enlarge the text and the last one would make it bigger still.

    Does that make any sense? Thanks for your time looking at this!

    Ste

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Then use following code:

    Code:
    <script language="JavaScript" type="text/javascript"> 
    function changeFontSize(inc) 
    {  
     var p = document.getElementsByTagName('p');
     for(n=0; n<p.length; n++)
     { 
    p[n].style.fontSize = inc + 'px'; 
     } } 
    </script>
    here is code for 3 "A"

    Code:
    <a href="javascript:changeFontSize(12)">A</a>
    <a href="javascript:changeFontSize(15)">A</a>
    <a href="javascript:changeFontSize(20)">A</a>
    This what you want???

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thats absolutely fantastic, perfect, thanks alot!!

    You are a really helpful bunch on this form!

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    Doesn't this
    Code:
    if(p[n].style.fontSize) {....
    need a comparison sequence? pardon my ignorance if it doesn't (I've just never seen an if statement w/o a compare)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    Quote Originally Posted by alykins View Post
    Doesn't this
    Code:
    if(p[n].style.fontSize) {....
    need a comparison sequence? pardon my ignorance if it doesn't (I've just never seen an if statement w/o a compare)
    an if statement without comparison is used to check for existence.

    e.g.:
    Code:
    if(document.getElementById('Buuh'){
    alert('the document have an element with the Id "Buuh"');
    }else{
    alert('the document do not have an element with the Id "Buuh"');
    }

  • Users who have thanked Lerura for this post:

    alykins (07-19-2011)

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    Quote Originally Posted by lerura View Post
    an if statement without comparison is used to check for existence.

    e.g.:
    Code:
    if(document.getElementById('Buuh'){
    alert('the document have an element with the Id "Buuh"');
    }else{
    alert('the document do not have an element with the Id "Buuh"');
    }
    thanks- i didn't know that

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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