jquery

How to detect copy, paste and cut behavior with jQuery

by

To detect copy, paste and cut behavior, you just need to bind the corresponding event type. $("#textA").bind(‘copy’, function() { $(‘span’).text(‘copy behaviour detected!’) }); $("#textA").bind(‘paste’, function() { $(‘span’).text(‘paste behaviour detected!’) }); $("#textA").bind(‘cut’, function() { $(‘span’).text(‘cut behaviour detected!’) }); If you are using jQuery 1.4x, it’s support the multiple events declaration like following : $("#textA").bind({ copy : …

Read more

jQuery clone() example

by

jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements. 1. Clone the html elements For example, you are going to clone the following html code. <div class="smallBox"> I’m a small …

Read more

jQuery – Access to restricted URI denied – Solution

by

Problem This jQuery error message is caused by loading the cross domain content. Error: [Exception… "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" It’s means you are loading some content that are not belong to or located at your site (different domain name). See this jQuery example to load the cross domain (yahoo.com) …

Read more

jQuery before() and insertBefore() example

by

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

How to create a tooltips with jQuery

by

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 load JavaScript at runtime with jQuery

by

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 check if an enter key is pressed with jQuery

by

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

Mashable floating effect example with jQuery

by

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

How to check if an element has a certain class name with jQuery

by

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

jQuery next() example

by

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

Difference between find() and children() in jQuery

by

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

jQuery children() example

by

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

How to add / remove CSS class dynamically in jQuery

by

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

jQuery prev() example

by

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 find() example

by

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

Difference between filter() and find() in jQuery

by

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

jQuery form selectors example

by

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

Check if element exists in jQuery

by

In jQuery, we can check if an element exists by using the jQuery selector to select it and .length() to check its length. If the length is greater than 0, it means the element exists. if ($("#elementId").length) { // The element exists } else { // The element does not exist } The above technique …

Read more

How to stop a page from exit or unload with jQuery

by

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 check if an image is loaded with jQuery

by

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 select a radio button with jQuery

by

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 check / unchecked a checkbox with jQuery

by

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 add / remove textbox dynamically with jQuery

by

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 get textbox value with jQuery

by

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

jQuery – Child selector example

by

jQuery child selector (X > Y) is used to select all elements matched by “Y” that are child of a “X” element. For example, $(‘form > input’) – selects all elements matched by <input> that are child of an element matched by <form>, Only child element will match, grandchild, great-grandchild will not match. jQuery Example …

Read more

jQuery – Contains selector example

by

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 – Attribute selector examples

by

In jQuery, the attribute selectors are wrap inside a bracket []. Here’s the supported attribute selectors : 1. Has Attribute [A] Select all elements that have the “A” attribute. Examples $(‘a[rel]’) – selects all elements matched by <a> that have a rel attribute. 2. Attribute Value Equals [A=B] Select all elements that have the A …

Read more

How to reload a page using jQuery

by

In jQuery, we can use the location.reload() to refresh or reload a page, which is part of the native JavaScript Window interface, not jQuery specifically. location.reload(); P.S Tested with jQuery 3.7.1 1. Reload a page using jQuery A complete example to show how to reload a page using jQuery. <!DOCTYPE html> <html lang="en"> <head> <meta …

Read more

jQuery – Descendant selector example

by

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 – General sibling selector example

by

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 – Universal * selector example

by

The universal * selector is used to select all elements, everything. Examples $(‘*’): selects all elements in the document. $(‘div > *’): selects all elements that are children of a <div> element. In general, using the universal alone didn’t make sense, at least i can’t think of any use cases. But, it’s always used to …

Read more

jQuery – Empty selector example

by

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 – Adjacent sibling selector example

by

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 – Not selector example

by

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 – Only child selector example

by

The “only-child” is used to select all elements that are the only child of their parent. Examples $(‘:only-child’) – selects all elements that are the only child of their parent. $(‘li:only-child’) – selects all elements matched by <li> that are the only child of their parent. jQuery Example In this example, when the button is …

Read more

jQuery – nth-child selector example

by

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

Select mutiple elements in jQuery

by

In jQuery, you can select multiple elements by separate it with a comma “,” symbol. For example, $(.class1, .class2, #id1) In above case, select all elements that have a class name of “class1” and “class2”, and id of “id1”. jQuery Example In this example, the elements that have a class name of “p1” and “p2“, …

Read more

jQuery – First child & last child selector example

by

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 – How to get the tag name

by

To get the element tag name, you can use the tagName function. There are two ways to use it : 1) .get(0).tagName Select an element that has a class name of “classTag1”, and use the .get(0).tagName function to display its tag name. $(‘.classTag1’).get(0).tagName; 2) .[0].tagName 2. Select an element that has a class name of …

Read more