www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Font resizer help

  1. #1
    Join Date
    Oct 2006
    Posts
    203

    Font resizer help

    I am having issues with this:

    Code:
    $(document).ready(function(){
      var section = new Array('copy-content');
      section = section.join(',');
     
      // Reset Font Size
      var originalFontSize = $(section).css('font-size');
      $(".resetFont").click(function(){
        $(section).css('font-size', originalFontSize);
    	return false;
      });
     
      // Increase Font Size
      $(".increaseFont").click(function(){
        var currentFontSize = $(section).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*1.2;
        if (newFontSize < 16) {
    	$(section).css('font-size', newFontSize);
    	}
        return false;
      });
     
      // Increase Font Size
      $(".increaseFont-more").click(function(){
        var currentFontSize = $(section).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*1.35;
        if (newFontSize < 18) {
    	$(section).css('font-size', newFontSize);
    	}
        return false;
      });
      
    });
    HTML

    Code:
    <li><a href="#" class="normal resetFont">A</a> | <a href="#" class="zoom-in increaseFont">A</a> | <a href="#" class="zoom-more increaseFont-more">A</a></li>
    It works.....but when you click on increaseFont (good) and click after increaseFont-more, it wont function

    ...resetFont works (resets back to normal) ...
    ....but cannot go bigger with increaseFont-more and vice-versa if Im in increaseFont already.....only resetFont will work....what am I missing?

    Thanks
    Last edited by riskmod; 07-06-2012 at 02:26 PM.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    var section = new Array('copy-content');

    what does this line do?

  3. #3
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    var section = new Array('copy-content');

    what does this line do?
    It makes the copy-content (container div) to make the function work on that div (font grow)

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    i do not understand some logic of this code:

    var section = new Array('copy-content');
    section = section.join(',');

    you are creating array which consists of only one member - what for?
    then you are joining this array - what is being joined?
    'copy-content' is a string - where comes from?
    Last edited by Padonak; 07-08-2012 at 06:17 AM.

  5. #5
    Join Date
    Oct 2006
    Posts
    203
    The copy-content is my container div that has all the copy that i only want to grow and sorry it should be like this:

    var section = new Array('copy-content', 'p');

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    ok then 'copy-content' is probably the id attribute of that div? if so, the $(section) must be $('#copy-content, p') or $('#copy-content p') depending on what you need

  7. #7
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    ok then 'copy-content' is probably the id attribute of that div? if so, the $(section) must be $('#copy-content, p') or $('#copy-content p') depending on what you need
    Yes my apologies it is like that and it is a class like this:

    ('.copy-content', 'p')

    ...since some side navs(different class divs) will have p tag that i will want to grow

    ('.copy-content, p') will still work but the issue of A A A is still happenning

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    i'm not sure if i understood everything right but try this one:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:30px 0px 0px 0px;}
    #sizer{position:absolute;right:15px;top:15px;padding:5px;border:1px dashed #ccc;background-color:#f8f8ff;list-style-type:none;}
    a:link,a:active,a:visited{text-decoration:none;color:Lightsteelblue;font-weight:bold;background-color:transparent;}
    a:hover{text-decoration:none;color:Navy;font-weight:bold;background-color:transparent;}
    a.normal{font-size:12px;}
    a.zoom-in{font-size:15px;}
    a.zoom-more{font-size:18px;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var section=[],cc=$('div[class="copy-content"]');
    section.push(parseFloat(cc.css('font-size'))); // save copy-content orig. text size
    $('p').each(function(){section.push(parseFloat($(this).css('font-size')));}); // save each P orig. text size
    /* RESET EVERYTHING */
    $(".resetFont").click(function(){
    cc.css('font-size',section[0]+'px');
    $('p').each(function(i){$(this).css('font-size',section[i+1]+'px');});
    });
    
    function fontGrow(step,max){
    if(parseFloat(cc.css('font-size'))*step<max){cc.css('font-size',parseFloat(cc.css('font-size'))*step+'px');}
    $('p').each(function(){if(parseFloat($(this).css('font-size'))*step<max){$(this).css('font-size',parseFloat($(this).css('font-size'))*step+'px');}});
    }
    /* LITTLE STEP */
    $(".increaseFont").click(function(){fontGrow(1.2,16);});
    /* BIG STEP */
    $(".increaseFont-more").click(function(){fontGrow(1.35,48);});
    });
    </script>
    </head>
    <body>
    <ul id="sizer"><li><a href="#null" class="normal resetFont" title="reset font size to normal">A</a> | <a href="#null" class="zoom-in increaseFont" title="increase with little step">A</a> | <a href="#null" class="zoom-more increaseFont-more" title="increase with bigger step">A</a></li></ul>
    <div class="copy-content">THE .COPY-CONTENT DIV</div>
    <div class="another class one"><p>some side navs(different class divs) will have p tag that i will want to grow</p>text not in <b>p</b> tag</div>
    <div class="another class two"><p>It works.....but when you click on increaseFont (good) and click after increaseFont-more, it wont function</p>text not in <b>p</b> tag</div>
    <div class="another class three"><p>...resetFont works (resets back to normal) ...</p>
    <p>....but cannot go bigger with increaseFont-more and vice-versa if Im in increaseFont already.....only resetFont will work....what am I missing?</p>text not in <b>p</b> tag</div>
    </body>
    </html>
    Last edited by Padonak; 07-09-2012 at 04:33 PM. Reason: CSS bug

  9. #9
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    i'm not sure if i understood everything right but try this one:
    Works well but I want the first to reset the second to be like 15px and the third to be 18px thats it.

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    i think if you try various steps you'll make it

  11. #11
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    i think if you try various steps you'll make it
    thanks for your help!

  12. #12
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    i think if you try various steps you'll make it
    One last question:

    The code is great but one thing i was trying to get it to work is the last 'A' ...when you click on the middle A nothing happens ...so your code works like mines (well mines was 50%) yours is more like 75% working.

    I want all click to function.

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    all works ok. the middle A (according to the max value) will work only if the font-size is not greater than the middle-A-max which is 16.

  14. #14
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by Padonak View Post
    all works ok. the middle A (according to the max value) will work only if the font-size is not greater than the middle-A-max which is 16.
    OK sorry let me understand using the code above.....lets say you click on the third 'A'..then if you click on the middle..nothing happens...and like you said its set on max width.

    Basically I want them to have a set size so that way all A only have one different size and can be click regardles of where you click....I tried doing this with a set size but then nothing happens..

    So first A (reset) Second (16px) Third (22px) - all can go back and forth.

    I appreciate your help I'm still new at this.

    Thanks

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    if you dont need steps everything will be much easier:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:30px 0px 0px 0px;}
    #sizer{position:absolute;right:15px;top:15px;padding:5px;border:1px dashed #ccc;background-color:#f8f8ff;list-style-type:none;}
    a:link,a:active,a:visited{text-decoration:none;color:Lightsteelblue;font-weight:bold;background-color:transparent;}
    a:hover{text-decoration:none;color:Navy;font-weight:bold;background-color:transparent;}
    a.normal{font-size:12px;}
    a.zoom-in{font-size:15px;}
    a.zoom-more{font-size:18px;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var section=[],cc=$('div[class="copy-content"]');
    section.push(parseFloat(cc.css('font-size'))); // save copy-content orig. text size
    $('p').each(function(){section.push(parseFloat($(this).css('font-size')));}); // save each P orig. text size
    /* RESET EVERYTHING */
    $(".resetFont").click(function(){
    cc.css('font-size',section[0]+'px');
    $('p').each(function(i){$(this).css('font-size',section[i+1]+'px');});
    });
    
    function fontGrow(max){
    cc.css('font-size',max+'px');
    $('p').each(function(){$(this).css('font-size',max+'px');});
    }
    /* LITTLE STEP */
    $(".increaseFont").click(function(){fontGrow(16);});
    /* BIG STEP */
    $(".increaseFont-more").click(function(){fontGrow(22);});
    });
    </script>
    </head>
    <body>
    <ul id="sizer"><li><a href="#null" class="normal resetFont" title="reset font size to normal">A</a> | <a href="#null" class="zoom-in increaseFont" title="increase with little step">A</a> | <a href="#null" class="zoom-more increaseFont-more" title="increase with bigger step">A</a></li></ul>
    <div class="copy-content">THE .COPY-CONTENT DIV</div>
    <div class="another class one"><p>some side navs(different class divs) will have p tag that i will want to grow</p>text not in <b>p</b> tag</div>
    <div class="another class two"><p>It works.....but when you click on increaseFont (good) and click after increaseFont-more, it wont function</p>text not in <b>p</b> tag</div>
    <div class="another class three"><p>...resetFont works (resets back to normal) ...</p>
    <p>....but cannot go bigger with increaseFont-more and vice-versa if Im in increaseFont already.....only resetFont will work....what am I missing?</p>text not in <b>p</b> tag</div>
    </body>
    </html>

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