div (HTML4 & HTML5)

The details element represents a disclosure widget from which the user can obtain additional information or controls. However, the details element is not appropriate for footnotes.

Prompt box used for taking input from user. If you click on ok button then it return input value else it return null

CSS3 animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: A style describing the animation and a set of keyframes that indicate the start and end states of the animation's CSS style, as well as possible intermediate waypoints along the way.

The CSS linear-gradient function creates an effect which represents a linear gradient of colors on the element. The Top to Bottom gradient effects the element from top to bottom and the left to right gradient effects the element from left to right.

The nth child selector is used to select the specified element of the page.

The jQuery load method is a simple to use AJAX (Asynchronous JavaScript and XML.) function. That enables you to load ajax content with one line of code. AJAX is a technique for creating better and more interactive web applications and we at webgrid.com are using ajax with jQuery alot to make this web page better!

CSS shadow work with different elements like box shadow, text shadow etc.

CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify the effect and the duration.

Using the css property we can get the simple CSS property value of an attribute.

A margin is the space outside of the element, whereas padding is the space inside the element.

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags or JavaScript.

CSS3 transform property allows us to scale, rotate, spin, stretch, and turn elements.

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari.

The dimension property of the CSS allows us to manage the height and width of the HTML elements.

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

CSS multi columns property builds on the Box model module [no public working draft yet] and adds functionality to flow the content of an element into multiple columns.

The flexible box layout gives us a way of creating flexible boxes. It lets us align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space. You can also display the elements in reverse order compared to how they are ordered in the markup.

jQuery is a very powerful tool which provides a variety of traversal methods to help us select elements in a document randomly as well as in sequential method. In other words, we can say that most of the traversing methods are used to find elements from the documents.

jQuery.support is a collection of properties that represent the presence of different browser features or bugs. Primarily intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance.

A selector is made up of pattern that is matched against all elements in document.

Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements

jQuery provides methods to manipulate documents in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.

jQuery AJAX life cycle demonstration. This is a demonstration of the methods ajaxStart, ajaxSend, ajaxComplete, ajaxStop, and ajaxSuccess that are triggered when load method is called.

jQuery ajaxStart and ajaxComplete are two functions are very useful to show the graphics while the data is loading from server. The ajaxStart method works while the server fullfilling the service asked to it. The ajaxComplete method is called when the server fulfilled the request.

Javascripts loops are similar to other programming languages. Loops allows us to execute a block of statements to the specified number of times.

This allows us to animated the element movement infinitly.

Drag and Drop magic with HTML5 using an image to drag back and forth between four <div> elements.

The jQuery toggle method toggles the visibility of HTML elements using the show or hide methods. Shown elements are hidden and hidden elements are shown. The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify the effect and the duration.

The HTML div element is a block level element used for grouping HTML elements.

The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

JavaScript clearInterval function enables you to stop the timer event started by the JavaScript setIntterval function. When you apply the setInterval function a JavaScript function by specifying the time interval then it calls the function continuously after equal intervals of time.

jQuery allows to change the multiple CSS properties value at once.

The HTML button tag inserts a button control in a form or document. Differently from the HTML input element using "button" in the "type" attribute, this button can contain other HTML elements like the second button in this example.

This allows us to move the animated element to move from one place to another.

* selector selects all the elements of the page and apply properties defined under it. If we have some properties that should be applied on all the elements, then * selector is used

CSS3 transitions provide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

JavaScript setInterval function provides the functionality to execute the specified function after the sepcified time interval in milliseconds. Using the JavaScript setInterval function you can set the time interval to call a function again and again.

This animation allows to add time to animation effect.

The jQuery slideUp and slideDown methods gradually change the height of the selected elements.

Create a new window and move new browser window.

jQuery mouse events are events that have to do with actions of the mouse. These can be a click, double-click, mouse down and more. Mouse events can be used in two different ways.

The CSS radial-gradient function creates a effect which represents a gradient of colors radiating from an origin. Radial gradients are defined by their origin and the angle, orientation, and type, a circle or an ellipse of the spreading shape.

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags.

CSS pseudo-classes are used to add special effects to some selectors.

Using jquery manipulation methods, we can replace elements with another elements.

The jQuery fade methods gradually change the opacity for selected elements.

Register a handler with jQuery to be called when Ajax requests complete with an error. Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time.

jQuery provides methods to manipulate documents in efficient way. Using jquery manipulation methods, we can insert element in given document. Like here we add a new element before the blue square.

jQuery Animate can function supports animation in different directions

The HTML div element is a block level element is also nice to use for positioning around on the web page. In this example were two small boxes is position relative to the larger box.

The CSS radial-gradient function creates a effect which represents a gradient of colors radiating from an origin. Radial gradients are defined by their origin and the angle, orientation, and type, a circle or an ellipse of the spreading shape.

You can specify the border-radius value in pixel and percentage.

Colors can be applied to any HTML element. Like div, text, body ,paragraph etc.

Using CSS font properties we can set the color, hight , width ,size and alignment of the Font.

CSS box with shadow is applied with the boxes.

It is possible to add more than one class to an HTML element. Classes are written within the same attribute, with spaces separating each class. The advantage of multiple classes is that you can write a CSS rule to select either of the classes – and they both affect the same element.

CSS margin and padding properties are used to spacing out the elements. A margin is the space outside of the element, whereas padding is the space inside the element.

We can apply multiple shadows of the box or text at the same HTML element.

Relative position specifies the position of the element within the area. It will not go outside of the containing area.In the given example the containing area is body of the page.

Creating a on Margins, padding,and borders.

This property makes the element fix on the page. Scrolling will not effect the position of element Please ensure the browser window is small enough for a scrollbar to appear, this fully demonstrates the fixed positioning.

These are used to apply the properties on the elements that are either enable or disable.

CSS padding is used to make the gap between the container and the text.

To have the effect for bottom text we have created a master container where the position to all child elements position is relative to the master container. And we used a child container with a absolute position to bottom and left for the master container.

jQuery animate also support different properties and multiple unit types within one animation.

In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.

Using nesting of selectors we can specify the properties to selectors within selectors.

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right.

Using jQuery manipulation methods, we can remove elements.

This gradient has arbitrary stops according to our needs.

The flexible box model has box-pack nad box-align properties. The box-pack property allows to fit the boxes that are in horizontal manner. The box-align property allows to fit the boxes that are in vertical manner. The box-ordinal-group property allows to set the order of the boxes manually.

CSS3 allows you to format your elements using 3D transforms and here we have rotated 180 degrees around X axis.

Javascript provides us the facility to break a loop in middle and also to continue the loop without executing the whole body of the loop.There are two keywords that provides these facilities: 1) break 2) continue

This selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. CSS :odd is the same as :nth-child(odd) or :nth-child(2n+1)

This selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. CSS :even is the same as :nth-child(even) or :nth-child(2n)

This event is fired when the form is submitted. This is only works with the form element of the HTML.

Most of the JQuery Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on given conditions. The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).

jQuery also allows us the set the property value of the CSS.

Using text properties of CSS we can set the height, width , color of the text

Linear Gradient effect with even stops.

This property allows us to define the height and width of the HTML elements in the percentage.

The Navigator object contains information about the visitor's browser.

You can specify the border-radius value in pixel and percentage.

Multi columns property allows us to define column rule and the gap between column and column fill type.

jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.