Parallax hover. Carousel/slider. Easing Functions Cheat Sheet. Roundabout for jQuery by Fred LeBlanc. It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.
Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones. It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects. See Roundabout In Action Add-Ons Roundabout is equipped to play nicely with a couple of other plugins if they’re made available. Roundabout Shapes by Fred LeBlanc Roundabout can move in more ways than just a turntable. But That’s Not All! The list above is only a list of the plugins that have support baked in, but Roundabout will play nicely with many other plugins.
Learn Support New in V2 The code is also a lot cleaner and better commented, which will hopefully allow you to get in there and tweak if you want to. Javascript. Need reasons to love Bootstrap?
Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!) 10 jQuery snippets for efficient developers. Load jQuery from Google Google has a fresh version of jQuery, which is made available for developers.
Instead of getting a jQuery copy, you should definitely take advantage of Google’s “generosity” and directly load their copy:
Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements. jQuery makes the creation of dynamic user interfaces easier than ever before.
A few of the convenience methods that I use every single in my web application development are slideDown() and slideUp(). These are perfect for showing and hiding content in a non-jarring manner. The slideDown() method shows content by sliding open a given element; the slideUp() method, on the other hand, hides content by sliding closed a given element. These are very basic methods, but I describe them here in order to point out that sometimes, I get so attached the name of a given method, I lose sight of what it's actually doing.
I fell victim to this narrow-sightedness just last week. After I got this approach to work, including the offset calculation and re-positioning that I needed to perform prior to slide-up, I had a "well d'uh" moment! Once I had this realization, it made so much sense that I was, in fact, more than a little embarrassed that it didn't occur to me sooner. JavaScript: Resizing text to fit in a container. This span is too big for this div This is a simple problem and a simple solution.
Often in the world of dynamic data we find ourselves with data that is larger than the container. There are ways of handling this like a scrolling div or adding ellipses to chopped of text, but what if you absolutely must see all of the text and are willing to change to font size to accomplish this? Using this little recursive jQuery snippet you can accomplish this. function adjustHeights(elem) { var fontstep = 2; if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) { $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px'); adjustHeights(elem); } } Here's the same div as above with the script applied: You can modify the fontstep variable to resize at a faster rate if you want.
Floating Menus - DownloadJavascripts. Create a Sticky Navigation Header Using jQuery Waypoints. In this tutorial, we'll be creating a navigation bar that stays with you as you scroll down — and we'll also throw a gimmick or two into the mix to polish it off.
Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in March of 2012. Introduction “Everybody loves ribbons” Chris Coyier says when discussing the virtues of the :before and :after pseudo-elements. Ribbons are liked for a reason, though — they break the mostly flat design paradigm that we’re traditionally bound to, and they’re one of the few visual elements to do so in an inconspicuous way. What We’ll be Doing In this tutorial, we're going to use one of HTML5's new elements, the nav tag, as a container for a horizontal list of links.
Step 1: The Box. JQuery equally spaced navigation links inside unordered list problem. DropKick - a jQuery plugin for beautiful dropdowns. Embed your instagram photos - embedagram. The embedagram jQuery plugin!
The jQuery plugin allows you to embed your instagram photos within any element on your site. Simply include the plugin script, and bind it to an element. example NOTE: You must replace <your-instagram-id> with: options The current options are: instagram_id - your instagram id. thumb_width - thumbnail width. instagram provides images of width 150, 306, and 612. depending on the set width, embedagram serves an appropriate size. defaults to 100. wrap_tag - the html tag that wraps the thumbnails. defaults to li. link_type - where the images link to. Download You can grab the code from github here. Displaying a notification with jQuery after a form have been submited and the page reloaded.
jQuery for Designers - Tutorials and screencasts. Uniform - Sexy forms with jQuery. Sexy form elements with jQuery.
Now with HTML5 attributes! Version 2.1.1 Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3. Licensed under the MIT License Installation Installation of Uniform is quite simple. This relies upon a copy of jquery.uniform.js, uniform.default.css and the various images all being available on your webserver. Basic usage.