• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 377
  • Last Modified:

jQuery Text Resizer Using EM Values

Hi,

Need help with a little tweak to some jquery code found for my websites text resizer.
The below code works well but i found its changing my em values to px values when adding the style to the 'p' and 'h1' elements.

I'd like to increase and decrease the font size by 0.125em every time the A+ or A- is clicked with 1em (being the default size, 16 when converted to px), 0.625 being the smallest em value allowed and 1.25em being the biggest value.

Any help would be greatly appreciated!

Thanks!


$(document).ready(function(){
	var defaultH1 = parseInt($('h1').css('font-size'));
	var defaultP = parseInt($('p').css('font-size'));
	var count = 0;
	var elements = ['h1', 'p'];
	$('.decreaseFont').click(function(){
		if(count >= -1){
			$(elements).each(function(key, val){
				$(val).css('font-size', parseInt($(val).css('font-size'))-2);
			});
			count--;
		};
	});
	$('.increaseFont').click(function(){
		if(count <= 1){
			$(elements).each(function(key, val){
				$(val).css('font-size', parseInt($(val).css('font-size'))+2);
			});
			count++;
		};
	});
});

Open in new window

0
JiveMedia
Asked:
JiveMedia
  • 4
  • 4
2 Solutions
 
GaryCommented:
$(document).ready(function(){
	var count = 0;
	var elements = ['h1', 'p'];
	$('.decreaseFont').click(function(){
		if(count >= -1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))*0.0625)-0.125)+"em");
			});
			count--;
		};
	});
	$('.increaseFont').click(function(){
		if(count <= 1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))*0.0625)+0.125)+"em");
			});
			count++;
		};
	});
});

Open in new window

0
 
JiveMediaAuthor Commented:
Hi Gary,

Excellent thanks for that! Works a treat!

Another query...if i wanted jQuery to grab the css default value for a 'p' element already stated, ie. 0.875em and increase or decrease by 4 sizes either way, how would i do that.

I wanted to use this globally around the site but some div's might have smaller p sizes as default and doesn't work as expected.

Thanks!
0
 
GaryCommented:
You would have to grab the value outside any functions and use logic to decide what increase/decrease to apply and replace 0.125 with the var.

var basesize= parseInt($("p").css('font-size')*0.0625)

if (basesize=1){
variance=0.125}
else if(basesize=0.875){
variance=0.5 // I assume you mean 4 * 0.125
}

Open in new window

Then in the function replace 0.125 with variance
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JiveMediaAuthor Commented:
Hi Gary,

Im having a little trouble getting this working. Any chance you could show me in a js fiddle or something similar?

Your help would be greatly appreciated.

Thanks!
0
 
GaryCommented:
Based on a default of '16px' = 1em

http://jsfiddle.net/GaryC123/7uvfr/1/

You do understand em does not equal px - em could be equal any px size
0
 
JiveMediaAuthor Commented:
Excellent help and work by Gary, much appreciated.
0
 
JiveMediaAuthor Commented:
Hi Gary,

One last question.

If i wanted to make the default size of the h1 (1.5em) and p (0.875em) different, but still increment them by the same amount of 0.125, what would i need to change in the js?

Thanks! :)
0
 
GaryCommented:
$(document).ready(function(){
	var count = 0;
	var elements = ['h1', 'p'];
	$('.decreaseFont').click(function(){
		if(count >= -1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))/16)-0.125) +"em");
			});
			count--;
		};
	});
	$('.increaseFont').click(function(){
		if(count <= 1){
			$(elements).each(function(key, val){
				$(val).css('font-size', ((parseInt($(val).css('font-size'))/16)+.125) +"em");
			});
			count++;
		};
	});
});

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now