Slidorion, An Image jQuery Plugin | jQuery Slider and jQuery Accordion JavascriptTips - jslibs - JavaScript language advanced tips and tricks - standalone JavaScript development runtime environment with general purpose native libraries These tips and tricks are not related to any web browser or any Document Object Model (DOM), they are only general purpose tips and tricks for the JavaScript language. Some of these tricks are using a latest version of JavaScript language (v1.8) and cannot run with the Microsoft Implementation of JavaScript (v1.5). All these tricks has been tested with the Mozilla SpiderMonkey/TraceMonkey JavaScript engine (v1.8). You can try these examples using jshost, a command-line JavaScript interpreter. If you need more explanation about one of the following tips, don't hesitate to ask me or use the comment section at the end of this page. See the TOC at the end of the page. Append an array to another array var a = [4,5,6];var b = [7,8,9];Array.prototype.push.apply(a, b); uneval(a); // is: [4, 5, 6, 7, 8, 9] Milliseconds since epoch +new Date() // 1259359833574 Simulate threads using yield operator JavaScript 1.7 //// thread definitionfunction Thread( name ) { for ( var i = 0; i < 5; i++ ) { prints: note output:
Hoverizr – An in depth view of the jQuery plugin As a web designer, from time to time, you may need to make a grayscale image fade into color on mouse over. So the typical solution would be to have each image desaturated to achieve the grayscale effect in Photoshop. Then, you would have to add a few extra divs and image tags to the markup an then add some jQuery magic to fade the images in and out. Or, you could have merged two images into one larger image with double the height and play around with background positioning in the CSS and Javascript files. Lets have a look at the pros and cons of each of those two solutions: Pros: • If you use an image sprite (both images in one file) then you have one less HTTP request for each image. Cons: • You have to manipulate each image separately, which means that the client might not be able to update images with that effect dynamically and it is a time consuming proccess.• If you use two images then you will have many HTTP requests. Enter the canvas element. Now let’s dive in. Hoverizr Part 1.
FlexSlider - The Best Responsive jQuery Slider namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin animation: "fade", //String: Select your animation type, "fade" or "slide" easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" reverse: false, //{NEW} Boolean: Reverse the animation direction animationLoop: true, //Boolean: Should the animation loop? smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode startAt: 0, //Integer: The slide that the slider should start on. slideshow: true, //Boolean: Animate slider automatically slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
Rafik Salama — Hybrid Binding: DOM Caching with Event Delegation in jQuery Imagine you have some HTML that represents a grid of products on a page. It’s marked up like the following: Title Title When a user hovers over each product, its respective title should be shown/hidden. $( '.product' ).hover( function () { $( this ).find( '.product-title' ).show(); }, function () { $( this ).find( '.product-title' ).hide(); }); This code works fine but has two large areas for optimization. The mouseenter and mouseleave functions will likely be called in near-tandem, which means that you’ll be using jQuery to look up the same DOM node twice. If you’ve got hundreds of items on the page, or even just tens, you’re attaching a copy of the handler function to each node and using much more memory than you need to be. Let’s take a look at a way to optimize each, in turn. To avoid the double DOM lookup, we can wrap the invocation of the hover method in a closure and capture the DOM nodes there. This manages to solve the problem of extra DOM lookups just fine.
Automatic Image Montage with jQuery Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps. View demo Download source Having a white space in the end of the container can, as well, be avoided optionally. The last image of the montage can fill the left space, so that the montage will be left gap-less. Another option that can be useful in some cases is the possibility to only allow that the height of all images will be the height of the smallest image, avoiding that any picture gets pixelated/enlarged. The images used in the demos are by Andrey Yakovlev & Lili Aleeva. The HTML structure Options There are several options for this plugin. View demo Download source
15 jQuery Space-Saving Content Sliders and Carousels We all know about the popularity of jQuery image and video sliders and carousels. For the most part they are all feature-rich and perfect in their own way, but very few of them have been built to accommodate non-image content (blocks of text) that would allow you to have, for example, a rotating featured content area or a popular post section. Why is that? The good news is that we have managed to find 15 feature-rich jQuery plugins that do cater for non-image content. Alright, let’s get to it. dualSlider dualSlider features not one but two animations, hence the name. bxSlider bxSlider features multiple transition styles, displaying of and moving multiple slides at once, prev/next + pager + auto controls, random start, ticker mode, callback functions, styling options, and many more. bxSliderView the Demo → AnythingSlider AnythingSlider combines a featured content, start/stop, and moving boxes slider into one, and throws in some new features to create a full-featured slider. SlideDeck
jQuery Proven Performance Tips And Tricks (Slides) Thanks to everyone that attended the jQuery London and London Web Standards meetups this month. As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary In case you missed the talk, the main takeaway from it was the importance of performance-testing your JavaScript and jQuery code (and appreciating performance gotchas you can keep in mind when writing code that uses jQuery). I feel that this is an area developers can significantly benefit from investigating further. From the feedback so far it looks like the majority of the audience found the content useful, so please feel free to share the slides if you think they can assist other developers. Thanks I'd like to extend my thanks to Adam Sontag, JD Dalton, Mathias Bynens, Andree Hansson and others for helping tech review the slides and tests. As always, thank you for reading and sharing my posts over the year. Until next time, g'luck with your projects! Addy
Supersized 3.2 – Fullscreen Slideshow jQuery Plugin This version of Supersized has themes, direct slide links, dynamic preloading, and an API. Introducing Supersized 3.2 Features Resizes images to fill browser while maintaining image dimension ratioCycles backgrounds via slideshow with transitions and dynamic preloadingCore version is available for those that just want background resizing.Navigation controls with keyboard supportIntegration with Flickr – pull photos by user, set, or groupHead over to the project page for all the details. New in Supersized 3.2 Complete rewrite of the Supersized script.More options, including ability to prevent slides from being cut off.Link directly to slidesAPI lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)Theme files are now separate from base files, which will make upgrades much easier. Inspiration / Sites Using Supersized I’ve put together a small sample of Supersized sites that I’ve come across recently. Plans for WordPress Comments and Feedback Google+
Flow Slider - Home - Flow Slider - jQuery plugin Latest Updates - DocumentCloud After being on the slow burner for several months, Backbone.js 0.5.0 was released this afternoon. Backbone is the JavaScript library that DocumentCloud uses to build out the workspace where reporters can upload, edit and organize their primary source documents. Along with a slew of tweaks and bug fixes , the most notable new feature is HTML5 “pushState” support , which you can see in action by trying a search in DocumentCloud’s public archive . This enables the use of true URLs, but also requires you to do a bit of extra work on the back end to be sure that your application is capable of serving these pages, so it’s strictly on an opt-in basis. Of course, not all browsers currently in popular use (ahem, Internet Explorer) support the “pushState” function yet. Older browsers will continue to use hash-based URLs, and if hash-based links are shared with modern browsers , they’ll be transparently upgraded to the “pushState” version of the URL. The full change log is also available.
How to Create a jQuery Image Cropping Plugin from Scratch – Part I Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library. Step 1. Setting Up The Workspace First, we are going to set up our project workspace for this tutorial. Next, you'll need to download the jQuery JavaScript library and place it inside the /resources/js/ folder. Step 2. To test our plug-in, we'll need to attach it to an image. The HTML Open up the index.html file in your favorite text editor and write the following code. There's nothing fancy here: just plain HTML code. The CSS Now edit style.css as shown above. We've customized the aspect of our page by changing the background color and adding some basic styling to the title and image. Step 3. Step 4.
Rhinoslider: The most flexible jQuery slider/slideshow Visual jQuery 1.2.6