Sql server, .net and c# video tutorial: Increase decrease font size using jquery

Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

(追記) (追記ここまで)

Increase decrease font size using jquery

Suggested Videos
Part 48 - Simple jquery progress bar
Part 49 - Optimize jquery progress bar
Part 50 - jquery show hide password

(追記) (追記ここまで)

In this video we will discuss how to increase, decrease and reset font size using jQuery.

(追記) (追記ここまで)

increase decrease font size using jquery

<html>

<head>

<style>

.divClass {

font-size: 16px;

background-color: #E3E3E3;

width: 500px;

padding: 5px;

}

</style>

<scriptsrc="jquery-1.11.2.js"></script>

<scripttype="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;

elseif (flag == 'decrease')

currentFontSize -= 3;

else

currentFontSize = 16;

divElement.css('font-size', currentFontSize);

}

});

</script>

</head>

<bodystyle="font-family:Arial">

Font-Size:

<aid="linkIncrease"href="#">Increase</a>

<aid="linkDecrease"href="#">Decrease</a>

<aid="linkReset"href="#">Reset</a>

<divid="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>

jQuery tutorial for beginners

Email This BlogThis! Share to X Share to Facebook Share to Pinterest

2 comments:

AnonymousJuly 13, 2015 at 4:06 AM
Hi venkat
For one page its very good to use this approach.But If we want to use the increasr/decrease font size to the other pages when we navigate to other page in stie how to maintain the same increased or decreased site to that pages.
Reply Delete
Replies