Font resizer help

**riskmod** · 07-06-2012 01:19 PM

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

**Padonak** · 07-07-2012 08:08 AM

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

what does this line do?

**riskmod** · 07-07-2012 09:37 PM

Originally Posted by Padonak

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)

**Padonak** · 07-08-2012 05:11 AM

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?

**riskmod** · 07-09-2012 08:21 AM

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');

**Padonak** · 07-09-2012 11:33 AM

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

**riskmod** · 07-09-2012 01:01 PM

Originally Posted by Padonak

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

**Padonak** · 07-09-2012 03:27 PM

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>

**riskmod** · 07-09-2012 03:35 PM

Originally Posted by Padonak

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.

**Padonak** · 07-09-2012 03:46 PM

i think if you try various steps you'll make it

**riskmod** · 07-09-2012 04:00 PM

Originally Posted by Padonak

i think if you try various steps you'll make it

thanks for your help!

**riskmod** · 07-09-2012 04:18 PM

Originally Posted by Padonak

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.

**Padonak** · 07-10-2012 12:33 PM

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.

**riskmod** · 07-11-2012 08:58 AM

Originally Posted by Padonak

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

**Padonak** · 07-11-2012 11:31 AM

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: Font resizer help

Thread Tools

Display

Font resizer help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions