jquery 1 min read 0 comments

Both jQuery before() and insertBefore() methods are doing the same task, add a text or html content before the matched elements. The major difference is in the syntax. For example, <div class="prettyBox">I’m a ipman</div> <div class="prettyBox">I’m a ipman 2</div> 1. $(‘selector’).before(‘new content’); $(‘.prettyBox’).before("<div class=’newPrettybox’>Iron man</div>"); 2. $(‘new content’).insertBefore(‘selector’); $("<div class=’newPrettybox’>Iron man</div>").insertBefore(‘.prettyBox’); Result Both methods above […]

Read more jQuery before() and insertBefore() example
jquery 2 min read 38 comments

Here’s a simple idea to create a tooltips message with jQuery. Idea… Identify the “target” that need to show the tooltips message. Create a tooltips message and CSS style for it. Three functions, – showTooltips, hideTooltips, changeTooltipsPosition. While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position with changeTooltipsPosition. While […]

Read more How to create a tooltips with jQuery
jquery 1 min read 3 comments

To increase the website performance and reduce the total file’s size return, you may consider to load JavaSript (.js) file when it’s required. In jQuery, you can use the $.getScript function to load a JavaScript file at runtime or on demand. For example, $("#load").click(function(){ $.getScript(‘helloworld.js’, function() { $("#content").html(‘Javascript is loaded successful!’); }); }); when a […]

Read more How to load JavaScript at runtime with jQuery
jquery 1 min read 19 comments

