jQuery Backstretch by Scott Robbin Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples. Do you see the full-sized background image on this page? Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site. Demos Where can I get it? If you are interested in learning more about Backstretch, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, Email Support is available for $17. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. Intelligist Share and demo code in-page, usingGitHub gists.
Web-kreation - 48 incredible Mootools Sripts Ever wanted to add some AJAX effects to your site to create a great and interactive looking site. Here s a list of 48 of the best Mootools scripts around there (e.g. image galleries, lightbox clones, tabbed contents, forms, menus, tables, date pickers…). MochaUI MochaUI is a web applications user interface library built on the Mootools JavaScript framework to develop great Web Applications, virtual desktop, modal windows, widget… Maybe the best mootools app I have seen so far. Visit » Mootools Ext Adapter An attempt at creating a mootools adapter for the fantastic Ext library by Jack Slocum.Mootools version: 1.2 Milkbox Another lightbox clone, but this time is written for Mootools 1.2.Mootools version: 1.2 NoobSlide Nice and easy plugin for image slider. 8 slider samples in total.Mootools version: 1.11 and 1.2 (E)2 Photo Gallery (E)2 Photo Gallery is a open source gallery. Pathfusion : Slideshow Slideshow with transition between images.Mootools version: 1.11 MooSlide SmoothGallery MooFlow Slimbox
Animated navigation items using jQuery — Tyssen Design Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It's JavaScript Time', about how to use jQuery to create the effect of animated rollovers on navigation items. The technique he outlines makes use of the same image replacement method as outlined in ALA's original Sprites article. The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don't see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone. When I do use image replacement, I prefer a method which leaves the text on screen when images are turned off – the Gilder Levin Ryznar Jacoubsen IR method, which I've written about before. And the javascript:
jquery-tubular - a jQuery plugin for full-size YouTube video backgrounds demo: seanmccambridge.com/tubular Usage is straightforward and requires JavaScript on the client's browser to work. Tubular is a jQuery plugin and therefore relies on jQuery. You will need to know the YouTube ID of the video you want to use as well as the container DIV of your web page. Please note, tubular must be deployed on a web server to function. 1. jQuery must appear BEFORE tubular in your HTML document. 2. 3. That's it! Please note that tubular will change the structure of your CSS.
Slideshow 2! A javascript class for Mootools 1.2 to stream and animate the presentation of images on your website If you are looking to download Slideshow, or for class documentation, please visit the open-source project at Google Code. If you are looking for the old version of Slideshow, it has been moved here. Support If you find this page helpful, why not donate? Because donations are voluntary, the act of making a small contribution has a big effect towards promoting future development and support. Examples By popular request, the following are some simplified examples of Slideshow usage: Demos Click below to view the various demos - perhaps the most impressive effect of all is simply viewing this page with javascript turned off. Slideshow 2! Colophon All photos were taken with a trusty Canon DigitalElph in New York, October 2007.
CSS Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own. The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5
Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples. Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site. Demos Where can I get it? If you are interested in learning more about Backstretch, it's recommended that you view the project on GitHub. Support Basic support is offered through Github's issues tracker. If you are in need of immediate support, Email Support is available for $17. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. Intelligist Share and demo code in-page, usingGitHub gists.
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery Vendors who are part of the IAB TCF940Reject allAccept all Purposes (Consent):Store and/or access information on a deviceCreate profiles for personalised advertisingUse profiles to select personalised advertisingPurposes (Legitimate Interest):Use limited data to select advertisingMeasure advertising performanceUnderstand audiences through statistics or combinations of data from different sourcesDevelop and improve servicesSpecial Purposes:Ensure security, prevent and detect fraud, and fix errorsDeliver and present advertising and contentSave and communicate privacy choicesCategories of data:IP addressesDevice characteristicsDevice identifiersProbabilistic identifiersBrowsing and interaction dataUser-provided dataNon-precise location dataUsers’ profilesPrivacy choicesData Retention Period:31 daysYour Consent:Consent expiry: 5 years 1 dayCookie expiry may be refreshed during the lifetime.Tracking method: Cookies onlyShow details
Create a Cool Animated Navigation with CSS and jQuery Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe's Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. Today we're going to build a really cool animated navigation menu using just CSS and jQuery. Demo and Source Code Overview The menu we're building can be seen in the screenshot below. I'm going to break this tutorial up into five sections as follows: Rough sketchCreating ResourcesWriting down the HTMLWriting down the CSSCreating the animation using jQuery Step 1 : Rough Sketch First of all let us see what we need to do here. So here's a rough idea of what we should do: We will split the page into 4 parts, header, navigation and content header and the rest of contentThe header area will be simple <div> containerThe navigation area will be split into several <div> container matching the menu item. The content will be a simple <div> container Step 4: CSS
Navigation Menus: Trends and Examples | Design Showcase Advertisement Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it. That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. This article presents recent trends, examples and innovative solutions for design of modern navigation menus. 1. The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well. 2. In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. 3. 4. 5. 6.