jQuery Tutorial - 83 - scrollTop(Video Tutorial)

Javascript Tutorial or Lessions


1. Javascript Tutorial Introduction
Javascript's role on the Web
Hypertext markup language
Create an HTML document
The Javascrip programming language
Logic and Debugging
Section B: A first Javascrip program
The <SCRIPT> tag
Create a Javascript source file
Adding comments toa Javascript program
Hiding Javascript from incompatible browsers
Placing Javascript in HEAD or BODY sections

2. Variables, Functions, Objects, and Events 
Section A: Working with variables, functions, and objects
Variables
Defining custom functions
Calling functions
Built-in Javascript Objects
Understanding Javascript objects
Custom Javascript objects
Built-in Javascript objects
Custom object inheritance and prototypes
Custom object methods
Variable scope
Section B: Using events
Understanding events
HTML tags and events
Event handlers
Links
Link events
Create an image map

3. Data Types and Operators 
Section A: Using data type
Data types
Numeric data types
Boolean values
Strings
Arrays
Section B: Expressions and Operators
Expressions
Arithmetic operatiors
Assignment operators
Comparison operators
Logical operators
Working with strings (string object)
Operator precedence
Create the calculator program

4. Decision Making with Control Structures and Statements 
Section A: Decision making
if statements
iff... else statements
Nested if and if...else statements
switch statements
Section B: Repetition
while statements
do ... while statements
for ... in statement
with statements
continue statement

5. Windowa and Frames 
Section A: Working with windows
The Javascript object model
The window object
Opening and closing windows
Working with timeouts and intervals
Section B: Working with frames and objects
Create frames
Using the TABLE attribute
Nested frames
Frame formating
The NOFRAMES tag
The location object
The history object
The Navigator object
Referring to frames and windows

6. Forms 
Section A: Working with forms in Javascript
Overview of froms
The Common Gateway Interface
The <FORM> tag
From elements: an overview
Input fields
Text boxes
Password boxes
Radio buttons
Check boxes
Reset buttons
Command buttons
Submit button
Image submit buttons
Section B: Validating a Using input to a form
Hidden form fields
The form object
Referencing forms and form elements
Form event handlers
Form methods
Form properties
E-mailing form data

7. Debuging JavaScript 
Section A: Basic degugging techniques
Understadning debugging
Error message
Tracing errors with the alert() method
Tracing errors with the write() and writeln() methods
Using comments to locate bugs
Additional debugging techniques
Checking HTML
Analyzing your logic
Testing statements with Java URLs
Reloading an HTML document

Section B: Advanced debugging techniques and resources
Using a for .. in statement to check object properties
Watch points in Netscape
Netscape Javascript debugger
Source view
Styep commands
Breakpoints
Tacing variables and expressions
The call stack window
Microsoft Script debugger
Source view
Styep commands
Breakpoints
Tacing variables and expressions
The call stack window

8. Dynamic HTML and Animation
Section A: Dynamic HTML
Introduction
Document object model
Document object properties
The image object
Animation with the image object
image caching
Section B: Animation and cascading stype sheets
Cascading stype sheets
Using Javascript with CSS styles
Using Javascript and stypes in Older versions of Navigator
Using Javascript and style in older versions of internet explorer
Using Javascript and style with the W3C DOM
CSS postioning
dynamic positioning in older versions of internet explorer
dynamic positioning in Navigator
dynamic positioning with W3C DOM-compliant browsers
Cross-browser compatibility

Javascript Lession1 Part A

Javascript Lession 1 Part A


How to add text to div or division using jquery


In the previous example, we have seen how to add anchor tag to body using JQuery AppendTo Keyword. In the example we are going to see, how to append text to existing division.

Main Code:

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');


Complete Code:
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');
</script>
</body>
</html>
 

Output:

How to add text to div using jquery
How to add text to div using jquery


JQuery and Javascript Best Practices


Best Practices

  1. Lesson Introduction
  2. JavaScript Best Practices
  3. JavaScript Best Practices Reviewed
  4. jQuery Best Practices
  5. jQuery Best Practices Reviewed
  6. Code Organization
  7. Code Organization Reviewed
  8. Do Not Treat jQuery as a Black Box

JQuery Plugin Basics and Advance Tutorial


JQuery Plugin Basics and Advance Tutorial

  1. Lesson Introduction
  2. How to Create a Basic Plugin
  3. How to Create a Basic Plugin Reviewed
  4. Finding and Evaluating Plugins
  5. Creating a Plugin Using the Alsup Pattern
  6. Creating a Plugin Using the Alsup Pattern Exercise Reviewed
  7. Writing Stateful Plugins with the jQuery UI Widget Factory
  8. Make a Table Sortable (Optional)
  9. Make a Table Sortable Exercise Reviewed