The “enter” key is represent by code “13”, check this ASCII charts. To check if an “enter” key is pressed inside a textbox, just bind the keypress() to the textbox. $(‘#textbox’).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ alert(‘You pressed a "enter" key in textbox’); } }); To check if an […]

Read more How to check if an enter key is pressed with jQuery
jquery 4 min read 39 comments

Mashable, best known as social media resources website, created an awesome floating effect while user scrolling the page. Here’s a simple idea to clone this floating effect with jQuery. Idea… Create a floating box. Initial the floating box location, put it beside the body content. While user scrolling the page, keep checking the scroll bar […]

Read more Mashable floating effect example with jQuery
jquery 1 min read 2 comments

jQuery comes with two methods to check if an element has a certain class name. Both methods have the same functionality. is(‘.classname’) hasClass(‘.classname’) For example, to check if div element has a class name of ‘redColor’. 1. is(‘.classname’) $(‘div’).is(‘.redColor’) 2. hasClass(‘.classname’) $(‘div’).hasClass(‘.redColor’) Example If the div element has a class name of ‘redColor’, then change […]

Read more How to check if an element has a certain class name with jQuery
jquery 1 min read 7 comments

The next() function is used to get the immediate following sibling element in the set of matched elements. Only the following sibling’s element is select, it’s child element will be ignore. This next() function is allow to filter it by ‘selector’. For example, next(‘div’) is used to get the immediate following sibling elements that are […]

Read more jQuery next() example
jquery 2 min read 14 comments

In jQuery, both mouseout() and mouseleave() events are fire when the mouse leaves the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios : 1. NO child element If the matched elements have no child element, both mouseout() and mouseleave() events are work […]

Read more Different between mouseout() and mouseleave() in jQuery
jquery 1 min read 5 comments

Both find() and children() methods are used to filter the child of the matched elements, except the former is travels any level down, the latter is travels a single level down. To simple find() – search through the matched elements’ child, grandchild, great-grandchild…any levels down. children() – search through the matched elements’ child only (single […]

Read more Difference between find() and children() in jQuery
jquery 2 min read 3 comments

In jQuery, children() is used to find the child of the matched elements, it’s only travels a single level down. For example, div elements with three levels deep, contains a class name of “child” and “orphan”. <div class="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <div class="orphan">A1-3</div> <div class="child">A1-4</div> <div class="A2"> <div class="child">A2-1</div> <div class="child">A2-2</div> <div class="A3"> <div […]

Read more jQuery children() example
jquery 1 min read 11 comments

jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically. For example, $(‘#para1’).addClass(‘highlight’); – Add a “highlight’ css class to elements that contain id of “para1”. $(‘#para1’).removeClass(‘highlight’); – Remove a “highlight’ css class from elements that contain id of “para1”. Example <html> <head> <style type="text/css"> .highlight { background:green; } </style> <script type="text/javascript" […]

Read more How to add / remove CSS class dynamically in jQuery
jquery 1 min read 1 comment

The prev() function is used to get the immediate preceding sibling element in the set of matched elements. Only the previous sibling’s element is select, it’s child element will be ignore. This prev() function is allow to filter it by ‘selector’. For example, prev(‘div’) is used to get the immediate preceding sibling elements that are […]

Read more jQuery prev() example
jquery 2 min read 11 comments

With jQuery, you can use the find() to search through all the descendants(child, grandchild, great-grandchild…any levels deep) of the matched element. For example, div elements with three levels deep. <div id="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <div id="A2"> <div class="child">A2-1</div> <div class="child">A2-2</div> <div id="A3"> <div class="child">A3-1</div> <div class="child">A3-2</div> </div> </div> </div> 1. $(‘#A1’).find(‘.child’) $(‘#A1’).find(‘.child’).css(‘background’,’red’); Find an […]

Read more jQuery find() example
jquery 1 min read 21 comments

Both filter() and find() methods are very similar, except the former is applies to all the elements, while latter searches child elements only. To simple filter() – search through all the elements. find() – search through all the child elements only. jQuery filter() vs find() example <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; […]

Read more Difference between filter() and find() in jQuery
jquery 3 min read 7 comments

jQuery come with many form selectors to access the form elements more easily and efficiently. Here’s a simple jQuery form selectors reference. 1. TextBox – $(‘input:text’) To select a textbox $(‘input:text’); To get the textbox value $(‘input:text’).val(); To set the textbox value $(‘input:text’).val("New Text"); 2. Password – $(‘input:password’) To select a password $(‘input:password’); To get […]

Read more jQuery form selectors example
jquery 1 min read 26 comments

When a page is exiting or unloading, the ‘unload‘ event will be activate, however, this event can not stop a page from exit. $(window).bind(‘unload’, function(){}); Since jQuery 1.4, you can bind the ‘beforeunload‘ event to $(windows) object to stop a page from exit , unload or navigating away. $(window).bind(‘beforeunload’, function(){ return ”; }); With ‘beforeunload‘ […]

Read more How to stop a page from exit or unload with jQuery
jquery 1 min read 2 comments

To check if an image is loaded successful or not, you can combine the use of jQuery ‘load()‘ and ‘error()‘ event : $(‘#image1’) .load(function(){ $(‘#result1’).text(‘Image is loaded!’); }) .error(function(){ $(‘#result1’).text(‘Image is not loaded!’); }); If the image is loaded successful, the load() function is called, otherwise the error() function is called. Try it yourself <html> […]

Read more How to check if an image is loaded with jQuery
jquery 1 min read 26 comments

A simple example to select a radio button with jQuery dynamically. A radio buttons group, with a name=”sex”. <input type="radio" name="sex" value="Male">Male</input> <input type="radio" name="sex" value="Female">Female</input> <input type="radio" name="sex" value="Unknown">Unknown</input> 1. To display the selected radio button value. $(‘input:radio[name=sex]:checked’).val(); 2. To select a radio button (Male). The radio button is 0-based, so the ‘Male’ = […]

Read more How to select a radio button with jQuery
jquery 1 min read 14 comments

In jQuery, you can use attr() function to check or unchecked a checkbox dynamically. For example, A simple checkbox component. <input type="checkbox" name="checkme">Check Me</input> 1. To display whether this checkbox is checked or not (return true or false). $(‘input:checkbox[name=checkme]’).is(‘:checked’); 2. To check a checkbox. $(‘input:checkbox[name=checkme]’).attr(‘checked’,true); 3. To uncheck a checkbox. $(‘input:checkbox[name=checkme]’).attr(‘checked’,false); jQuery check / unchecked […]

Read more How to check / unchecked a checkbox with jQuery
jquery 1 min read 107 comments

In jQuery, it’s quite easy to add or remove a textbox dynamically. The idea is quite simple, just combine the use of ‘counter‘ variable, jQuery createElement(), html() and remove() method. See below example : jQuery dynamic textbox example <html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> […]

Read more How to add / remove textbox dynamically with jQuery
jquery 1 min read 31 comments

To get the textbox value, you can use the jQuery val() function. For example, $(‘input:textbox’).val() – Get textbox value. $(‘input:textbox’).val(“new text message”) – Set the textbox value. Textbox example <html> <head> <title>jQuery get textbox value example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery get textbox value example</h1> <h2>TextBox value : <label id="msg"></label></h2> <div style="padding:16px;"> TextBox : […]

Read more How to get textbox value with jQuery
jquery 1 min read 1 comment

jQuery contains(text) selector is used to select all elements that are contains specified text. Examples 1. $(‘p:contains(paragraph 1)’) – selects all elements matched by <p> that contains the text “paragraph 1”. 2. $(‘p:contains(mkyong)’) – selects all elements matched by <p> that contains the text “mkyong”. 3. $(‘li:contains(three)’) – selects all elements matched by <li> that […]

Read more jQuery – Contains selector example
jquery 1 min read 3 comments

jQuery descender selector (X Y) is used to select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element. For example, $(‘#container div’) – selects all elements matched by <div> that are descendants of an element that has an id of container. $(‘form input’) – selects all elements […]

Read more jQuery – Descendant selector example
jquery 1 min read 1 comment

jQuery general sibling selector (X ~ Y) is used to select all elements matched by “Y” that is a sibling of a “X” element. For example, <div class="class1"></div> <p>I’m class1 sibling #1</p> <p>I’m class1 sibling #2</p> <p>I’m class1 sibling #3</p> The <div> and <p> are in sibling relationship. The “$(.class1 ~ p)” statement will select […]

Read more jQuery – General sibling selector example
jquery 1 min read 0 comments

In jQuery, the “empty” selector is used to select all elements that have no children (including any text inside). Examples <div class="div-class1"> This is div-class1 </div> <div class="div-class2" /> $(‘:empty’) – The “div-class2” is matched, while the “div-class1” is not. jQuery Example A simple example to show the use of the jQuery “empty” selector. <html> […]

Read more jQuery – Empty selector example
jquery 1 min read 0 comments

jQuery adjacent sibling selector (X + Y) is used to select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element. For example, <div class="class1"></div> <p>I’m class1 sibling #1</p> <p>I’m class1 sibling #2</p> <p>I’m class1 sibling #3</p> The <div> and <p> are sibling relationship. The “$(.class1 + p)” […]

Read more jQuery – Adjacent sibling selector example
jquery 1 min read 2 comments

In jQuery, the “not” is used to select all elements that do not match the selector. Examples $(‘p:not(.class-p1)’) – selects all elements matched by <p> that do NOT have a class name of “class-p1”. $(‘li:not(:only-child)’) – selects all elements matched by <li> that are NOT the only child of their parent. $(‘li:not(:first-child)’) – selects all […]

Read more jQuery – Not selector example
jquery 1 min read 3 comments

The jQuery nth-child is used to select all elements that are ntg-child of of their parent. The nth-child(n) is “1-indexed”, meaning the “n” is counting starts at 1. For example, 1. $(‘tr:nth-child(3)’) – selects all elements matched by <tr> that are the third child of their parent. 2. $(‘tr:nth-child(3n)’) – selects all elements matched by […]

Read more jQuery – nth-child selector example
jquery 1 min read 0 comments

The :first-child is used to select all elements that are the first child of their parent, which is a shorthand for :nth-child(1). Examples $(‘li:first-child’) – selects all elements matched by <li> that are the first child of their parent. $(tr:first-child’) – selects all elements matched by <tr> that are the first child of their parent. […]

Read more jQuery – First child & last child selector example
jquery 1 min read 3 comments

In jQuery, you can get the tag value or element content from a selected tag. For example, 1. Select a tag name of ‘p’ and display its tag value. $(‘p’).html(); 2. Select an element that has a class name of “class1” and display its value. Regardless of the tag name. $(‘.class1’).html(); 3. Select an element […]

Read more jQuery – How to get the tag value or element content