× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS
Bernard Ojengwa
Oct 24, 2015
<h3>Back to Top Button</h3> <p>By using the <code>animate</code> and <code>scrollTop</code> methods in jQuery you don't need a plugin to create a simple scroll-to-top animation:</p> <pre><span style="color:rgb(150, 152, 150)">// Back to top</span> $(<span style="color:rgb(24, 54, 145)">'a.top'</span>).<span style="color:rgb(0, 134, 179)">click</span>(<span style="color:rgb(167, 29, 93)">function</span> (e) { e.preventDefault(); $(<span style="color:rgb(0, 134, 179)">document</span>.<span style="color:rgb(0, 134, 179)">body</span>).animate({scrollTop<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(0, 134, 179)">0</span>}, <span style="color:rgb(0, 134, 179)">800</span>); });</pre> <pre><span style="color:rgb(150, 152, 150)">&lt;!-- Create an anchor tag --&gt;</span> &lt;<span style="color:rgb(99, 163, 92)">a</span> <span style="color:rgb(121, 93, 163)">class</span>=<span style="color:rgb(24, 54, 145)">"top"</span> <span style="color:rgb(121, 93, 163)">href</span>=<span style="color:rgb(24, 54, 145)">"#"</span>&gt;Back to top&lt;/<span style="color:rgb(99, 163, 92)">a</span>&gt;</pre> <p>Changing the <code>scrollTop</code> value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document.</p> <h3>Preload Images</h3> <p>If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them:</p> <pre><span style="color:rgb(0, 134, 179)">$</span>.<span style="color:rgb(121, 93, 163)">preloadImages</span> <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(167, 29, 93)">function</span> () { <span style="color:rgb(167, 29, 93)">for</span> (<span style="color:rgb(167, 29, 93)">var</span> i <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(0, 134, 179)">0</span>; i <span style="color:rgb(167, 29, 93)">&lt;</span> arguments.<span style="color:rgb(0, 134, 179)">length</span>; i<span style="color:rgb(167, 29, 93)">++</span>) { $(<span style="color:rgb(24, 54, 145)">'img'</span>).attr(<span style="color:rgb(24, 54, 145)">'src'</span>, arguments[i]); } }; $.preloadImages(<span style="color:rgb(24, 54, 145)">'img/hover-on.png'</span>, <span style="color:rgb(24, 54, 145)">'img/hover-off.png'</span>);</pre> <h3>Checking If Images Are Loaded</h3> <p>Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'img'</span>).<span style="color:rgb(0, 134, 179)">load</span>(<span style="color:rgb(167, 29, 93)">function</span> () { <span style="color:rgb(121, 93, 163)">console</span>.<span style="color:rgb(0, 134, 179)">log</span>(<span style="color:rgb(24, 54, 145)">'image load successful'</span>); });</pre> <p>You can also check if one particular image has loaded by replacing the <code>&lt;img&gt;</code> tag with an ID or class.</p> <h3>Fix Broken Images Automatically</h3> <p>If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'img'</span>).on(<span style="color:rgb(24, 54, 145)">'error'</span>, <span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(237, 106, 67)">this</span>).prop(<span style="color:rgb(24, 54, 145)">'src'</span>, <span style="color:rgb(24, 54, 145)">'img/broken.png'</span>); });</pre> <p>Even if you don't have any broken links, adding this won't do any harm.</p> <h3>Toggle Classes on Hover</h3> <p>Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'.btn'</span>).hover(<span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(237, 106, 67)">this</span>).addClass(<span style="color:rgb(24, 54, 145)">'hover'</span>); }, <span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(237, 106, 67)">this</span>).removeClass(<span style="color:rgb(24, 54, 145)">'hover'</span>); });</pre> <p>You just need to add the necessary CSS. If you want an even <em>simpler</em> way use the <code>toggleClass</code>method:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'.btn'</span>).hover(<span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(237, 106, 67)">this</span>).toggleClass(<span style="color:rgb(24, 54, 145)">'hover'</span>); });</pre> <p><strong>Note</strong>: CSS may be a faster solution in this case, but it's still worthwhile to know this.</p> <h3>Disabling Input Fields</h3> <p>At times you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the "I've read the terms" checkbox). Add the<code>disabled</code> attribute to your input so you can enable it when you want:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'input[type="submit"]'</span>).prop(<span style="color:rgb(24, 54, 145)">'disabled'</span>, <span style="color:rgb(0, 134, 179)">true</span>);</pre> <p>All you need to do is run the <code>prop</code> method again on the input, but set the value of <code>disabled</code> to<code>false</code>:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'input[type="submit"]'</span>).prop(<span style="color:rgb(24, 54, 145)">'disabled'</span>, <span style="color:rgb(0, 134, 179)">false</span>);</pre> <h3>Stop the Loading of Links</h3> <p>Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger some other script. This will do the trick of preventing the default action:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'a.no-link'</span>).<span style="color:rgb(0, 134, 179)">click</span>(<span style="color:rgb(167, 29, 93)">function</span> (e) { e.preventDefault(); });</pre> <h3>Toggle Fade/Slide</h3> <p>Slideing and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the <code>fadeIn</code> and <code>slideDown</code>methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine:</p> <pre><span style="color:rgb(150, 152, 150)">// Fade</span> $(<span style="color:rgb(24, 54, 145)">'.btn'</span>).<span style="color:rgb(0, 134, 179)">click</span>(<span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(24, 54, 145)">'.element'</span>).fadeToggle(<span style="color:rgb(24, 54, 145)">'slow'</span>); }); <span style="color:rgb(150, 152, 150)">// Toggle</span> $(<span style="color:rgb(24, 54, 145)">'.btn'</span>).<span style="color:rgb(0, 134, 179)">click</span>(<span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(24, 54, 145)">'.element'</span>).slideToggle(<span style="color:rgb(24, 54, 145)">'slow'</span>); });</pre> <h3>Simple Accordion</h3> <p>This is a simple method for a quick accordion:</p> <pre><span style="color:rgb(150, 152, 150)">// Close all panels</span> $(<span style="color:rgb(24, 54, 145)">'#accordion'</span>).<span style="color:rgb(0, 134, 179)">find</span>(<span style="color:rgb(24, 54, 145)">'.content'</span>).hide(); <span style="color:rgb(150, 152, 150)">// Accordion</span> $(<span style="color:rgb(24, 54, 145)">'#accordion'</span>).<span style="color:rgb(0, 134, 179)">find</span>(<span style="color:rgb(24, 54, 145)">'.accordion-header'</span>).<span style="color:rgb(0, 134, 179)">click</span>(<span style="color:rgb(167, 29, 93)">function</span> () { <span style="color:rgb(167, 29, 93)">var</span> next <span style="color:rgb(167, 29, 93)">=</span> $(<span style="color:rgb(237, 106, 67)">this</span>).<span style="color:rgb(0, 134, 179)">next</span>(); next.slideToggle(<span style="color:rgb(24, 54, 145)">'fast'</span>); $(<span style="color:rgb(24, 54, 145)">'.content'</span>).not(next).slideUp(<span style="color:rgb(24, 54, 145)">'fast'</span>); <span style="color:rgb(167, 29, 93)">return</span> <span style="color:rgb(0, 134, 179)">false</span>; });</pre> <p>By adding this script all you really needs to do on your web page is the necessary HTML go get this working.</p> <h3>Make Two Divs the Same Height</h3> <p>Sometimes you'll want two divs to have the same height no matter what content they have in them:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'.div'</span>).css(<span style="color:rgb(24, 54, 145)">'min-height'</span>, $(<span style="color:rgb(24, 54, 145)">'.main-div'</span>).<span style="color:rgb(0, 134, 179)">height</span>());</pre> <p>This example sets the <code>min-height</code> which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element:</p> <pre><span style="color:rgb(167, 29, 93)">var</span> $columns <span style="color:rgb(167, 29, 93)">=</span> $(<span style="color:rgb(24, 54, 145)">'.column'</span>); <span style="color:rgb(167, 29, 93)">var</span> height <span style="color:rgb(167, 29, 93)">=</span> <span style="color:rgb(0, 134, 179)">0</span>; $columns.each(<span style="color:rgb(167, 29, 93)">function</span> () { <span style="color:rgb(167, 29, 93)">if</span> ($(<span style="color:rgb(237, 106, 67)">this</span>).<span style="color:rgb(0, 134, 179)">height</span>() <span style="color:rgb(167, 29, 93)">&gt;</span> height) { height <span style="color:rgb(167, 29, 93)">=</span> $(<span style="color:rgb(237, 106, 67)">this</span>).<span style="color:rgb(0, 134, 179)">height</span>(); } }); $columns.<span style="color:rgb(0, 134, 179)">height</span>(height);</pre> <p>If you want <em>all</em> columns to have the same height:</p> <pre><span style="color:rgb(167, 29, 93)">var</span> $rows <span style="color:rgb(167, 29, 93)">=</span> $(<span style="color:rgb(24, 54, 145)">'.same-height-columns'</span>); $rows.each(<span style="color:rgb(167, 29, 93)">function</span> () { $(<span style="color:rgb(237, 106, 67)">this</span>).<span style="color:rgb(0, 134, 179)">find</span>(<span style="color:rgb(24, 54, 145)">'.column'</span>).<span style="color:rgb(0, 134, 179)">height</span>($(<span style="color:rgb(237, 106, 67)">this</span>).<span style="color:rgb(0, 134, 179)">height</span>()); });</pre> <h3>Open External Links in New Tab/Window</h3> <p>Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window:</p> <pre>$(<span style="color:rgb(24, 54, 145)">'a[href^="http"]'</span>).attr(<span style="color:rgb(24, 54, 145)">'target'</span>,<span style="color:rgb(24, 54, 145)">'_blank'</span>); $(<span style="color:rgb(24, 54, 145)">'a[href^="//"]'</span>).attr(<span style="color:rgb(24, 54, 145)">'target'</span>,<span style="color:rgb(24, 54, 145)">'_blank'</span>); $(<span style="color:rgb(24, 54, 145)">'a[href^="'</span><span style="color:rgb(167, 29, 93)">+</span><span style="color:rgb(0, 134, 179)">window</span>.<span style="color:rgb(0, 134, 179)">location</span>.origin<span style="color:rgb(167, 29, 93)">+</span><span style="color:rgb(24, 54, 145)">'"]'</span>).attr(<span style="color:rgb(24, 54, 145)">'target'</span>,<span style="color:rgb(24, 54, 145)">'_self'</span>);</pre> <p><strong>Note:</strong> <code>window.location.origin</code> doesn't work in IE10. <a href="http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/">This fix</a> takes care of the issue.</p> <h3>Find Element By Text</h3> <p>By using the <code>contains()</code> selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden:</p> <pre><span style="color:rgb(167, 29, 93)">var</span> search <span style="color:rgb(167, 29, 93)">=</span> $(<span style="color:rgb(24, 54, 145)">'#search'</span>).val(); $(<span style="color:rgb(24, 54, 145)">'div:not(:contains("'</span><span style="color:rgb(167, 29, 93)">+</span>search<span style="color:rgb(167, 29, 93)">+</span><span style="color:rgb(24, 54, 145)">'"))'</span>).hide();</pre> <h3>Trigger On Visibility Change</h3> <p>Trigger javascript when the user unfocused or refocuses on a tab.</p> <pre>$(<span style="color:rgb(0, 134, 179)">document</span>).on(<span style="color:rgb(24, 54, 145)">'visibilitychange'</span>, <span style="color:rgb(167, 29, 93)">function</span>(e){ <span style="color:rgb(167, 29, 93)">if</span> (e.<span style="color:rgb(0, 134, 179)">target</span>.visibilityState <span style="color:rgb(167, 29, 93)">===</span> <span style="color:rgb(24, 54, 145)">"visible"</span>) { <span style="color:rgb(121, 93, 163)">console</span>.<span style="color:rgb(0, 134, 179)">log</span>(<span style="color:rgb(24, 54, 145)">'Tab is now in view!'</span>); } <span style="color:rgb(167, 29, 93)">else</span> <span style="color:rgb(167, 29, 93)">if</span> (e.<span style="color:rgb(0, 134, 179)">target</span>.visibilityState <span style="color:rgb(167, 29, 93)">===</span> <span style="color:rgb(24, 54, 145)">"hidden"</span>) { <span style="color:rgb(121, 93, 163)">console</span>.<span style="color:rgb(0, 134, 179)">log</span>(<span style="color:rgb(24, 54, 145)">'Tab is now hidden!'</span>); } });</pre>
comments powered by Disqus