HomeОбразованиеRelated VideosMore From: kudvenkat

Increase decrease font size using jquery

88 ratings | 22827 views
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/increase-decrease-font-size-using-jquery.html In this video we will discuss how to increase, decrease and reset font size using jQuery Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <style> .divClass { font-size: 16px; background-color: #E3E3E3; width: 500px; padding: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#linkIncrease').click(function () { modifyFontSize('increase'); }); $('#linkDecrease').click(function () { modifyFontSize('decrease'); }); $('#linkReset').click(function () { modifyFontSize('reset'); }) function modifyFontSize(flag) { var divElement = $('#divContent'); var currentFontSize = parseInt(divElement.css('font-size')); if (flag == 'increase') currentFontSize += 3; else if (flag == 'decrease') currentFontSize -= 3; else currentFontSize = 16; divElement.css('font-size', currentFontSize); } }); </script> </head> <body style="font-family:Arial"> Font-Size: <a id="linkIncrease" href="#">Increase</a> <a id="linkDecrease" href="#">Decrease</a> <a id="linkReset" href="#">Reset</a> <br /><br /> <div id="divContent" class="divClass"> <b>jQuery Tutorial</b> <ul> <li>What is jQuery</li> <li>What is $(document).ready(function() in jquery</li> <li>Benefits of using CDN</li> <li>#id selector</li> <li>Element Selector</li> <li>class selector</li> <li>attribute selector</li> <li>attribute value selectors</li> <li>case insensitive attribute selector</li> <li>jQuery input vs :input</li> </ul> </div> </body> </html>
Html code for embedding videos on your blog
Text Comments (10)
Maja Nikolic (8 months ago)
Hello :) First, thanks for the tutorial I am enjoying it. I am beginner in jQuery and am trying to understand the basics. I am also trying to write the code my self and this is how I wrote the code for this lesson: $(document).ready(function () { $("#linkIncrease").click(function(){ $("#divContent").css("font-size", "+=3"); }); $("#linkDecrease").click(function(){ $("#divContent").css("font-size", "-=3"); }); $("#linkReset").click(function(){ $("#divContent").css("font-size", "16"); }); }); It works the same. It is shorter but I cant be sure if it is more efficient then code in the lesson?
MARI (9 months ago)
$("a").on('click', function(event) { modifyFontSize(this.id); });
V1G (9 months ago)
This video has been Certified by V1G
V1G (9 months ago)
Thanks m8
Guguloth Vijay Nayak (11 months ago)
if this script doesn't work <script src="jquery-1.11.2.js"></script> , use this " <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> "
Naser ahmed (1 year ago)
veronica lidia (3 years ago)
Thank u so much! I've been looking for this for over an hour on the Internet.
Shubhendu Rohatgi (3 years ago)
Hi Sir, Your videos are quite elaborating and to the point. Please post videos on ANGULAR JS as well.
Ibrahim Mohmoud (3 years ago)
Thanks.... we appreciate that but i have sample question why you focus on design side with jQuery ?? I prefer two videos tutorial about how to get data from database with jQuery(AJAX)
mohamed omiera (3 years ago)
please mr venkat say something about identity system :(

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.