InnerFade with jquery What is it? InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation. The call Examples A newsticker (with animationtype: 'slide') <ul id="news"><li><a href="#n1">1 Lorem ipsum dolor</a></li><li><a href="#n2">2 Sit amet, consectetuer</a></li><li><a href="#n3">3 Sdipiscing elit,</a></li><li><a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a></li><li><a href="#n5">5 Nec Lorem. A list with images and links Elements with classes Download jquery.innerfade.zip (124kb) Webdesign Leipzig – Medienfreunde GbR
QueryLoader ? preload your website in style There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins. Why can’t there be a nice loading bar of some kind? I’ve gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS). This preloader has it all. (a special shout out goes to Sieb of Siebdesign for coming up with the animation and the idea of building a preloader) Download the source code here: View the example here: Example with percentage visible: or download: (thanks to Olivier Dumetz) Features: Implementation: 1. 2. 3. 4.
Slide out and drawer effect The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area. This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Markup Since we’re practising unobtrusive JavaScript, the markup will start with headings separating the list items. There’s two approaches depending on your content. <ul class="drawers"><li class="drawer"><h2 class="drawer-handle open">Downloads</h2><ul><! And so on, with as many drawer elements as we want. Simple jQuery slide effect In it’s simplest form, the effect is this when the user clicks on the drawer handle: That’s it!
jQuery SuperBox! jQuery SuperBox! is deprecated and won’t be updated. I recommend to use an alternative like Magnific Popup for any new project. If you are interested in maintaining jQuery SuperBox!, you can fork the latest version on GitHub. Traductions Français English The english version of this page has been generously translated from french by Anna Mondeteguy. Introduction This script is a plugin for jQuery (1.3.x). Why create a new script of this kind, when many exist already? Accessibility. only the rel attribute is used to launch the script. jQuery Superbox! Download The minified version of Superbox is 2kb when using GZip compressing, 5.4kb otherwise. Donwload jQuery Superbox! Contribute You want to participate? Getting started To install this script, you must include on your page jQuery, as well as the files jquery.superbox-min.js (minified version) and jquery.superbox.css: By default, the superbox is generated from the rel attribute of a link. To activate jQuery Superbox! $(function(){ $.superbox(); }); Use
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI ThemeRoller ui design Update: We contributed this menu plugin to the jQuery UI library. We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels. Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types. We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options. By default, the menu script will transform an unordered list of links into a simple dropdown menu: Demo Page When the menu content contains nested lists, by default it creates an iPod-style menu: Demo Page Demo Page How it works
Fancybox - Fancy lightbox alternative Image Loading Basic Version In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image. There’s a few ways to approach the loading screen, two of which are: Use a background image on the holder div, this way we can easily centre align horizontally and vertically using CSS, rather than adding extra markup.Adding a styled div in our holder div, then remove the entire block of markup when the image loads. I’ve provided a screencast explaining how to achieve this (though it is based on the CSS version, also shows how to do this with a separate loading div). Watch the jQuery basic image load screencast (alternative flash version) View the demo and source code used in the screencast Note that in the demonstration as I am simulating loading a slow to load image by including a script tag at the bottom of the markup. HTML Markup The markup (segment) that we’re using is extremely simple. jQuery
How to Load In and Animate Content with jQuery In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects. So first of all, I have put together a very simple layout for this example. Here's a screenshot and the HTML code we'll use. Step 1 First thing's first, go and download the latest stable release of jQuery and link to it in your document: One of the best things, in my opinion, about jQuery is it’s simplicity. First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded). Step 2 So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page. Step 3 Step 4 Here is the code so far:
Tiny JS Jcrop - Deep Liquid Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or block objects Supports aspect ratio locking Supports minSize/maxSize setting Callbacks for selection done, or while moving Keyboard support for nudging selection API features to create interactivity, including animation Support for CSS styling, now uses LESS Touch support for iOS, Android, etc Cross-platform Compatibility Firefox 2+ Safari 3+ Opera 9.5+ Google Chrome 0.2+ Internet Explorer 6+ May work in older versions or other modern browsers, these were tested. Documentation Archive Jcrop is free software released under MIT License.
ColorBox - customizable lightbox plugin for jQuery 1.3 & 1.4 A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey,