Disable “pull to refresh” in Chrome for Android

In mobile Chrome, pulling the top of the page will reload it. Although it’s a convenient UI pattern, it might get in the way if you are trying to implement gestures in your app. After careful observation, I have come up with a simple solution. AngularJS I have successfully disabled “pull to reload” with this […]

.find() vs. .children(): which one should you use?

jQuery offers two functions to find children in an element: .find() and .children(). .find() will look through all children of an element while .children() will only look at immediate children. <ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul> In the snippet above, $(‘ul’).children(‘p’) wouldn’t return anything, while $(‘ul’).find(‘p’) would return all three […]

Javascript, jQuery and parent windows

When you open a window with window.open, you can access the popup’s parent window using window.opener from the child window. //In the parent window window.open(‘http://example.com/url’); //Opens a new window/tab with this URL //In the opened window window.opener.document; You can perform the same requests on window.opener.document as you would on the document object: window.opener.document.getElementById(‘#tableInParent’); //Gets #tableInParent […]

How to get the textarea’s maxlength attribute to work in Internet Explorer

If you are developing for an older version of Internet Explorer (IE8 and older), you might have noticed that your chronogically-challenged browser does not support the maxlength attribute. Fortunately, you can solve it with a few lines of jQuery: //textarea maxlength support for chronogically-challenged browsers $(‘textarea[maxlength]‘).keyup(function(){ //Get the value var text = $(this).val(); //Get the […]

How to get a reference to a CodeMirror instance

If you want to access a CodeMirror instance, perhaps because it was created programmatically, or by a module you don’t control, you can access it like this: //Get a reference to the CodeMirror editor var editor = $(‘.CodeMirror’)[0].CodeMirror; //You can then use it as you wish editor.setValue(‘lorem ipsum yada yada’); editor.replaceSelection(‘this is a test’); In […]

Zepto.js and the :selected and :checked selectors

If you switched from jQuery to its slightly anemic cousin, Zepto.js, you might have noticed that it doesn’t support two rather useful selectors, :selected and :checked. Fortunately, it is fairly easy to compensate for it. First, define the following two functions: var checked = function(){ return this.checked; } var selected = function(){ return this.selected; } […]

How to implement parallax scrolling with jQuery

A parallax effect is adds a nice touch of style to an existing website, and looks fantastic with large images. Here is how to implement a parallax on a background image with jQuery. First, set the element’s background to fixed: .myElement{background:url(‘images/myBackground.jpg’) no-repeat fixed center top} Next, put this in your $(document).ready() function. Do not forget […]

How to fade images on load with jQuery

In this article, I will show you how to properly fade in images when the page loads using jQuery. Although this has been covered by other blogs, most proposed solutions do not take caching into account. When returning on a page, images that were cached by the browser will not trigger jQuery’s load event. First, […]