background preloader

Awesome Bubble Navigation with jQuery

Awesome Bubble Navigation with jQuery
In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. View demoDownload source In this tutorial we are going to create a bubbly navigation with jQuery. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. As an example, we just show the first two items here. Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links. The CSS Let’s take a look at the styling. Now, we will use absolute positioning for the item: Since we gave the div two classes, we will now define the respective positions for each navigation item. The link elements of the icons will have the following general style: And we can again define each icon of the respective element: The JavaScript And that’s it! Related:  jQuery Slider Demo Tuts

How To Create a Cool Animated Menu with jQuery In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design. The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users. View the animated menu demo Create a new document and fill the background with a light beige. Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Draw and fill a rectangle to create the base of the label graphic. Use the Polygonal Lasso tool to draw a small triangle. All the menu needs now is a series of text links. <! jQuery

jQuery LazyLoad Ad - Afficher les pubs après le chargement de ses pages jQuery LazyLoad Ad est un plugin jQuery pour afficher les publicités de manière asynchrone et ainsi accélerer le chargement des pages de ses sites. L'affichage des publicités sur un site est un des facteurs qui ralentit le chargement d'une page. Le plugin jQuery LazyLoad Ad propose de résoudre ce désagrément en faisant afficher les publicités qu'une fois la page web complétement affichée. Utilisation de jQuery LazyLoad Ad En tout premier lieu, on commence par initialiser le plugin: 1. 2. 3. 4. 6. Il faut ensuite récrire le code publicitaire habituellement utilisé pour l'appeler avec le plugin. En prenant l'exemple d'un code pour adSense, on affichait notre publicité comme ceci : 1. 2. google_ad_client = "ca-pub-6922618980534490"; 3. google_ad_slot = "3844259857"; 4. google_ad_width = 300; 5. google_ad_height = 250; 7. Maintenant, avec le plugin, il faudra faire : 02. 03. google_ad_client = "ca-pub-6922618980534490"; 04. google_ad_slot = "3844259857"; 05. google_ad_width = 300; 06. google_ad_height = 250;

Our 50 Favorite Web Development Resources from 2012 Let’s keep it simple: last year, we did a roundup of 50 of the most useful web development resources. Today, we bring to you the 2012 edition, but only better. And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on. This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011. CSS Frameworks Base Framework Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. Bourbon Neat Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Kube CSS Framework The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. RWD Grid

Start/Stop Slider A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove "panels" and a stop/start button. I'm happy to say I was able to accommodate a bit with this new slider. It's not a plugin, so it's not as easy as it possibly could be, but it's much easier. The HTML Markup The markup is extremely light. Notice there is no markup for a stop button. <div id="slider"><div id="mover"><div id="slide-1" class="slide"><h1>Garden Rack</h1><p>Donec gravida posuere arcu. The CSS Not much to talk about here, much of this is merely presentational choices. The jQuery JavaScript 90% of what we are doing here is specific to jQuery. At the top of our startstop-slider.js file, is a single self-explanitory variable var delayLength = 4000; Then we'll begin our manipulation, after the DOM is ready of course. $(function() { $("#slider").append('Stop'); }); The "Auto Play" How To Customize

iPad Simulator - alexw.me Let me tell you what a crazy week it’s been regarding my iPad Simulator A little background I’ve thought about creating the iPad simulator shortly after I bought my iPad. I was fascinated by the UI and wanted to see if I can recreate it. This isn’t the first online simulator I’ve built, before this, was a Nokia n97 simulator, also built with JS + CSS ( I’ve uploaded the iPad simulator a while ago, started playing with it, adding apps (google maps, safari, photos etc’) , and I was getting 5 hits daily (most of them me from work) Forrst I joined Forrst and decided to share it with the forrsters , and I got amazing feedback. W3c Israel Some weeks after, I went to a W3C Israel meeting on web app development and after a short hackaton (results of which you can see here and fork on github ) I’ve showed the guys there the iPad simulator among other things. Morning After Twitter I’m glad you like it. Websites and blogs What’s next?

jsAnim - Free JavaScript Animation Library jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom

Collapsing Site Navigation with jQuery Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse […] View demoDownload source Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. So, let’s get started! The Markup Our HTML will consist of a main container with the class and id “cc_menu”. The first item will get a z-index of 5 and then we will decrease the z-index for the next items. Each submenu item will share its class with the respective content div. Let’s take a look at the styling. The CSS Our main div that surrounds everything will have the following style: The width of this container is the sum of all the item widths which is 5 times 140 pixels. And that was the style.

Raphaël—JavaScript Library 40+ jQuery Plugins Improving Your Website Look and Feel Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. I believe jQuery is the answer today just as Flash was 5 years ago. Advertisement PrettyPhoto Media This plugin can display videos, photos and other media utilizing stunning photos in a fancy overlay. qTip qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Tab SlideOut Create a side tab that expands content for a feedback form or contact info. Toolkit with 6 Awesome jQuery User Interface components SimpleModal SlideBox

jQuery 1.4.3 Offline Learning Kit Hey guys. Quick post for you today. So by now, chances are you’ve had an opportunity to play around with jQuery 1.5 (and 1.5.1) and you may have even checked out some of the great new Deferred features that that release came with. Today I wanted to share an offline learning pack for anyone interested in tweaking their jQuery skills offline. What does this learning pack come with? I’m also actively recommending all beginner and intermediate developers read Rebecca Murphey’s excellent jQuery Fundamentals book as it’s a wonderful starting point for increasing your knowledge and skills with both jQuery and JavaScript in general. The 1.5.1 Offline Learning Kit Includes For record purposes, if you’re interested in picking up the 1.4.3 kit from last year, I’m going to leave it up below. The 1.4.3 Offline Learning Kit Includes If you’re looking to start working with jQuery Mobile, it can be nice to have a minimalist example at your fingertips to start off with.

10 Super JavaScript Animation Frameworks JavaScript allows you to do a wide range of animations and effects that would otherwise be very hard to achieve with minimal overheads. Below is a list of JavaScript animation frameworks that will allow you to rapidly develop animations with ease. Have fun! Related Posts: 1. Raphaël Is a small JavaScript library that should simplify your work with vector graphics on the web. Source + Demo 2. Is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Source + Demo 3. script.aculo.us Provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. SourceDemo 4. Is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. SourceDemo 5. moo.fx Is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. Source + Demo 8. 10.

Nivo Slider - The Most Awesome jQuery Image Slider jQuery & WordPress Image Slider The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. The jQuery plugin is completely free and totally open source, and there is literally no better way to make your website look totally stunning. If you don’t believe us, check out the list of features below and you soon will. Beautiful Transition Effects The Nivo Slider makes displaying your gallery of images a beautiful experience, by using amazing transition effects ranging from slicing and sliding to fading and folding. Simple and Flexible Setup The Nivo Slider was designed to be as simple to setup and use as it could possibly be. Small, Semantic & Responsive The Nivo Slider is also designed to have as small an impact as possible on your page load times, so the packed version only weighs 15kb. Free to Use & Abuse The Nivo Slider jQuery plugin is open source and released under the MIT license. Powerful & Simple Slider Creation Multiple Slider Types Slider Themes

Sliding Boxes and Captions with jQuery | Build Internet! Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. The Basic Idea All of these sliding box animations work on the same basic idea. Confused? From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Step 1 – CSS Foundation Work Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2. Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we’ll need to set up the default starting point for the caption box. Step 2 – Adding the Sliding Animations Step 3 – The HTML Google+

Related: