This article will helps you to understand on how you can increase and decrease font-size of the content present in a separate independent div container and which should not effect other containers present. I have done with sample example using jQuery, as everybody knows that implementing these type of things is very easy using jQuery.
The requirement is like there is a ‘div‘, in that ‘div‘ there are so many sub div’s present one after the other as per the requirement. When a link has been clicked, the content present in div’s should increase in font-size and when another link has been clicked the font-size should decrease accordingly.
Note: The div has not got any image [so we can use '*' accordingly, the code might change if image is present - I mean we need to write code snippet to neglect image tag.]
Take a look at the below example on how we can achieve the above mentioned task:
jQuery Code:
var minValue=13; var maxValue=16; $(document).ready(function(){ var ChildElements=$('.font_size_change_container *'); $("#inc_font").click(function(){ var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,"")); if(fontSizeNew!=maxValue){fontSizeNew += 1;} $('.font_size_change_container *').css("font-size",fontSizeNew+"px"); }); $("#dec_font").click(function(){ var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,"")); if(fontSizeNew!=minValue){fontSizeNew -= 1;} $('.font_size_change_container *').css("font-size",fontSizeNew+"px"); }); });
If you have any queries, please do let me know through your valuable comments
Related Entries...
Most of the developers might have faced this situation where they need to add !important while using ...
Below snippet code helps you in getting mouse coordinates inside a div container, when user moves mou ...
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...
Introduction: After going through this article, you can be able to develop a simple slide panel appl ...
Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a ...
Introduction: This article will help you in developing simple Floating Slide-In Menu using jQuery. T ...
This is an awesome jQuery plugin like Jondesign's Smooth Slideshow v2.1, by looking at the jd's Smoot ...
This article will help beginners, that is who are new to jQuery and want to learn some tricks about j ...
Glossy icons play most valuable and important role while developing applications either it might be r ...
'How to select elements which are having multiple classes using jQuery', this question has raised whe ...
2 Responses
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: How to increase and decrease the font-size of content present in a div container using jQuery: This article will h… http://bit.ly/aU9Fdt...
Keep posting stuff like this i really like it