JQuery Ajax Tutorial or Lession


JQuery Ajax Tutorial

  1. Lesson Introduction
  2. Key Concepts
  3. jQuery Ajax-Related Methods
  4. jQuery  Ajax-Related Methods Reviewed
  5. Ajax and Forms
  6. Working with JSON
  7. Working with JSON Reviewed
  8. Ajax Events
  9. Load External Content
  10. Load Content Using JSON
  11. Load Exercises Reviewed


JQuery Custom Events Tutorial


JQuery Custom Events

  1. Lesson Introduction
  2. About Custom Events
  3. About Custom Events Reviewed
  4. Custom Events
  5. Review of Custom Events Exercise
  6. Conclusion


JQuery Effects Tutorial


JQuery Effects

  1. Lesson Introduction
  2. Built-in Effects
  3. Built-in Effects Reviewed
  4. Limitations on Effects
  5. Queuing of Effects with Other Operations
  6. Queuing of Effects with Other Operations Reviewed
  7. Callbacks - Doing Something When an Effect is Done
  8. Custom Effects with $.fn.animate
  9. Custom Effects with $.fn.animate Reviewed
  10. Managing Effects
  11. Reveal Hidden Text
  12. Create Dropdown Menus
  13. Effects Exercises 6 & 7 Reviewed
  14. Create a Slideshow

Difference between window.onload and ready event in the JQuery

Introduction: 

Using this JQuery tutorial, we will learn what is the difference between window.load and document.ready event in the JQuery.

Description: 

JQuery code fires DOM is ready to be traversed and manipulated. But for some of the situations, we need to wait for complete window and resources must be load. In that situations we have to use the load() event with JQuery.

Please go through below JQuery Example. If you run below code u will get homepage as silver code after clicking on alert you will get background color as green.

Main code:



                  $(document).ready(function () {
                      $(document.body).css('background-color', 'silver');
                  });

                  $(window).load(function () {
                      alert('this will alert after all the window resources completly loaded');
                      $(document.body).css("background-color", "green");
                  });
              


Complete Code:


<html>
<head>
    <title></title>
              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
              <script type="text/javascript">
                  $(document).ready(function () {
                      $(document.body).css('background-color', 'silver');
                  });

                  $(window).load(function () {
                      alert('this will alert after all the window resources completly loaded');
                      $(document.body).css("background-color", "green");
                  });
              
              </script>
</head>
<body>

</body>
</html>




Output: 

Before window load:

Before window load JQuery
Before window load:



After window load:
After window load in JQuery
After window load in JQuery


Difference between JavaScript and JScript?


JScript is the Microsoft ECMAScript scripting language specification.

JavaScript (Netscape/Mozilla implementation of the ECMA scripting language specification), JScript, and ECMAScript are very similar languages. But "JavaScript" is often used to refer to ECMAScript or JScript.

JQuery Append Keyword Example Code


Using this JQuery Append Keyword, we can able to Add the element to the existing DOM element with the deleting the previous content.


    <script type="text/javascript">
        $('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
   </script>


Complete Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title></title>

</head>
<body>
<div id="ranga"> <b>Ranga Rajesh Kumar -</b></div>

    <script type="text/javascript">
        $('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
   </script>

</body>
</html>

Output:
JQuery Append Keyword Example Code
JQuery Append Keyword Example Code

JQuery attr() Method Example Code


Using JQuery attr() method, we can able to add the attribute the DOM element. In the below example i have added the href attribute to the existing anchor tag.

Sample Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title></title>

</head>
<body>
<a>Ranga</a>

    <script type="text/javascript">
        jQuery('a').text('JQueryExampleCode.blogspot.com').attr("href", "http://jqueryexamplecode.blogspot.com");
    </script>
</body>
</html>
 

Output:
JQuery attr() Method Example Code
JQuery attr() Method Example Code


JQuery Events and Event Handlers Tutorial

Events and Event Handlers


  1. Lesson Introduction
  2. Connecting Events to Elements
  3. Connecting Events to Elements Reviewed
  4. Inside the Event Handling Function
  5. Triggering Event Handlers
  6. Triggering Event Handlers Reviewed
  7. Increasing Performance with Event Delegation
  8. Event Helpers
  9. Create an Input Hint
  10. Create an Input Hint Reviewed
  11. Add Tabbed Navigation




jQuery Basic Tutorial or concepts


jQuery Basic Tutorial

  1. Lesson Introduction
  2. Introducing jQuery
  3. Using $(document).ready()
  4. Including and Using jQuery
  5. Selecting Elements
  6. Selecting
  7. Selecting Elements Reviewed
  8. Working with Selections
  9. CSS, Styling, and Dimensions
  10. Traversing
  11. Traversing Reviewed
  12. Traversing
  13. Manipulating the DOM
  14. Manipulating
  15. Manipulating the DOM Reviewed

JQuery Ready() function syntax and usage


JQuery fires the custom event called ready(), whenever DOM is loaded and ready for manipulation.

If you want to execute any kind of events, what should work from this ready() handler only.

There are different ways are there for using ready function in the JQuery. Here i am discussing three ways.

Way 1

        // Standard.
        jQuery(document).ready(function () { alert('DOM Ready!'); });


Way 2

        jQuery(function () { alert('Using this syntax also DOM is ready'); });


Way 3

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });



Output:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        // Standard.
        jQuery(document).ready(function () { alert('jqueryexamplecode.blogspot.com'); });

        jQuery(function () { alert('Using this syntax also DOM is ready'); });

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });
    </script>
</head>
<body>
</body>
</html>


Output:
JQuery Ready() function syntax and usage
JQuery Ready() function syntax and usage
If you know any other ways, you can write in the comments section. 

When to load CSS Files while working with JQuery?


JQuery is recommending to load all CSS files before firing ready event. 

jQuery Core Tutorial


jQuery Core

  1. Lesson Introduction
  2. $ vs jQuery
  3. $ vs $()
  4. $ vs $()
  5. Utility Methods
  6. Utility Methods Reviewed

How to use $ or jQuery keyword differently in JQuery coding


After some days with jquery, i got a doubt like "can we customize $ or jQuery keyword in jquery coding". We can do that using JQuery.

It is very simple to do conversion of $ with your custom name.

Main Code:

              var JQueryExampleCode = $; //(or) jQuery

              JQueryExampleCode(function () {
                  JQueryExampleCode('body').css("background-color", "Silver}");
                  alert('JQueryExampleCode.blogspot.com'); 
              });


Complete Code:


<html>
<head>
    <title></title>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
          <script type="text/javascript">
              var JQueryExampleCode = $; //(or) jQuery

              JQueryExampleCode(function () {
                  JQueryExampleCode('body').css("background-color", "Silver}");
                  alert('JQueryExampleCode.blogspot.com'); 
              });
          </script>
</head>
<body>
This is body content. 
</body>
</html>
 

Output:

How to use $ or jQuery keyword differently in JQuery coding
How to use $ or jQuery keyword differently in JQuery coding

How to append Anchor tag to HTML Body Dynamically using jquery


Using JQuery we can add anchor tag to body very easily. This can be possible by the AppendTo JQuery Method.

In the below example, i am appending anchor tag to body using jquery. We can also append div to any class or div using this Jquery AppendTo Keyword.

MainCode:


$('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');


Complete Code:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">
    $('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');

   
</script>
</body>
</html>


Output:
How to append Anchor tag to HTML Body Dynamically using jquery
How to append Anchor tag to HTML Body Dynamically using jquery

jQuery text() method example code


In most of the situations, we will use the JQuery text() method in the coding part. This JQuery text method will show the data from that particular element. This JQuery text method can concatenates the strings found in the elements of a wrapper set.


<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div class="MyClass">
        Ranga
    </div>
    <div class="MyClass">
        Rajesh
    </div>
    <div class="MyClass">
        Kumar -- jqueryexamplecode.blogspot.com
    </div>

    <script type="text/javascript">
        alert($('.MyClass').text());
    </script>
</body>
</html>
 

Output:

jQuery text() method example
jQuery text() method example

JQuery Coding - Keyword Color Standards


JQuery color coding standards are like javascript only. we can see this color standard from the Visual studio.

See below image for the reference.

JQuery Coding - Keyword Color Standards
JQuery Coding - Keyword Color Standards

JQuery Plugin Tutorial - My First JQuery Plugin alert tutorial


In this JQuery Tutorial, I am writing my first JQuery Plugin. JQuery plugin code writing is very awesome experience to the Web Developers.

This is the JQuery plugin code. We can keep this code in the separate js file also. Since it is basic tutorial I have included in the html page itself.


    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);



