Category: jQuery

How to Display Only First X Divs, Toggle Rest

var news = 2; hidenews = “- Hide news archive”; shownews = “+ Show news archive”; $(“.archive”).html( shownews ); $(“.news:not(:lt(“+news+”))”).hide(); $(“.archive”).click(function (e) { e.preventDefault(); if ($(“.news:eq(“+news+”)”).is(“:hidden”)) { $(“.news:hidden”).show(); $(“.archive”).html( hidenews ); } else {...

How to Fire Event When User is Idle using jQuery

See the two commented lines below, that is where you can insert code for things to do when the user goes idle, and when the user comes back. Set the idle period on the...

How to Fixing .load() in IE for cached images

The .load() function fires when the element it’s called upon is fully loaded. It is commonly used on images, which may not be fully loaded when the JavaScript originally runs, and thus would return incorrect...

How Much Effort Do You Put Into Alt Text?

From over 16,000 people surveyed, more than half (54%) say they “do some” when it comes toalt text for images that are important to content. The example provided did provide insight into the content and...

How to Clear Default Search String on Focus using jquery?

$(“#s”) .val(“Search…”) .css(“color”, “#ccc”) .focus(function(){ $(this).css(“color”, “black”); if ($(this).val() == “Search…”) { $(this).val(“”); } }) .blur(function(){ $(this).css(“color”, “#ccc”); if ($(this).val() == “”) { $(this).val(“Search…”); } }); Set value of field to “Search…” When field...

How to clear a file input using jQuery?

You can just clone it and replace it with itself, with all events still attached. var input = $(“#control”); function something_happens() { input.replaceWith(input.val(”).clone(true)); };

Automatic Table of Contents using jquery?

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the...

How to Check if Event was Triggered or Native?

$(‘button’).click(function(event, wasTriggered) { if (wasTriggered) { alert(‘triggered in code’); } else { alert(‘triggered by mouse’); } }); $(‘button’).trigger(‘click’, true);

How to Check if Element Exists using jQuery?

Java Script if ($(‘#myElement’).length > 0) { // it exists } Or to make it a fancy function with a callback: // Tiny jQuery Plugin // by Chris Goodchild $.fn.exists = function(callback) { var...

How to Check if Checkbox is Checked using jQuery?

Say that 10 times fast =). Find out if a single checkbox is checked or not, returns true or false: $(‘#checkBox’).attr(‘checked’); Find all checked checkboxes: $(‘input[type=checkbox]:checked’);

Calculate Distance Between Mouse and Element?

(function() { var mX, mY, distance, $distance = $(‘#distance span’), $element = $(‘#element’); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX – (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY – (elem.offset().top+(elem.height()/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX;...

Browser Detection + Apply Classes to HTML Element using jQuery?

// jQBrowser v0.2: http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?””:e(c/a))+String.fromCharCode(c%a+161)};while(c–){if(k[c]){p=p.replace(new RegExp(e(c),’g’),k[c])}}return p}(‘Ö ¡(){® Ø={\’¥\’:¡(){¢ £.¥},\’©\’:{\’±\’:¡(){¢ £.©.±},\’¯\’:¡(){¢ £.©.¯}},\’¬\’:¡(){¢ £.¬},\’¶\’:¡(){¢ £.¶},\’º\’:¡(){¢ £.º},\’Á\’:¡(){¢ £.Á},\’À\’:¡(){¢ £.À},\’½\’:¡(){¢ £.½},\’¾\’:¡(){¢ £.¾},\’¼\’:¡(){¢ £.¼},\’·\’:¡(){¢ £.·},\’Â\’:¡(){¢ £.Â},\’³\’:¡(){¢ £.³},\’Ä\’:¡(){¢ £.Ä},\’Ã\’:¡(){¢ £.Ã},\’Å\’:¡(){¢ £.Å},\’¸\’:¡(){¢ £.¸}};$.¥=Ø;® £={\’¥\’:\’¿\’,\’©\’:{\’±\’:²,\’¯\’:\’¿\’},\’¬\’:\’¿\’,\’¶\’:§,\’º\’:§,\’Á\’:§,\’À\’:§,\’½\’:§,\’¾\’:§,\’¼\’:§,\’·\’:§,\’Â\’:§,\’³\’:§,\’Ä\’:§,\’Ã\’:§,\’Å\’:§,\’¸\’:§};Î(® i=0,«=».ì,°=».í,¦=[{\’¤\’:\’Ý\’,\’¥\’:¡(){¢/Ù/.¨(°)}},{\’¤\’:\’Ú\’,\’¥\’:¡(){¢ Û.³!=²}},{\’¤\’:\’È\’,\’¥\’:¡(){¢/È/.¨(°)}},{\’¤\’:\’Ü\’,\’¥\’:¡(){¢/Þ/.¨(°)}},{\’ª\’:\’¶\’,\’¤\’:\’ß Ñ\’,\’¥\’:¡(){¢/à á â/.¨(«)},\’©\’:¡(){¢ «.¹(/ã(\\d+(?:\\.\\d+)+)/)}},{\’¤\’:\’Ì\’,\’¥\’:¡(){¢/Ì/.¨(«)}},{\’¤\’:\’Í\’,\’¥\’:¡(){¢/Í/.¨(°)}},{\’¤\’:\’Ï\’,\’¥\’:¡(){¢/Ï/.¨(«)}},{\’¤\’:\’Ð\’,\’¥\’:¡(){¢/Ð/.¨(«)}},{\’ª\’:\’·\’,\’¤\’:\’å...

vimeo embed showing black screen on firefox?

from vimeo api: “Note: if your site will contain a Universal Player embed, but won’t show it right away, it’s best to not to include the embed code until the video is ready to...

Basics of Google Font API (Application Program Interface)

Link to CSS files You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts. <head> <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans”> </head>...

How to avoid Java Code in JSP-Files?

The use of scriptlets (those <% %> things) in JSP is indeed highly discouraged since the birth of taglibs (like JSTL) and EL (Expression Language, those ${} things) over a decade ago. The major disadvantages of scriptlets are: Reusability: you can’t reuse scriptlets. Replaceability: you can’t make...

How can I get query string values?

You don’t need jQuery for that purpose. You can use the pure JavaScript: function getParameterByName(name) { name = name.replace(/[\[]/, “\\\[“).replace(/[\]]/, “\\\]”); var regexS = “[\\?&]” + name + “=([^&#]*)”; var regex = new RegExp(regexS);...

How to Empty an Array using jQuery?

This is one of the fastest and easiest ways of emptying an array. Of course there are may other ways, but those usually include creation of a new array. This way you reuse the...

Different Stylesheet Pending the Time of Day

<script> <!– function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&&currentTime < 5) { document.write(“<link rel=’stylesheet’ href=’night.css’ type=’text/css’>”); } if (5 <= currentTime&&currentTime < 11) { document.write(“<link rel=’stylesheet’ href=’morning.css’ type=’text/css’>”); }...

How to create Dropdown Lists using jquery

The code to check the dropdown list is more or less the same as for radio buttons. Here it is: The only difference is in the IF Statement. Between the round brackets we have...

How to make Smooth Scrolling using jquery

Performs a smooth page scroll to an anchor on the same page. $(document).ready(function() { function filterPath(string) { return string .replace(/^\//,”) .replace(/(index|default).[a-zA-Z]{3,4}$/,”) .replace(/\/$/,”); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement(‘html’, ‘body’); $(‘a[href*=#]’).each(function() {...