jRumble | A jQuery Plugin That Rumbles Elements. About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. Flashing and flickering objects on the web can be dangerous. Please use this plugin responsibly. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag.
Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples. Flawless clickable drop-down navigation : Todd Motto: Front-End Web Developer. In this tutorial I’ll show you how to create a superb clickable drop-down navigation, using jQuery and of course complete with CSS fallbacks. These types of drop-downs are great for Web Apps, websites and backends which you don’t want to implement a hover-only system.
It’s all about the user experience and journey around the site. Here I’ll show you how to create a really smart clickable drop-down navigation, in which you can click any negative space to close it again. Full browser support, Chrome, FireFox, Safari, Opera, IE7, IE8, IE9. We’ll be using a markup similar to the way a drop-down menu navigation works, an unordered list, with a list inside, with an unordered list containing our items inside the drop-down. Here’s the markup: Let’s go through the structure. You’ll notice the first ul contains a class no-js, this takes a Modernizr-style approach and replaces the no-js with js if the browser is running JavaScript. The CSS is minimal here, a great foundation for customising. jQuery. Adaptive Thumbnail Pile Effect with Automatic Grouping. An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile.
When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions. View demo Download source This experimental jQuery plugin allows the automatic grouping of thumbnails using a pile effect. The thumbnails will group according to their shared data-pile attribute and once clicked, the pile will disperse and its thumbnails fly to their positions. The grid itself is adaptive, meaning that if there is not enough horizontal space considering the width and the gutter of the items, the column count will decrease and the grid will re-order. The demo features some Dribbble shots of the following artists: Please note that the CSS transforms and transitions only work in browsers that support them. There is a simple jQuery animate fallback for browsers that don’t support transitions.
The plugin can be called like this: Options Demos. Building A Relationship Between CSS & JavaScript. Advertisement jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript microlibraries all combine into a single undeniable fact: JavaScript is popular. It’s so popular, in fact, that we often find ourselves using it in places where another solution might be better in the long run.
Even though we keep JavaScript, CSS and HTML in different files, the concepts behind progressive enhancement are getting all knotted up with every jQuery plugin we use and with every weird technique that crops up. Because JavaScript is so powerful, there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). Image Credit: opensourceway1. (Smashing’s side note: Have you already pre-ordered the brand new Smashing Mobile Book2?
Keeping CSS Out Of Your JavaScript CSS can hook into HTML with a variety of different selectors; this isn’t anything new. Cleaning Up Your HTML jQuery Web and Team Environments (cp) jQuery.parallax. Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing.
Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events. Unheap – A tidy collection of jQuery plugins. Super Easy Parallax Effect with jQuery. We have gotten quite a few emails from people asking how we did the parallax effect on the new design. We are not master of Javascript but we always like to learn and explore new things. That was the case of the parallax effect. This kind of effect brings us back memories from the 8 and 16 bit video-game eras and it was a really good exercise to improve our web design skills.
So for this tutorial we will show you how we did the parallax effect you see in the blog. The first thing to do is try to get familiarize with HTML/CSS and Javascript. It's also important to understand the behavior of the objects you will try to animate. Step 1 Open your HTML editor or text editor. Let's write a basic HTML 5 file. Step 2 Let's now make sure we add our jQuery library link within the <head> tag. Step 3 Another nice thing to do is to use custom fonts that are not the limited websafe ones.
Step 4 For this tutorial we will create a basic card with an image and some information. Step 5 Step 6 Step 7 Step 8. Client Side Validation using JavaScript. Introduction In this article how we can validate TextBox and DropDownList using JavaScript. Using the code In this article we will see how we can validate a TextBox and DropDownList using JavaScript. Firstly we add some textboxes and a dropdownlist to an .aspx page, as follows: OnClientClick="return validate();" is used to call the JavaScript function on click of the Submit button. Now we will add JavaScript code to implement client side implementation. Firstly we will add a JavaScript function: <script type="text/javascript"> function validate() { } </script> Now in the validate() function, we will get the value of textboxes and the dropdownlist like below: Now we check textboxes are blank or not like below: Now for email value we will create a parameter that finds if the email format is valid or not. var emailPat = /^(\".
Here we check it is valid or not.. if (EmailmatchArray == null) { alert("Your email address seems incorrect. Var Url = "^[A-Za-z]+://[A-Za-z0-9-_]+\\. Presenteer.js. Introduction Presenteer.js a very flexible HTML5 presentation tool that works in one line of code, but is configurable with constructor options and many callbacks. In its simplest form, it works like And then navigate through the presentation with presentation.start();, presentation.next();, presentation.prev(); and presentation.show(0-based-index); Installation Include jQuery and Presenteer.js (and possibly Sylvester.js, see below) in your page.
Create the HTML and style it with CSS Then, on page load, create a Presenteer instances for every presentation on the page. I set followElementTransforms to false to make Presenteer not follow element transforms. And set followElementTransforms: true. Constructor options Apart from the followElementTransforms constructor argument, there's many more options and callbacks. Where canvas is a selector or jQuery element of the canvas on which the presentation is placed. The list of elements on the canvas is specified in the elements argument. Navigation 1. Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified.
This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly.
Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos. Jquery Mobile Page events demystified. « Using Abhik.Mitra.myThoughts;
Why Not $(document).ready ? Typically, one of the first things that we learn in JQuery. This function is invoked after Jquery Loads the DOM and finishes any initialization work that needs to be done. This is the preferred choice since the normal Javascript Window .onLoad() waits for all the images to be loaded and that can make our web page unresponsive.
Whereas the DOM ready event fires when all the DOM content is parsed and placed into the document. But in case of JQuery Mobile, a single HTML file can have multiple “pages”. Technically in JQuery Mobile any container with a data-role=”page” is considered an independent page. Hence Jquery Mobile has a different life cycle of events. Even if the “pages” are kept in different HTML, JQueryMobile ignores everything that is not within the data-role page. Jquery Mobile provides us with various Page events A key difference is between “pageinit” and “page show” is that “pageinit” runs once when the “page” is displayed first. Like this: jQuery Tutorials for Designers. This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.
In case you don't know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I'm not going to get into the details of the CSS. Note: the version used in this article is jQuery 1.2.3 View jQuery Demos Download Demo ZIP How jQuery works? First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). How to get the element?
Writing jQuery function is relatively easy (thanks to the wonderful documentation). 1. Let's start by doing a simple slide panel. When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. 2. 4a. 4b. 5a. 5b. 6. 7. 8. 9.