Category: jQuery

Optimize / Improve Performance of jQuery Applications

Video tutorial illustrating simple tweaks which help optimize / improve the performance of jQuery Applications.

To Optimize
1. Write all javascript programs in an external file and embed it into the html pages.
2. Whenever possible, embed the javascript file at the end of body tag. i.e., just before the closing body tag.
3. It’s also good practice to separate CSS coding to an external file and then embed it to the web pages.

How it helps ?
1. i. If you have thousands of web pages, writing the same code on all the pages and maintaining it and/or modifying it is a touch job.
Having it in an external file helps in re-usability and maintainability.
ii. It only loads the javascript files once and do not load the same files again and again for all other pages, hence saving a lot of bandwidth. Also highly optimizing the load time of web pages.
2. When the parser encounters these javascript files, they stop loading all other elements and allocate all its bandwidth to load javascript file. So writing it at the end of body tag helps. Since all other important elements like images, content will be loaded before these time-consuming javascript files.

Video Tutorial: Optimize / Improve Performance of jQuery Applications


[youtube https://www.youtube.com/watch?v=BsPgkr-YGMs]

YouTube Link: https://www.youtube.com/watch?v=BsPgkr-YGMs [Watch the Video In Full Screen.]



Above video uses Animation of Text and Image: jQuery code to illustrate the optimization concept. If you have not already seen the video, we highly encourage you to watch it and practice it.

In our future tutorials we will be writing most of our javascript code in external file and will be embedding them at the end of body tag. With this tutorial you know why we would do that!

Animation of Text and Image: jQuery

Video tutorial to illustrate animation of text and image using jQuery.

In this tutorial, we accomplish:
Animation of text: using animate method.
Display of hidden image: using fadeIn method.
Toggle of image: using slideToggle method.
Change the color of the text being animated: using jQuery’s css method.

xHTML code

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
 <head><title>jQuery Basics</title>
 </head>
 <body>         <button id="top">Move Top</button>
                <button id="down">Move Down</button>
                <button id="blue">Blue Coloring!</button>                
                <button id="img_show">Show Image</button>
 
               <div id="move">jQuery is awesome!</div>
               <img src="https://technotip.com/logo.png"/>
 
 
 </body>
</html>

Here we have 4 buttons, 1 div tag which contains some string in it, and 1 image tag.
Each button has its own unique ID, which is referenced to track user click event.

CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  <style type="text/css">
    #move{
      position: absolute;
      top: 200;
      left: 400;
    }
    img {
      display: none;
      padding: 10px;
      position: absolute;
      top: 100;
      left: 400;
 
    }
  </style>

Using Cascading Stylesheet we position the string present in div tag and the image conveniently on our web page.

jQuery
Move Top

1
2
3
4
5
6
7

$(document).ready( function() {
 
    $("#top").click( function() {
       $("#move").animate({top: 30}, 200);
     });
 
});

Once the #top button is clicked, the string inside div tag(which has move as its id), moves upwards leaving 30px from top of the document and 200px from left.

Move Down

1
2
3
4
5
6
7

$(document).ready( function() {
 
    $("#down").click( function() {
       $("#move").animate({top: 200}, 200);
     });  
 
});

Once the #down button is clicked, the string inside div tag(which has move as its id), moves down leaving 200px from top of the document and 200px from left.

Changing CSS property/value using jQuery

1
2
3
4
5
6
7

$(document).ready( function() {
 
 $("#blue").click( function() {
        $("#move").css("color", "blue");
     });
 
});

Once the #blue button is clicked, the color of string inside div tag(which has move as its id), changes to blue.
.css() method takes 2 parameters, first one being css property and the second one its value.

Toggle image with sliding effect

1
2
3
4
5
6
7

$(document).ready( function() {
 
   $("#img_show").click( function() {
       $("img").slideToggle("slow");
     });
 
});

Once the #img_show button is clicked, the image slides and toggles with slideIn and slideOut effect.

Image appears on the web page with fadeIn effect

1
2
3
4
5
6
7

$(document).ready( function() {
 
   $("#img_show").click( function() {
       $("img").fadeIn("slow");
     });
 
});

Once the #img_show button is clicked, the hidden image fades into the web page.
The image is hidden with the help of css.

Video Tutorial: Animation of Text and Image: jQuery


[youtube https://www.youtube.com/watch?v=1nDGjCrfvrU]

YouTube Link: https://www.youtube.com/watch?v=1nDGjCrfvrU [Watch the Video In Full Screen.]



Full code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<html>
 <head><title>jQuery Basics</title>
 
  <script src="script/jquery-1.8.1.min.js"></script>
  <script type="text/javascript">
 
   $(document).ready( function() {
 
 
     $("#top").click( function() {
       $("#move").animate({top: 30}, 200);
     });
 
     $("#down").click( function() {
       $("#move").animate({top: 200}, 200);
     });     
 
     $("#img_show").click( function() {
       $("img").slideToggle("slow");
     });
 
     $("#blue").click( function() {
        $("#move").css("color", "blue");
     });
 
     $("#txt_toggle").click( function() {
        $("#move").slideToggle("slow");
     });
 
   });
 
  </script>
 
  <style type="text/css">
    #move{
      position: absolute;
      top: 200;
      left: 400;
    }
    img {
      display: none;
      padding: 10px;
      position: absolute;
      top: 100;
      left: 400;
 
    }
  </style>
 
 </head>
 <body>         <button id="top">Move Top</button>
                <button id="down">Move Down</button>
                <button id="txt_toggle">Text Toggle</button>
                <button id="blue">Blue Coloring!</button>                
                <button id="img_show">Show Image</button>
 
               <div id="move">jQuery is awesome!</div>
               <img src="https://technotip.com/logo.png"/>
 
 
 </body>
</html>

Watch previous day videos and you’ll understand today’s and forthcoming video tutorials easily.

Previous Day Videos:
jQuery Basics: Replace Text/String Inside HTML Document
jQuery: Selectors, Methods, Effects
jQuery: Basic Image Effects

jQuery: Basic Image Effects

Video tutorial illustrates the fadeToggle, fadeIn, fadeOut effect on image using jQuery.

jQuery Code

1
2
3
4
5
6
7
8
9
10
11

 <script type="text/javascript">
               $(document).ready( function() {
 
                 $("#togg").click( function() {
 
                   $("img").fadeToggle("slow");
 
                 });
 
               });
  </script>

Once the document is ready and the user clicks on the button(with togg as its id), the image fades In and fades Out.
This fadeIn and fadeOut effect is accomplished using fadeToggle method of jQuery.

To understand the basic coding of jQuery, please watch previous day videos about selectors and methods.

Complete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<html>
 <head><title>Image Toggle</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
  </script>
  <style type="text/css">
   img{
    position: absolute;
    top: 100;
    left: 200;
   }
  </style>
 
  <script type="text/javascript">
               $(document).ready( function() {
 
                 $("#togg").click( function() {
 
                   $("img").fadeToggle("slow");
 
                 });
 
               });
  </script>
  </head>
 <body>
  <img src="https://technotip.com/logo.png" />
  <button id="togg">Toggle Image!</button>
 </body>     
</html>

Inside the HTML document we have added a image and a button. Once the user clicks on this button, our jQuery code gets executed and the fade In and fade Out effect is presented to the user.
For the jQuery code to be interpreted by the javascript interpreter, we need to include the jQuery standard library file to our web page.

Some basic CSS makes the image look well positioned.

Video Tutorial: jQuery: Basic Image Effects


[youtube https://www.youtube.com/watch?v=CQUeZ7WcOgM]

YouTube Link: https://www.youtube.com/watch?v=CQUeZ7WcOgM [Watch the Video In Full Screen.]



Practice this image effect program and also try using
.fadeIn();
.fadeOut();

.slideIn();
.slideOut();
.slideToggle();

functions instead of .fadeToggle(); function.

Also notice that, page doesn’t reload while you perform these DOM manipulations using jQuery. This is a major advantage which builds up rich user experience.

jQuery: Selectors, Methods, Effects

This video tutorial shows the basics of jQuery Selectors, Methods and some nice little image and text effects.

It’ll be fun..

Note:
$(); is a shortcut to $jQuery(); and it’s called Selector.
Its used to select id’s, class, elements.

Selecting id’s, classes and elements is similar to that of CSS Selectors.
For id use # symbol.
For Class use . symbol.
For tags or elements, use tag name or element name.

jQuery Example Code:

1
2
3
4
5

 $(document).ready( function() {
    $("p").click( function() {
      $("img").fadeOut("slow");
  });
});

Once the document is ready or loaded and the user clicks on paragraph text, the image slowly fades out. Simple.

Video Tutorial: jQuery: Selectors, Methods, Effects


[youtube https://www.youtube.com/watch?v=G-bYNbZuzzE]

YouTube Link: https://www.youtube.com/watch?v=G-bYNbZuzzE [Watch the Video In Full Screen.]



Other methods / effects to try ..

.slideUp();
.slideDown();
.slideToggle();

.fadeIn();
.fadeOut();
.fadeTo();
.fadeToggle();

$(“p”).hide(“fast”);
$(“p”).show(“slow”);
$(“img”).slideUp();
$(“p”).html(“Replacement String”);

We’ll come up with some more video tutorial ..stay subscribed, and try these fun program yourselves too.

Also share how you’re using jQuery in your projects and what you actually want to accomplish using it.

Sign into our forum and start discussing various jQuery and other topics and share your ideas and learn more collectively.

If you were not able to execute the above program, then need not worry, just search on our blog and you’ll find full detailed video tutorial writing and executing it step-by-step.
Hope you’re enjoying it.

jQuery Basics: Replace Text/String Inside HTML Document

Today lets start with learning jQuery.

In this video we show you where to get the jQuery library file and the text editor we are using to write our jQuery programs.

Since we are on Windows 7, we choose pspad.

For all the links and installation procedures, please watch the short video below.

To start the day 1 of learning jQuery, let’s do a simple string replacement program.
We shall change the text inside p tag once the user clicks on the text inside p tag.

Complete Code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
 <head><title>jQuery Basics</title>
 
  <script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready( function() {
      $("p").click( function(){
 
          $("p").html("jQuery is awesome!");
 
      } );
    } 
    );
  </script>
 </head>
 <body>
                  <p>JavaScript</p>
 </body>
</html>

First include the jQuery library file..and in next script tag, start writing your jQuery code.
The code is triggered once the html document loads i.e., when it is ready.
Once the page loads, a anonymous function is being called and is ready to register the user events.

When a user clicks on the p tag or its content, the string content(which is a separate node in DOM), is changed to jQuery is awesome!

Video Tutorial: jQuery Basics: Replace Text/String Inside HTML Document


[youtube https://www.youtube.com/watch?v=z917odQd30w]

YouTube Link: https://www.youtube.com/watch?v=z917odQd30w [Watch the Video In Full Screen.]



Write this program and setup your jQuery learning environment and be ready for the future video tutorials.

Try to change the tags, content and the code and also invoke the action for other user events other than just click.