Tag: Methods

jQuery Methods and CSS: Restaurant Application

Video tutorial illustrates the use of jQuery methods to add and remove CSS class to HTML elements on the fly or dynamically.

Let’s assume that we have a client and her requirements:
She has a menu with both vegetarian and non-vegetarian items in it.
Once her customer clicks on a button called Vegetarian, all the vegetarian items must get highlighted in the menu.
Once the customer clicks on Restore button, all the highlighting must disappear and the menu must look as before.

HTML code
index.html

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

<html>
 <head><title>jQuery Methods and CSS!</title>
  <style type="text/css">
   .highlight{
     background-color: lightgreen;
     width: 100px;
   }
  </style>
 </head>
 <body>
         <ol>
          <li class="veg">Rice</li>
          <li class="non_veg">Chicken</li>
          <li class="veg">Veg Pizza</li>
          <li class="non_veg">Fish</li>
          <li class="veg">Fruits and Juice!</li>
         </ol>
         <br />
 
         <button id="select_veg">Vegitarian</button>
         <button id="restore_menu">Restore</button>
 
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have an ordered list with some list items in it.
The vegetarian items have a class name of veg.
and non-vegetarian items have a class name of non_veg.

Two buttons with its respective ID’s.

Some CSS coding:
It has 1 class which has a background color of light green and a width of 100px.

This class must be dynamically applied to the list items with class name veg, upon clicking of the button Vegetarian.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
 $("#select_veg").click( function() {
    $("li.veg").addClass("highlight");
 });
 
 $("#restore_menu").click( function() {
    $("li.veg").removeClass("highlight");
 });
 
});

Once the document is loaded and ready we call an anonymous function.
When the user clicks on the button with an id of select_veg, we select all the list items with the class veg and add the CSS class highlight to it, using addClass method of jQuery. Which brings light green background color to those list items.

When the user clicks on Restore button which has an id of restore_menu, we remove the CSS class highlight from all the list items using removeClass method of jQuery.

Video Tutorial: jQuery Methods and CSS: Restaurant Application


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

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



This creates a great user experience while viewing the items without reloading the menu page.

You could use these methods addClass() and removeClass() to create such rich user experience in your applications.

jQuery Event Handling: Binding and Unbinding

Video tutorial to demonstrate binding and unbinding of events in jQuery.

Events are objects which has data and methods in it.

In this tutorial we are taking 3 paragraph tags with some text inside it.
Once the user clicks on a paragraph, we display the string in the paragraph in an alert box.

Strings in our example are:
Apple
Oracle
Microsoft

HTML code
index.html

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

<html>
 <head><title>Bind & Unbind of Events: jQuery!</title></head>
 <body>
                      <p>Apple</p>
                      <p>Oracle</p>
                      <p>Microsoft</p>
 
                      <button>Unbind</button>
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we’re taking 3 paragraphs with some string in it.
And a button, to unbind the events associated with those paragraph texts!

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
  $("p").bind( 'click', function() {
    alert( $(this).text()  );
  });
 
  $("button").bind( 'click', function() {
    $("p").unbind();
  });
 
});

Here p tag is associated with click event. So once the user clicks on the p tag, an alert box appears with the text present inside the paragraph which was being clicked.
button is also associated with click event. So once the user clicks on the button, all the events (click event in our example ) associated with the p tag gets removed, detached, unbinded.

We could also write the code in usual way: i.e., in convenience method as shown below

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
  $("p").click( function() {
    alert( $(this).text()  );
  });
 
  $("button").click( function() {
    $("p").unbind();
  });
 
});

This code does the same thing as shown in binding method above.
Check with both the codes while you try it on your own.

Video Tutorial: jQuery Event Handling: Binding and Unbinding


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

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



Binding and Unbinding of events would be helpful when we develop applications which does require all the or some events to be detached after some task is completed.

Also try other events like:
.dbclick()
.focus()
.focusin()
.focusout()
.hover()
.keypress
.keyup
.keydown
.mouseover()
.mouserin()
.mouseout()
.submit()
.select()
.scroll()
.trigger()
.toggle()
.load()
.unload() ..etc

Variables and Javascript Methods In jQuery

In this video tutorial we shall see how to use variables and javascript methods in jQuery.

In this tutorial, we shall take a image inside our html document. Once the user clicks on this image, we shall use some javascript methods to generate random discounts and display it using alert box.

Note:
var is a keyword to declare variable.
Math.random() generates random numbers between 0 and 1.
Math.floor() is used to round off the floating point number to integer.
alert() is used to show the message stored in the variable in alert box.
+ is concatenation operator.

HTML code
index.html

1
2
3
4
5
6
7
8
9

<html>
 <head><title>Variables and JavaScript Methods: jQuery</title></head>
 <body>
                      <img src="images/aperture.png" width="79" height="79" />
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we are including 1 image.
We have also linked the web page to jQuery library file and our my_script.js file.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

 $(document).ready( function() {
 
   $("img").click( function() {
 
     var discount = Math.floor( Math.random() * 5 ) + 10;
     var msg      = "Discount: "+discount+"%";
     alert(msg);
 
   });
 
 });

Once the web page is loaded, and the user clicks on the image:
Math.random() function generates some random number between 0 and 1, which is multiplied by 5 and the resulting number is then rounded off to a integer number using Math.floor() method.
This number is then added with some string message and is stored inside another variable called msg.
This is passed to alert() method and is displayed on a alert box.

Math.random() and Math.floor() and alert() are javascript functions.

Video Tutorial: Variables and Javascript Methods In jQuery


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

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



If you want to learn “javascript” visit Javascript Category on our blog.

With this tutorial, you now know that, your javascript knowledge will come handy. If you don’t know Javascript, still you need not worry as we would explain the things we will use in our jQuery tutorial.

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.