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. There is a section at the end for customizing. 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. The "Auto Play" How To Customize
Making an infinite JQuery carousel Making an infinite JQuery carousel In this tutorial we will make an infinite JQuery carousel. I noticed that most of tutorials on how to make an infinite JQuery carousel are quite complex, so i decided to show you how to make it much simpler. How will it work? We will use an unordered list for our carousel items, which will be placed inside a div with overflow:hidden css property so all items beyond limits of the div will be hidden. Demo Source I think only one of these properties needs to be explained further. That’s how it looks. JQuery That’s it. Related posts: Slobodan Kustrimovic This author has yet to fill his BIO. Did you absolutely LOVE this article... share it!
Garage Door Style Menu Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta. A garage door style menu is where an image (the "door") slides up to reveal something behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. The jQuery Method Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin by Alexander Farkas. View Demo Download Files 1. We are going to need three different types of images here. Notice my guides. Second, we'll need to create the garage doors which we will call the "shutters". Lastly, we need a window which will act as the garage frame. 2. Here is the menu markup: The ID on the menu will give us all the specificity we need. 3. The menu background is applied to the UL itself. 4. if (!
Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images and Content Click here for the new version of this plugin Version 1.5 of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. All of the features here are result of your comments, so if you have more ideas, keep ‘em coming! Note: in case you haven’t already, you might want to check out article about first version of this plugin. Download easySlider1.5.zip Features This version features: auto slidecontinuous sliding"go to first" and "go to last" buttonhiding controlsoptional wrapping markup for control buttons vertical slidingmultiple sliders on one page Here are the things you can customize (with their default values) I will explain new options: controlsShow By default set to true, but if set to false it will not add any controls. controlsBefore and controlsAfter In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. controlsFade By default set to true. firstShow and lastShow auto
Create fancy share box with CSS and jQuery This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box. Download source View demo The idea is to have all of the buttons shown inline and partially hidden. When user hovers over a button it slides to the right and become visible. Styling unordered list We will use unordered list to create a simple list that will show icons of popular social bookmarking sites. We’ll leave HTML anchors empty here so you have to replace them with real links. Now the list looks fine, but this is not what we wanted to do. To carry out what we wanted from the beginning, we need to involve absolute inside relative positioning. Adding jQuery Image above shows how buttons will appear when we make them absolutely positioned. The code above iterates through collection of list items and applies z-index to each list item. Creating plugin
jQuery MagicLine Navigation These "sliding" style navigation bars have been around a while, I just thought I'd take a crack at doing it myself as the opportunity came up recently. Turns out it's really pretty darn easy. I put two examples together for it. The Idea The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. Typical list here.... <div class="nav-wrap"><ul class="group" id="example-one"><li class="current_page_item"><a href="#">Home</a></li><li><a href="#">Buy Tickets</a></li><li><a href="#">Group Sales</a></li><li><a href="#">Reviews</a></li><li><a href="#">The Show</a></li><li><a href="#">Videos</a></li><li><a href="#">Photos</a></li><li><a href="#">Magic Shop</a></li></ul></div> Notice the .nav-wrap div around it. Do the ol' inline list elements with floated left anchors to get the list horizontal and avoid stairstepping. jQuery JavaScript Issues
Stupid Simple jQuery Accordion Menu Overview: The original Stupid Simple jQuery Accordion menu was developed in 2010 with the goal of creating a ridiculously simple accordion menu. There were many other menus available online including a great one in the jQuery UI library. In an effort to solve this problem, I sat down and tried to create the world’s most simple accordion menu. The code below is for the faster and simpler version 3. Downloads: I have a complete working demo of the menu available here: You can download the entire menu source by clicking here: If you would like to play with the menu and test code modifications I have a Fiddle available here:
Kwicks for jQuery and an awesome horizontal animated menu Menu of a web page is the most important and maybe the most clicked link on your web page. Do you want your menu look sexy with an awesome animation on your website? Follow me, I will walk you to the final result of using Kwicks – jQuery Plugin to build an horizontal menu with a nice effect like Mootools but more customizable and versatile. Always begin with the Demo and Download, huh? In the example above, the block width of menu item will be changed when the mouse goes over. This tut also show you how to work with css sprites – a popular css technique (not a new anymore, huh?). HTML code: HTML code seem to be simple. CSS code: The CSS code below maybe a bit long, but I think it’s easy to read. Javascript Here is the list of javascript lib that we need to make the menu works And …. Copy & paste the hold thing below for the job done, but it’s just a little bit code I got. Read the Kwicks documentation for available options. One more thing  ............. Some words: