Awesome jQuery snippets to work with forms Disable “enter” key in your forms If you want to prevent visitors to accidentally submit your form by hitting the “enter” key, you can use this snippet to disable the use of the “enter” key in your forms. $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); Source: Clear form data Need to clear all form data? Source: Find is a checkbox is checked Find out if a single checkbox is checked or not. $('#checkBox').attr('checked'); Source: Enable/Disable form elements Want to make your forms more user-friendly? $("#submit-button").attr("disabled", true); And to re-enable a previously disabled input: $("#submit-button").removeAttr("disabled"); Source: Enable submit button if text entered $("#myform").submit();
FlexNav - A jQuery Plugin for Responsive Menus A Device-Agnostic Approach to Complex Site Navigation The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav). This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch. Download on GitHub → Basic Usage Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"><li>... Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div> Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" /> Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav(); Options
jQuery.mmenu » slick app look-alike sliding menus for your mobile website .empty() vs .remove() vs .detach() - jQuery Do you know that jQuery provides various methods to remove elements from DOM? These methods are .empty(), .remove() and .detach(). And in this post, I will show you how these methods (.empty vs .remove vs .detach) are different from each other. .empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. .remove(): This method takes elements out of the DOM. I had already posted about .empty() vs .remove(). Okay, so got the difference between .empty() and .remove(). .detach(): This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. Let see the differences with an example. Now, remove the div element using jQuery and add it again in the page. See result below. First, take mouse of div and see that hover event is working. Okay, now let's do the same thing but this time using .detach() method. Again, take mouse of div and see that hover event is working.
jQuery Fundamentals :: A guide to the basics of jQuery jPanelMenu | A jQuery Plugin SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) controller.removeTween('#fade'); Example:
jQuery Fading Methods Example using fadeIn(), fadeOut() and fadeToggle() Have you ever come across a situation where you had to fade in or fade out elements on a web page? I am sure you have and here in this article I’ll show you how to fade in hidden elements and later fade out elements using three jQuery methods such as fadeIn(), fadeOut() and fadeToggle(). Be careful while using these methods, as these are case sensitive. jQuery fadeIn() and fadeOut() Methods The jQuery fadeIn() method fades in all matched elements that you wish to explicitly define for fading in, using its unique id or a class. Syntax $(selector).fadeIn (speed, callback); The fadeIn() method takes two optional parameters, speed and callback function. $('element').fadeIn('slow');or$('element').fadeIn('fast');or$('element').fadeIn(2000); Do not define values in milliseconds between '' (quotes). Similarly, the jQuery fadeOut() method takes two optional parameters just like the fadeIn() method. Now, let us see a working example. The Markup The Script $('#lbl').hide(); Try it yourself Try if yourself
jakiestfu/Snap.js No iFrames! Dynamically Resize Divs with jQuery. It's no secret that iframes are one of the most hated methods of web page layouts in the web development world — they are horrible for SEO, user experience and (usually) design. I was recently charged with creating a page that needed functionality similar to what iframes would normally provide, and I thought I'd share the non-iframe way I went about completing that project. Before I get into the nitty-gritty of the project, I should probably unpack a few of the reasons why iframes are shunned. When a search engine indexes a page with iframes, each iframe is accurately recorded as a separate page — iframes embed the content of one we page inside of another, so it makes sense. Because each of those "pages" is represented in a single layout, if a user wanted to bookmark your site, they'd probably have a frustrating experience when they try to return to your site, only to find that they are sent directly to the content in one of the frames instead of seeing the entire layout. 3. jQuery
JavaScript Style Guide | Contribute to jQuery Use JSHint to detect errors and potential problems. Every jQuery project has a Grunt task for linting all JavaScript files: grunt jshint. The options for JSHint are stored in a .jshintrc file; many repositories will have multiple .jshintrc files based on the type of code in each directory. Each .jshintrc file follows a specific format. All options must be alphabetized and grouped: The following common options must be used in all projects: If the project supports browsers which do not implement ES5, then the es3 option must be included with the repo-specific options. In general, the jQuery style guide encourages liberal spacing for improved human readability. Indentation with tabs.No whitespace at the end of line or on blank lines.Lines should be no longer than 80 characters, and must not exceed 100 (counting tabs as 4 spaces). Object and array expressions can be on one line if they are short (remember the line length limits). The same applies to AMD wrappers. jQuery uses double quotes.
Sidebar | Semantic UI Multiple sidebars can be displayed at the same time only when using a supported animation like push or overlay. You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top. If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay. // showing multiple $('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ; A sidebar can be initialized inside any element, not just a page's body. A sidebar's context cannot have any padding. For convenience calling attach events will allow you to bind events. $('.left.demo.sidebar').first() .sidebar('attach events', '.toggle.button') ; $('.toggle.button') .removeClass('disabled') ; Trigger Sidebar You can also specify what behavior should occur when the element is clicked $('.left.demo.sidebar').first() .sidebar('attach events', '.open.button', 'show') ; $('.open.button') .removeClass('disabled') ; Open Sidebar
Chained AJAX Selects Martin Angelov In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. The idea for this tutorial was suggested by Casper Hansen from Denmark. The HTML As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about. Chained AJAX Selects with jQuery and PHP When adding more questions, additional LIs are created by jQuery. index.html – generated code <ul id="questions"><li><p>What would you like to purchase? You might notice in the demo page that we aren’t using the default browser select controls. The jQuery code Here is what our jQuery code does in short – it fetches the select boxes information as JSON from the server, generates their HTML, and sets up event listeners for selection changes. In the code, this is achieved using two JavaScript functions: You can see them below. assets/js/script.js Done