Monday, July 31, 2017

What Can PHP do?

What Can PHP Do?

  • PHP can generate dynamic page content
  • PHP can create, open, read, write, delete, and close files on the server
  • PHP can collect form data
  • PHP can send and receive cookies
  • PHP can add, delete, modify data in your database
  • PHP can be used to control user-access
  • PHP can encrypt data
With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.
By at

What is a PHP File?

PHP File

  • PHP files can contain text, HTML, CSS, JavaScript, and PHP code
  • PHP code are executed on the server, and the result is returned to the browser as plain HTML
  • PHP files have extension ".php"
By at

Why is PHP an amazing and popular language?

PHP is an amazing and popular language-
It is powerful enough to be at the core of the biggest blogging system on the web (WordPress).
It is deep enough to run the largest social network (Facebook).
It is also easy enough to be a beginner's first server side language.
By at

What You Should Already Know before knowing HTML?

Before you continue you should have a basic understanding of the following:
  • HTML
  • CSS
  • JavaScript
By at

Give an example?

Example

<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html>
By at

What is PHP ?

PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
By at

Sunday, July 30, 2017

Show the structure of jQuery outerWidth() and outerHeight() Methods.

Example

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
By at

Give an example of jQuery outerWidth() and outerHeight() Methods

Example

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
By at

What is jQuery outerWidth() and outerHeight() Methods?

jQuery outerWidth() and outerHeight() Methods

The outerWidth() method returns the width of an element (includes padding and border).
The outerHeight() method returns the height of an element (includes padding and border).
By at

Draw a jQuery Dimensions.

jQuery Dimensions

jQuery Dimensions
By at

How many jQuery Dimension Methods

jQuery Dimension Methods

jQuery has several important methods for working with dimensions:
  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
By at

Friday, July 28, 2017

What does The css() method do?

The css() method sets or returns one or more style properties for the selected elements.
By at

Explain about Return a CSS Property.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax:
css("propertyname");
The following example will return the background-color value of the FIRST matched element:

Example

$("p").css("background-color");
By at

How will you Set a CSS Property?

Set a CSS Property

To set a specified CSS property, use the following syntax:
css("propertyname","value");
The following example will set the background-color value for ALL matched elements:

Example

$("p").css("background-color", "yellow");
By at

How to Set Multiple CSS Properties/

Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
The following example will set a background-color and a font-size for ALL matched elements:

Example

$("p").css({"background-color": "yellow", "font-size": "200%"});
By at

Explain about the Return a CSS Property.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax:
css("propertyname");
The following example will return the background-color value of the FIRST matched element:

Example

$("p").css("background-color");
By at

Give an example of Example Stylesheet.

Example Stylesheet

The following stylesheet will be used for all the examples on this page:
.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}
By at

Explain about jQuery Manipulating CSS.

jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We will look at the following methods:
  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute
By at

How many jQUERY methods?

There are mainly two jQuery methods:
  • remove() - Removes the selected element (and its child elements)
  • empty() - Removes the child elements from the selected element
By at

What is jQuery Method Chaining?

jQuery Method Chaining

Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

Example

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
By at

Wednesday, July 26, 2017

Give an example of displays an alert box after the load() method completes.

The following example displays an alert box after the load() method completes. If the load() method has succeeded, it displays "External content loaded successfully!", and if it fails it displays an error message:

Example

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});
By at

What is the callback function?

The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:
  • responseTxt - contains the resulting content if the call succeeds
  • statusTxt - contains the status of the call
  • xhr - contains the XMLHttpRequest object
By at

GIVE AN example loads the content of the element with id.

The following example loads the content of the element with id="p1", inside the file "demo_test.txt", into a specific <div> element:

Example

$("#div1").load("demo_test.txt #p1");
By at

Give an example of jQuery load() Method.

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
The following example loads the content of the file "demo_test.txt" into a specific <div> element:

Example

$("#div1").load("demo_test.txt");
By at

Describe about jQuery load() Method.

jQuery load() Method

The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
The optional callback parameter is the name of a function to be executed after the load() method is completed.
By at

What About jQuery and AJAX?

What About jQuery and AJAX?

jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page
By at

Without jQuery, AJAX coding can be a bit tricky!

Without jQuery, AJAX coding can be a bit tricky!
Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation. This means that you will have to write extra code to test for different browsers.
By at

Monday, July 24, 2017

Give an Example of jQuery.

Example of 

jQuery

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
By at

Describe Ajax in details.

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
1
2
3
4
5
6
7
8
9
 



$.ajax({







  url: "/api/getWeather",







  data: {







    zipcode: 97201







  },







  success: function( result ) {







    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );







  }







});
By at

Define the structure of Event Handling.

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
1
2
3
4
 



var hiddenBox = $( "#banner-message" );







$( "#button-container button" ).on( "click", function( event ) {







  hiddenBox.show();







});
By at

Explain about DOM Traversal and Manipulation.

DOM Traversal and Manipulation

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
1
 



$( "button.continue" ).html( "Next Step..." )
By at

What is jQuery?

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
By at

Friday, July 21, 2017

Add Several New Elements With after() and before().

Add Several New Elements With after() and before()

Also, both the after() and before() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements.
In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) :

Example

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML      var txt2 = $("<i></i>").text("love ");     // Create with jQuery     var txt3 = document.createElement("b");    // Create with DOM     txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img> }

By at

Describe about jQuery after() and before() Methods.

jQuery after() and before() Methods

The jQuery after() method inserts content AFTER the selected HTML elements.
The jQuery before() method inserts content BEFORE the selected HTML elements.

Example

$("img").after("Some text after");

$("img").before("Some text before");
By at

How to Add Several New Elements With append() and prepend()?

Add Several New Elements With append() and prepend()

In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.
However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements.
In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

Example

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML      var txt2 = $("<p></p>").text("Text.");   // Create with jQuery     var txt3 = document.createElement("p");  // Create with DOM     txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements }
By at

What is jQuery prepend() Method?

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

Example

$("p").prepend("Some prepended text.");
By at

How to add more method calls if needed?

We could also have added more method calls if needed.
Tip: When chaining, the line of code could become quite long. However, jQuery is not very strict on the syntax; you can format it like you want, including line breaks and indentations.
This also works just fine:

Example

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);
By at

Explain about jQuery Method Chaining.

jQuery Method Chaining

Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

Example

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
By at

Wednesday, July 19, 2017

Give an example ofCallback Function for attr.

The following example demonstrates attr() with a callback function:

Example

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});
By at

What is A Callback Function for attr?

A Callback Function for attr()

The jQuery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) attribute value. You then return the string you wish to use as the new attribute value from the function
By at

What is the attr() method?

The attr() method also allows you to set multiple attributes at the same time.
The following example demonstrates how to set both the href and title attributes at the same time:

Example

$("button").click(function(){
    $("#w3s").attr({
        "href" : "https://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});
By at

What is The jQuery attr() method?

The jQuery attr() method is also used to set/change attribute values
By at

What is a Callback Function

A Callback Function for text(), html(), and val()

All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element in the list of elements selected and the original (old) value. You then return the string you wish to use as the new value from the function.
The following example demonstrates text() and html() with a callback function:

Example

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
    });
});
By at

Describe about Set Content .

  •  To set content
    We will use the same three methods
  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields
The following example demonstrates how to set content with the jQuery text(), html(), and val() methods:

Example

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});
By at

Monday, July 17, 2017

What is Get Attributes?

Get Attributes - attr()

The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href attribute in a link:

Example

$("button").click(function(){
    alert($("#w3s").attr("href"));
});
By at

What is jQuery methods for DOM manipulation?


Get Content - text(), html(), and val()

Three simple, but useful, jQuery methods for DOM manipulation are:
  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery text() and html() methods:

Example

$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});
By at

What do you mean by DOM

DOM = Document Object Model

The DOM defines a standard for accessing HTML and XML documents:
By at

How could We also have added more method calls if needed.

 We could also have added more method calls if needed.

When chaining, the line of code could become quite long. However, jQuery is not very strict on the syntax; you can format it like you want, including line breaks and indentations.
This also works just fine:

Example

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000); 
 
By at

Describe about jQuery Method Chaining.

jQuery Method Chaining

Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

Example

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
By at

Sunday, July 16, 2017

Show an example of without Callback.

The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed:

Example without Callback

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});
By at

Show the structure of jQuery Callback Functions.

The example below has a callback parameter that is a function that will be executed after the hide effect is completed:

Example with Callback

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});
By at

What is jQuery Callback Functions?

A callback function is executed after the current effect is 100% finished.


By at

Describe in detail on jQuery stop() Method.

jQuery stop() Method

The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed on the selected element.
The following example demonstrates the stop() method, with no parameters:

Example

$("#stop").click(function(){
    $("#panel").stop();
});
By at

Saturday, July 15, 2017

Show the structure of jQuery animate() - Uses Queue Functionality.

jQuery animate() - Uses Queue Functionality

By default, jQuery comes with queue functionality for animations.
This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.
So, if you want to perform different animations after each other, we take advantage of the queue functionality:

Example 1

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 
By at

Describe about on jQuery animate() - Using Relative Values.

jQuery animate() - Using Relative Values

It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 
By at

Describe about jQuery animate() - Using Pre-defined Values.

jQuery animate() - Using Pre-defined Values

You can even specify a property's animation value as "show", "hide", or "toggle":

Example

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 
By at

Is it possible to manipulate ALL CSS properties with the animate() method?

Is it possible to manipulate ALL CSS properties with the animate() method?

Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Also, color animation is not included in the core jQuery library.
If you want to animate color, you need to download the Color Animations plugin from jQuery.com.
By at

Explain on jQuery animate() - Manipulate Multiple Properties.

jQuery animate() - Manipulate Multiple Properties

Notice that multiple properties can be animated at the same time:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 
By at

Describe in details on jQuery Animations - The animate() Method.

jQuery Animations - The animate() Method

The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the animation completes.
The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a left property of 250px:

Example

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 
By at

what is jQuery Animation/

The jQuery animate() method is used to create custom animations.
By at

Friday, July 14, 2017

Can we know about jQuery slideToggle() Method?

jQuery slideToggle() Method:-

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideToggle() method:

Example

$("#flip").click(function(){
    $("#panel").slideToggle();
});
By at

Show the jQuery slideUp() Method.

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideUp() method:

Example

$("#flip").click(function(){
    $("#panel").slideUp();
});
By at

Describe about jQuery slideDown() Method.

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideDown() method:

Example

$("#flip").click(function(){
    $("#panel").slideDown();
});
By at

What are jQuery Sliding Methods?

  •  

    jQuery Sliding Methods

  • slideDown()
  • slideUp()
  • slideToggle()
By at

Thursday, July 13, 2017

What are jQuery Fading Methods?

jQuery Fading Methods

With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
By at

Wednesday, July 12, 2017

What is jQuery ?

Ans:-jQuery is tailor-made to respond to events in an HTML page.
By at

Show the Syntax of toggle.

Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
By at

Define about jQuery toggle().

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown:

Example

$("button").click(function(){
    $("p").toggle();
});
By at

Describe about Syntax:.

Syntax:
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).
The following example demonstrates the speed parameter with hide():

Example

$("button").click(function(){
    $("p").hide(1000);
});
By at

Snow the jQuery hide() and show().

jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});
By at

Tuesday, July 11, 2017

Explain details The on() Method.

The on() Method

The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:

Example

$("p").on("click", function(){
    $(this).hide();
});
Attach multiple event handlers to a <p> element:

Example

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
By at

Describe hover() & focus().

hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

Example

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});

focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:

Example

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
By at

Explain about mousedown() & mouseup().

mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

Example

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:

Example

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
By at

Define about. mouseenter() & mouseleave().

mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:

Example

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:

Example

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
By at

Define about $(document) & click().

$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:

Example

$("p").click(function(){
    $(this).hide();
});
By at

What are Commonly Used jQuery Event Methods?


Commonly Used jQuery Event Methods


1. $(document).ready()
2. click()
3. dblclick()
4. mouseenter()
5. mouseleave()
6. mousedown()
7. mouseup()   
8. hover()
9. focus()
10. blur()   
By at

Ezplain jQuery Syntax For Event Methods

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the event:
$("p").click(function(){
  // action goes here!! });
By at

Show some common DOM events.

Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
By at

What are Events?

 Events:-

All the different visitor's actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element
By at

Monday, July 10, 2017

Define about The #id Selector.

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

Example

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
By at

Show the structure of Functions In a Separate File.

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
By at

Define about the The .class Selector.

The .class Selector

The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test" will be hidden:

Example

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
By at

Give More Examples of jQuery Selectors.

More Examples of jQuery Selectors

Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
By at

Define about the jQuery Selectors.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
By at

Define about jQuery Syntax.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
By at

Show the structure of Microsoft CDN?

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
By at

What is Google CDN?

Ans- CDN (Content Delivery Network).

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
By at

Show the structure of The jQuery?

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
By at

Saturday, July 8, 2017

Why jQuery is essential?

Why jQuery?

Ans:-There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
  • Google
  • Microsoft
  • IBM
  • Netflix
By at

What I Should Already Know for it?

What You Should Already Know

Before you start studying jQuery, you should have a basic knowledge of:
By at

What is jQuery?

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities
By at

What is the purpose of jQuery?

The purpose of jQuery is to make it much easier to use JavaScript on your website.
By at

Tuesday, July 4, 2017

Describe about Size Content to The Viewport in details.

 Additional rules to follow of Size Content to The Viewport in details:

1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.
2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
By at

Show Some additional rules to Size Content to The Viewport

Some additional rules to follow:
1. Do NOT use large fixed width elements
2. Do NOT let the content rely on a particular viewport width to render well 
3. Use CSS media queries to apply different styling for small and large screens 
By at

How to Set the Viewport of a web design?


 To Set the Viewport of a web design:


HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
By at

Descrive about The Viewport of aweb design.

Ans:-The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
By at

When we should say a responsive web design ?



Ans:- It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
By at

What is Responsive Web Design?

 Responsive Web Design:-

Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
By at

Monday, July 3, 2017

Define the structure of FS 595 Camouflage Colors.

Example

<div style="color:#fff;background-color:#9495a5">Camouflaged Ship</div>
By at

Show the list of FS 595 Camouflage Colors.

FS 595 Camouflage Colors

The numbers in parentheses are references to FS 595.
NumberLibrary NameHex
(30051)camo-brown#594d45
(30090)camo-red#79533d
(33070)camo-olive#595142
(33105)camo-field#745d46
(33245)camo-earth#ac7e54
(33303)camo-sand#a9947b
(33446) camo-tan#b49d80
(33510) camo-sandstone#bcab90
(34082)camo-dark-green#535640
(34086)camo-forest#54504b
(34089)camo-light-green#63613e
(34094)camo-green#4a5444
(36170)camo-dark-gray#5c5c5b
(36300)camo-gray#9495a5
(37030)camo-black#373538
By at

Show the list of FS 595 Safety Colors.

FS 595 Safety Colors

The numbers in parentheses are references to FS 595.
NumberNameHex
(11120)safety-red #bd1e24
(12300)safety-orange #e97600
(13591)safety-yellow #f6c700
(14120)safety-green #007256
(15092)safety-blue #0067a7
(17155)safety-purple #964f8e
By at

Describe The FS 595 Color Standard.

NoColor
0Brown
1Red
2Orange
3Yellow
4Green
5Blue
6Gray
7Other (White, Black, Metallic)
8Fluorescent







By at

Define about the FS 595 Color Standard.

The FS 595 Color Standard

The Federal Standard 595 was originally created by the US General Services Administration.
The standard is a set of color shades, each with a unique five digit reference number. The first number defines the finish. The second number defines the color.
By at

Sunday, July 2, 2017

Make a list of all CSS background properties.

All CSS Background Properties at a glance:

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
By at

Show the order of the property values.

The shorthand property the order of the property values are:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
By at

How to To shorten the background property?

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
The shorthand property for background is background:

Example

body {
    background: #ffffff url("img_tree.png") no-repeat right top;}
By at
Subscribe to: Posts (Atom)