javascript - increase descrease font size with line height using jquery -
i want jquery code increase or descrease font. tried codes not running well.
here link of demo (am first time using fiddle please can set needed)
i have different sizes font here, @ time of increasing font size makes font of same size.so how fix that?
my code:
<div id='contents'><div><strong>lorem ipsum</strong> dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy <div><font face="comic sans ms" size="5" color="#c2c2c2">text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not </font></div><font face="comic sans ms" size="5" color="#c2c2c2"> 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum </font>passages, , more desktop publishing software <font size="1">aldus pagemaker including versions of </font><div><font size="1">lorem ipsum. </font></div></div></div> <a href="#" onclick="increasefont()">increasefont</a> <a href="#" onclick="decreasefont()">decreasefont</a> <script type="text/javascript"> var $ = jquery var section = '#contents *'; var originalfontsize = $(section).css('font-size'); var originallineheight = $(section).css('line-height'); function resetfont() { $(section).css('font-size', originalfontsize); $(section).css('font-size', originallineheight); } function increasefont() { var currentfontsize = $(section).css('font-size'); var currentlineheight = $(section).css('line-height'); var currentfontsizenum = parsefloat(currentfontsize, 10); var newfontsize = currentfontsizenum * 1.2; $(section).css('font-size', newfontsize); var currentlineheightnum = parsefloat(currentlineheight, 10); var newlineheight = currentlineheightnum * 0.1; $(section).css('line-height', newlineheight); return false; } function decreasefont() { var currentfontsize = $(section).css('font-size'); var currentlineheight = $(section).css('line-height'); var currentfontsizenum = parsefloat(currentfontsize, 10); var newfontsize = currentfontsizenum * 0.8; $(section).css('font-size', newfontsize); var currentlineheightnum = parsefloat(currentlineheight, 10); var newlineheight = currentlineheightnum * 0.8; $(section).css('line-height', newlineheight); return false; } </script>
the primary issue you're calling $(section).css(), returning single value (16px), applying sections. getting code work isn't difficult - you'll want call $(section), use .each() loop through each section , update value way.
i've updated fiddle, has increasefont function updated illustrate workaround. you!
and change made:
function increasefont() { $(section).each(function(idx, el){ var currentfontsize = $(this).css('font-size'), currentlineheight = $(this).css('line-height'), currentfontsizenum = parsefloat(currentfontsize, 10), newfontsize = currentfontsizenum * 1.2; $(this).css('font-size', newfontsize); var currentlineheightnum = parsefloat(currentlineheight, 10), newlineheight = currentlineheightnum * 0.1; $(this).css('line-height', newlineheight); }); } happy javascripting!
Comments
Post a Comment