Font Size Controller Using jQuery

Abhimanyu K Vatsa
12y
8.2k
0
0

Article

Introduction

We web developers sometimes need to apply styles that have not been defined in a stylesheet or inline. For this jQuery offers the .css() method for such occasions. The .css method acts as a getter and setter. To get the style property, we simply pass the name of the property as a string like .css('fontSize') and to set the style property; the .css() method provides two different ways:

Way 1: Single Property

.css('fontSize','14px')

Way 2: Multiple Properties

.css({
'property1': 'value1',
'property-2': 'value2'
})

Let's have a HTML Content that will consume this service.

<body>
  <h1>Font Size Controller</h1>
  <div id="fontController">
  <button id="fontController-large">Bigger</button>
  <button id="fontController-small">Smaller</button>
  </div>
  <div class="aboutVS">
  <p>
Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft.
It is used to develop console and graphical user interface applications along with Windows
Forms applications, web sites, web applications, and web services in both native code together
with managed code for all platforms supported by Microsoft Windows, Windows Mobile, Windows CE,
.NET Framework, .NET Compact Framework and Microsoft Silverlight.
  </p>
  </div>
</body>

In the above HTML markup, I have two different DIVs inside the <body> tag; the first one is 'fontController' and the second one is "aboutVS". Inside the "fontController" DIV, I have two HTML buttons to increase and decrease the font size.

Now let's create jQuery methods that will apply the font increase/decrease functionality to "aboutVS" named DIV when the user clicks the button.

<head>
  <title>Exploring jQuery</title>
  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script type="text/javascript">
$(document).ready(function () {
  var $aboutVS = $('div.aboutVS');
$('#fontController button').click(function () {
  var num = parseFloat($aboutVS.css('fontSize'));
  if (this.id == 'fontController-large') {
num *= 1.4;
} else if (this.id == 'fontController-small') {
num /= 1.4;
}
$aboutVS.css('fontSize', num + 'px');
});
});
  </script>
</head>

In the above jQuery I have a couple of new concepts; let's look at them one by one.

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

Just using the reference of the jQuery library, I have stored that file in the Scripts folder in the root.
var $aboutVS = $('div.aboutVS');

Creates a new variable containing a jQuery object pointing to <div class=" aboutVS">. Notice the use of a $ in the variable name, $aboutVS. As $ is a legal character in JavaScript identifers, we can use it as a reminder that the variable is storing a jQuery object.
$('#fontController button').click(function () {

Just raises the method from a button click; note buttons are located inside the fontController DIV.
var num = parseFloat($aboutVS.css('fontSize'));

Created a new variable "num" and assigned the current fontSize of contents that are available inside the "aboutVS" DIV.
if (this.id == 'fontController-large') {

Uss an if statement to check the triggered button id, if found true then, assign the variable num *= 1.4.
$aboutVS.css('fontSize', num + 'px');