JiveMedia
asked on
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!
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++;
};
});
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
}
Then in the function replace 0.125 with variance
ASKER
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Excellent help and work by Gary, much appreciated.
ASKER
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! :)
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! :)
$(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++;
};
});
});
ASKER
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!