A Mac OS X-style Dock In JavaScript Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily. An example is shown below (a larger demonstration is available on a separate page). Compatible browsers The code has been tested and confirmed to work in the following browsers: Firefox 1.5 on Mac OS X Firefox 2 on Ubuntu Linux Firefox 2 on Windows (slightly jerky due to event handlers being given a higher priority than intervals) Internet Explorer 6 Internet Explorer 7 Konqueror 3.5 on Ubuntu Linux Opera 9 on Windows Safari 2 on Mac OS X Safari 3 on Windows Implementing the Mac-style Dock Before implementing the dock, please read the notes on usability. Download one of the files listed above and upload it to your website. The constructor takes five paramaters: node name
Create an apple style menu and improve it via jQuery Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery. This is what we are going to build (don’t forget to hover over the menu) Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks: Part 1: Conceptional work First of all you should do some conceptional work since you need to know the height of your menu itemsyou need to know the width of your menu items, both in normal and hover state.you need to know how many items you want Part 2: Photoshop Part 3: HTML and CSS
CSS Decorative Gallery Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.
TV des Entrepreneurs > Accueil Dan Wellman » jQuery Plugin – hoverFade September 13, 2010 I recently updated my hoverFade jQuery plugin after using the plugin in a couple of projects and work and needing extra functionality. I’ve been waiting for the jQuery plugin site to come back up again (which it now has) after being locked down following major spam attacks. I also wanted to wait until I had chance to put some proper examples together following comments in the original plugin release post (which can be seen here). Examples Ok, so I finally had time to put an example page together. Download Legacy version [1.4k]Version 1.0.2 unminified [2.21k]Version 1.0.2 minified [1.07k] Usage The plugin is designed to be used with navigation menus, where each menu item is made from an anchor element within a list-item element. First you should set up standard CSS hover states from the elements you want to add the effect to. There are 9 user-configurable options that can be set, which are listed in the next section Configurable Options Notes
Videolink : plugin javascript pour la balise video HTML5 Tutorial to create a Beautiful, simple, horizontal CSS menu | Tutorial to create a Beautiful, simple, horizontal CSS menu This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. First of all let us write CSS code for menu. here goes the code.. [code lang=”css”] Second of all let us write HTML list for menu. [code lang="html4strict"] [/code] Yeah..! Check out the demo below..
DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary: