Category: jQuery Tutorials

jQuery Drag and Drop

Draggable UI Element This is the image element to be dragged by using jQuery. We are referring this image by an id. This id selector is used in jQuery to call the draggable() function....

jQuery ThickBox Features

jQuery Thickbox Features While showing ThickBox, it disables background screen and prevents user to interact with the web page until ThickBox overlay is closed. This popup overlay widget will stay positioned in the viewport...

jQuery Append Functions

jQuery Append Functions append() appendTo() These two functions are identical with their results but differ in syntax. Performance wise they differ but not significantly. append is targetContainer.append(newContent) and appendTo is;newContent.appendTo(targetContainer) jQuery append() targetContainer.append(newContent) This...

jQuery HTML Code for Displaying Rating Stars

HTML Code for Displaying Rating Stars This HTML code displays a list of rating star by using HTML star entity and LI tags. <input type=”hidden” name=”rating” id=”rating” /> <ul onMouseOut=”resetRating();”> <li onmouseover=”highlightStar(this);” onmouseout=”removeHighlight();” onClick=”addRating(this);”>★</li>...

jQuery Move Animation with DIV

Movable DIV Element This HTML code contains the movable DIV element and the top, right, bottom, left icons to trigger jQuery move event. <div id=”movable”> <div class=”move-icon”> <div><img src=”up.jpg” class=”arrow” onClick=”moveDIV(‘up’);” /></div> <div><img src=”left.jpg”...

HTML DIV Resize Example

HTML DIV Resize Example This code contains a resizable DIV element. We are calling jQuery resizable() by referring the id of the DIV element. <html> <head> <title>Resize HTML DOM using jQuery</title> <link rel=”stylesheet” href=”http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css”>...

jQuery HTML Table Row Column Highlight on Hover

HTML Table Row Column We are using this table for highlighting row and column using jQuery. <table class=”tutorial-table”> <thead> <tr> <th class=”table-header” width=”10%”>Q.No.</th> <th class=”table-header”>Question</th> <th class=”table-header”>Answer</th> </tr> </thead> <tbody> <tr class=”table-row”> <td>1.</td> <td>What...

HTML Expand/Collapse Content

HTML Expand/Collapse Content This code contains HTML DIV with the list of expand/collapse question and answer. <div id=”accordion”> <div class=”question”>What is PHP?</div> <div class=”answer”>A server side scripting language.</div> <div class=”question”>What is php.ini?</div> <div class=”answer”>php.ini...

HTML Textbox to Clone using jQuery

HTML Textbox to Clone This code contains textbox input to specify product name and price. This input element is cloned for adding multiple product entries. <DIV id=”product-header”> <DIV class=”float-left”> </DIV> <DIV class=”float-left col-heading”>Item Name</DIV> <DIV...

jQuery Color Picker – HTML Code for Color Palette

HTML Code for Color Palette This is the HTML code for showing color palette to pick colors. It shows four colors with separate DIV tags. <div class=”circular-div” id=”aquamarine” onClick=”pickColor(this.id);”></div> <div class=”circular-div” id=”bisque” onClick=”pickColor(this.id);”></div> <div...

Show Buttons
Hide Buttons
Social Media Auto Publish Powered By : XYZScripts.com