Below example will show the alert message at the time of loading page.

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);


    $(document).ready(function () {
            $('#ranga').MyFirstPlugIn();
        });
    </script>
</head>
<body>
<div id="ranga">
http://aspnettutorialonline.blogspot.com/
</div>
</body>
</html>


Output: 

JQuery Plugin Tutorial
JQuery Plugin Tutorial





JAVASCRIPT Basic Tutorial or Lessions

Javascript Basics


  1. Lesson Introduction
  2. Syntax Basics
  3. Reserved Words
  4. JavaScript Basics Quiz 1
  5. Operators
  6. Operations on Numbers and Strings
  7. Operations on Numbers and Strings Reviewed
  8. Logical Operators
  9. Comparison Operators
  10. JS Basics Quiz 2
  11. Conditional Codes
  12. Conditional Variable Assignments with the Ternary Operator
  13. Switch Statements
  14. Loops
  15. Arrays
  16. Objects
  17. Objects Reviewed
  18. Functions
  19. JS Basics Quiz 3
  20. Testing Type
  21. Scope
  22. Scope Reviewed
  23. Closures



JQuery Tutorial or Lessons

JQuery Tutorial or Lessons


I am offering JQuery training with low cost in the Bangalore. I will training in the Weekends only. Training cost will be 2, 000 rupees. 

Interested people can send mail to me : dotnetrangarajesh@gmail.com


1.  JAVASCRIPT Basics

  1. Lesson Introduction
  2. Syntax Basics
  3. Reserved Words
  4. JS Basics Quiz 1
  5. Operators
  6. Operations on Numbers and Strings
  7. Operations on Numbers and Strings Reviewed
  8. Logical Operators
  9. Comparison Operators
  10. JS Basics Quiz 2
  11. Conditional Codes
  12. Conditional Variable Assignments with the Ternary Operator
  13. Switch Statements
  14. Loops
  15. Arrays
  16. Objects
  17. Objects Reviewed
  18. Functions
  19. JS Basics Quiz 3
  20. Testing Type
  21. Scope
  22. Scope Reviewed
  23. Closures
2.  jQuery Basic Concepts

  1. Lesson Introduction
  2. Including jQuery
  3. Using $(document).ready()
  4. Including and Using jQuery
  5. Selecting Elements
  6. Selecting
  7. Selecting Elements Reviewed
  8. Working with Selections
  9. CSS, Styling, and Dimensions
  10. Traversing
  11. Traversing Reviewed
  12. Traversing
  13. Manipulating the DOM
  14. Manipulating
  15. Manipulating the DOM Reviewed



 3.      jQuery Core

  1. Lesson Introduction
  2. $ vs jQuery
  3. $ vs $()
  4. $ vs $()
  5. Utility Methods
  6. Utility Methods Reviewed 


 4.     Events and Event Handlers
  1. Lesson Introduction
  2. Connecting Events to Elements
  3. Connecting Events to Elements Reviewed
  4. Inside the Event Handling Function
  5. Triggering Event Handlers
  6. Triggering Event Handlers Reviewed
  7. Increasing Performance with Event Delegation
  8. Event Helpers
  9. Create an Input Hint
  10. Create an Input Hint Reviewed
  11. Add Tabbed Navigation


 5.   EFFECTS
  1. Lesson Introduction
  2. Built-in Effects
  3. Built-in Effects Reviewed
  4. Limitations on Effects
  5. Queuing of Effects with Other Operations
  6. Queuing of Effects with Other Operations Reviewed
  7. Callbacks - Doing Something When an Effect is Done
  8. Custom Effects with $.fn.animate
  9. Custom Effects with $.fn.animate Reviewed
  10. Managing Effects
  11. Reveal Hidden Text
  12. Create Dropdown Menus
  13. Effects Exercises 6 & 7 Reviewed
  14. Create a Slideshow

  
6.     Ajax

  1. Lesson Introduction
  2. Key Concepts
  3. jQuery Ajax-Related Methods
  4. jQuery  Ajax-Related Methods Reviewed
  5. Ajax and Forms
  6. Working with JSON
  7. Working with JSON Reviewed
  8. Ajax Events
  9. Load External Content
  10. Load Content Using JSON
  11. Load Exercises Reviewed


 7.      Plug ins
  1. Lesson Introduction
  2. How to Create a Basic Plugin
  3. How to Create a Basic Plugin Reviewed
  4. Finding and Evaluating Plugins
  5. Creating a Plugin Using the Alsup Pattern
  6. Creating a Plugin Using the Alsup Pattern Exercise Reviewed
  7. Writing Stateful Plugins with the jQuery UI Widget Factory
  8. Make a Table Sortable (Optional)
  9. Make a Table Sortable Exercise Reviewed


 8.     Custom Events
  1. Lesson Introduction
  2. About Custom Events
  3. About Custom Events Reviewed
  4. Custom Events
  5. Review of Custom Events Exercise
  6. Conclusion



 9.     Best Practices

  1. Lesson Introduction
  2. JavaScript Best Practices
  3. JavaScript Best Practices Reviewed
  4. jQuery Best Practices
  5. jQuery Best Practices Reviewed
  6. Code Organization
  7. Code Organization Reviewed
  8. Do Not Treat jQuery as a Black Box


jQuery Tutorial - 82 - width/height(Video Tutorial)

jQuery Tutorial - 81- width/height(Video Tutorial)

jQuery Tutorial - 80 - clone(Video Tutorial)

jQuery Tutorial - 78 - append(Video Tutorial)

jQuery Tutorial - 79 - appendTo(Video Tutorial)

jQuery Tutorial - 77 - Gallery Fading Effect(Video Tutorial)

jQuery Tutorial - 76 - Gallery Fading Effect(Video Tutorial)

jQuery Tutorial - 75 - Delay(Video Tutorial)

jQuery Tutorial - 74 - Stop(Video Tutorial)

jQuery Tutorial - 73 - Slide Toggle(Video Tutorial)

jQuery Tutorial - 72 - Slide Up(Video Tutorial)

jQuery Tutorial - 71 - Slide Down(Video Tutorial)

jQuery Tutorial - 70 - Fade Toggle(Video Tutorial)

>

jQuery Tutorial - 69 - Fade Out(Video Tutorial)

jQuery Tutorial - 68 - Fade In(Video Tutorial)

jQuery Tutorial - 67 - Show(Video Tutorial)

jQuery Tutorial - 66 - Hide(Video Tutorial)

Apple style Slideshow Gallery - JQuery Plugin

This Navigation plugin is very good for showing slide show gallery on the webpage.



Demo           Source

Slide Out Navigation - JQuery Plug in

This is one of the good plug in for the Slide show navigation. 

Required Changes:

  • HTML Tags
  • CSS
  • Javascript







jQuery Tutorial - 64 - find(Video Tutorial)

jQuery Tutorial - 65 - has(Video Tutorial)

jQuery Tutorial - 63 - next/nextAll and prev/prevAll(Video Tutorial)

jQuery Tutorial - 61 - each(Video Tutorial)

jQuery Tutorial - 60 - each(Video Tutorial)

jQuery Tutorial - 59 - removeAttr(Video Tutorial)

jQuery Tutorial - 58 - removeAttr(Video Tutorial)

jQuery Tutorial - 57 - toggleClass(Video Tutorial)

jQuery Tutorial - 56 - removeClass(Video Tutorial)

jQuery Tutorial - 62 - next/nextAll and prev/prevAll(Video Tutorial)

jQuery Tutorial - 55 - addClass(Video Tutorial)

jQuery Tutorial - 54 - attr(Video Tutorial)

jQuery Tutorial - 52 - html(Video Tutorial)

jQuery Tutorial - 53 - val(Video Tutorial)

jQuery Tutorial - 51 - Hover over description(Video Tutorial)

jQuery Tutorial - 50 - Hover over description(Video Tutorial)

jQuery Tutorial - 49 - Hover over description(Video Tutorial)

jQuery Tutorial - 48 - Hover over description(Video Tutorial)

jQuery Tutorial - 47 - Hide/Show a DIV(Video Tutorial)

jQuery Tutorial - 46 - Character Counting Remaining on Textarea(Video Tutorial)

jQuery Tutorial - 45 - Character Counting Remaining on Textarea(Video Tutorial)

jQuery Tutorial - 44 - Live(Video Tutorial)

jQuery Tutorial - 43 - Live(Video Tutorial)

jQuery Tutorial - 42 - Bind(Video Tutorial)

jQuery Tutorial - 41 - Focus out(Video Tutorial)

jQuery Tutorial - 40 - Focus in(Video Tutorial)

jQuery Tutorial - 39 - Select(Video Tutorial)

jQuery Tutorial - 38 - Scroll(Video Tutorial)

jQuery Tutorial - 37 - Hover(Video Tutorial)

jQuery Tutorial - 35 - Submit(Video Tutorial)

JQuery Complete Video Tutorial online



Complete posts