background preloader

Expanding Image Menu with jQuery

Expanding Image Menu with jQuery
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream. So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand: The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. The JavaScript Related:  JqueryGeradores & Códigos

Quicksand Reorder and filter items with a nice shuffling animation. Home About I love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects, like the one in this video. Documentation At the very basic level, Quicksand replaces one collection of items with another. Use plain HTML, like an unordered list. $('#source').quicksand( $('#destination li') ); This will work for the following HTML: <ul id="source"><li data-id="iphone">iOS</li><li data-id="android">Android</li><li data-id="winmo">Windows Phone 7</li></ul><ul id="destination" class="hidden"><li data-id="macosx">Mac OS X</li><li data-id="macos9">Mac OS 9</li><li data-id="iphone">iOS</li></ul> Please note that data-* is a perfectly valid HTML5 attribute. First container (source) is visible to the user. You need data-id attributes so that the plugin can identify the same elements within source and destination collections. Or List of available params: Examples So, go ahead and…

Effet de transition de couleur sur les liens avec jQuery L'idée est similaire à celle que j'ai déjà utilisée pour d'autres scripts. J'ai écrit une fonction qui sélectionne les liens (balises <a>), place leur contenu dans un <span> avec le nom de classe ".one" et ajoute un élément <span> avec le nom de classe ".two". <span> ".two" contient le même texte que <a> et est placé juste au-dessus à droite du texte du lien. Au départ, le deuxième <span> est caché. Lorsque le lien est survolé, le <span> ".two" transite en utilisant l'effet fadeTo de jQuery, pendant que <span> ".one" disparaît. Cela crée un effet de fondu en douceur vers une autre couleur. Bien sûr, IE est à l'origine de problèmes et nous avons eu à appliquer une solution de contournement. II-1. Téléchargez le fichier zip contenant mon script et la bibliothèque jQuery et placez-les sur votre site. II-2. Ajoutez ces lignes à votre fichier CSS. II-3. Assurez-vous que les sélecteurs CSS sont correctement écrits de sorte que vous pouvez appliquer ce script sur des éléments précis.

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. So, let’s do it! The Markup We will create two unordered lists, one for the main slider and one for the thumbnail navigation beneath the large image. The list for the thumbnail preview navigation will contain an absolute element (the first list element with the class ei-slider-element and the thumbnail list elements which consist of an anchor and an image (the thumbnail). Now, let’s add the style. The CSS First, we will define the style for the main wrapper. The JavaScript

jquery.mb.bgndGallery | Pupunzi With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can either navigate the gallery with your keyboard or with a control panel displayed where you whant in the page. Help Pupunzi‘s development! see the demoread the doc What’s new in 1.9.0 : Bugfix: just fixed a bug with the changeGallery method that didn’t return the new array correctly. What’s new in 1.8.9 : Added two new methods: addImages(Array, goto, shuffle) and removeImages(Array). What’s new in 1.8.8 : Updated the mb.CSSAnimate and the mb.browser components used by this plugin. What’s new in 1.8.5+ : Feature: Added a thumbs option to create a thumbnailed navigation bar. What’s new in 1.8.0 : Bug-fix: solved a bug that was afflicting the play if the next or the prev button was pressed multiple time. What’s new in 1.7.5 :

Web design and tools - A 5-Step Checklist for Mobile Website Design As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them. Choose the Right Markup In short, markup will make the content readable by mobile browsers. In deciding between the two, access your site’s analytics to see which devices your visitors are using. Knowing Your Device Scaling Down Your Website

30 Useful jQuery Filter and Sort Plugins By using jQuery filter and jQuery sort plugins you will be able to have a great control over the order, placement and organization of your page / or table elements. Further some of these plugins include drag-able controls making it possible to offer a more dynamic and user friendly design. Sorting and filtering is very useful if you have large datasets such as table views, however you can also use them for managing list views e.g. for a portfolio page. The Quicksand plugin found below is an example of this. This post has just been updated, all links checked. Advertisement SortTables Responsive - MORE INFO / DEMO SortTable is a mobile ready and fully responsive jQuery sort and filter plugin. jQuery Sort and Order Portfolio Plugin - MORE INFO / DEMO jQuery Sort and Order os a script for adding the popular sortable portfolio grids we see all over the internet. tQuery – Dynamic tables - MORE INFO / DEMO tQuery makes simple HTML tables dynamic. Advanced tables - MORE INFO / DEMO

IxEdit Fullscreen Background Image Slideshow with CSS3 Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source Happy new year, everybody! The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License. Note that this will only work in browsers supporting CSS animations. This tutorial is a part of our latest CSS3 experiments; you can find more of those here: The Markup We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading: <ul class="cb-slideshow"><li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li><li></li><li></li></ul> The spans are going to be the elements that will have the background images of the slideshow. The CSS Let’s style the unordered list first. The animation for each span will last 36 seconds and run an inifinite number of times. Demos

Related:  pamelazapata