| ActiveDen | Flash Marketplace |
| ThemeForest | Web & CMS Themes |
| GraphicRiver | Graphics, Vectors & Icons |
| VideoHive | Motion Graphics & Projects |
| AudioJungle | Loops & Effects |
| FreelanceSw | Freelance Jobs & Community |
| Rockable | Books & How-To |
| Creattica | Design Community |
| Mac.AppStorm | Mac Apps |
| Web.AppStorm | Web Apps |
| WorkAwesome | Be Awesome At Work |
| Envato | About Us |
| More Coming Soon! |
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.
jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use, highly configurable and robust, and extremely easy to theme. To follow the tutorial you’ll need a copy of the latest version of the library; it can be downloaded using the jQuery UI download builder at http://jqueryui.com/download. Although we can choose any of the themes available, I’d recommend using the default theme of smoothness. jQuery UI includes a copy of the current version of jQuery, so we don’t need to download this separately. Create a new folder somewhere handy and call it slider. Within this folder, create two new folders; one called jqueryui and one called images. Unpack the downloaded archive of the library to the jqueryui folder; in Explorer or Finder, you should end up with the following folder structure:
Let’s make a start on the basic page and underlying HTML first; in your text editor create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="slider.css">
</head>
<body>
<div id="sliderContent" class="ui-corner-all">
<h2>Some well known galactic nebulae and their vital statistics</h2>
<div class="viewer ui-corner-all">
<div class="content-conveyor ui-helper-clearfix">
<div class="item">
<h2>Omega Nebula</h2>
<img src="images/omega.jpg" alt="Omega Nebula">
<dl class="details ui-helper-clearfix">
<dt>Distance from Earth:</dt><dd>5000 - 6000 lightyears</dd>
<dt>Diameter:</dt><dd>15 Lightyears</dd>
<dt>Mass:</dt><dd>800 solar masses</dd>
<dt>Catalogue number:</dt><dd>M17 / NGC6618</dd>
<dt>Discovered in:</dt><dd>1764</dd>
<dt>Discoverer:</dt><dd>Philippe Loys de Chéseaux</dd>
</dl>
</div>
</div>
</div>
<div id="slider"></div>
</div>
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
</body>
</html>
Save this as slider.html in the slider folder. In the head of the page, we link to the jQuery UI style sheet, which contains all of the CSS that’s required for each of the library components. It may seem like a waste; in some ways it is as we’re only using a single component, but using a 26KB style sheet. However, using a tool like YUICompressor, we can easily shrink this, and with GZipping too we can get it down even further. We also link to our own custom style sheet, which we’ll create later.
We haven’t added any styling yet but for reference, the following screenshot shows the default slider widget:
On the page all we have is the mark-up for the content and the slider; we’ve got an outer container element which we’ve given the class name ui-corner-all. This is one of the classes targeted by the jQuery UI style sheet and will give our container (and the other elements we give it to) nice rounded corners. It uses CSS3 to achieve this so not all browsers are supported, but Firefox, Safari or Chrome users will see them.
Within the container we’ve got a heading element that describes the content, followed by another container element (which will also have rounded corners in supporting browsers); when we come to add the CSS, this element will be given an overflow rule of hidden which will hide most of the individual content blocks and allow us to slide them into view using the slider. This element will function as the viewer. Within the viewer we have a final container element; the reason for this is for performance – when we adjust the left CSS property with jQuery, we’ll only be selecting and manipulating one element instead of however many content blocks there are. We use another class name from the UI library on this element – the ui-helper-clearfix class, which automatically clears floated elements within whichever element it’s applied to.
Following this is an example of a content block; I’ve only shown one of them in the code example above because to show more would be unnecessary repetition. In the source file there are seven of them, but you can put as many in as you like and the slider will still function as it should. Each content block contains a heading, an image and a definition list, which semantically is probably the best choice for this example, but not necessarily required in other implementations. The content blocks can feature pretty much whatever they need to, provided each container is of a fixed size; you’ll see why this is important we come to add the JavaScript a little later on.
After the viewer element comes an empty container which will be transformed into the slider widget once we invoke the UI library. This is all underlying HTML that we’ll need. Following this we link to jQuery and to the jQuery UI source files; again, this file contains all of the JavaScript needed to run the whole UI library, which for this tutorial is more than we need. There are individual files for the core and each component separately which can cut down the footprint of the library. Both the jQuery and jQuery UI JS files are already minified.
In truth we don’t need to worry about styling the slider widget itself at all; the theme that we downloaded with the library will do that for us. The CSS we’re about to add is pretty much purely arbitrary for the purpose of this tutorial, to tidy things up and give it a basic minimal look. As long as the individual content blocks (given a class name of item) are given a fixed width and are floated to the left within the conveyor element, and provided the viewer has its overflow set to hidden everything should work as expected.
In a new file in your text editor add the following code:
h2 { text-align:center; font:normal 150% Georgia; }
#sliderContent {
width:650px; margin:auto; padding:0 50px 50px; background-color:#ebebeb;
border:1px solid #898989;
}
.viewer {
width:607px; height:343px; margin:0 auto 40px; padding:1px; overflow:hidden;
position:relative; border:1px solid #898989;
}
.content-conveyor { width:610px; height:335px; position:relative; }
.item {
width:304px; float:left; font-family:Tahoma; text-align:center;
background-color:#ebebeb;
}
.item h2 { font-size:100%; margin:10px 0; }
.item dl { margin:10px 0; }
.item dt, .item dd {
float:left; width:149px; text-align:right; margin:0; font-size:70%;
}
.item dt { font-weight:bold; margin-right:5px; }
.item dd { text-align:left; }
.item img { border:1px solid #898989; background-color:#ffffff; padding:1px; }
Save this as slider.css in the slider folder. Our page should now look like this:
All we need to do now is add the JavaScript that will initialise the slider and control our content blocks. Directly after the script element linking to jQuery UI in slider.html add the following code:
<script type="text/javascript">
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
}
};
//create slider
$("#slider").slider(sliderOpts);
});
</script>
It’s a very short, simple snippet of code, with very little going on; let’s take a look at it line by line; Within the document.ready short-cut we first set up a few variables so that we can cache the elements from the page that we’ll be manipulating for performance reasons; this makes our code run faster because we’re only traversing the DOM and selecting each element once.
We select the conveyor element first of all by targeting its class name; because using a class selector is inefficient, we give the selector a context of the sliderContent element. The context is provided using an id selector, so the whole DOM does not need to be traversed. We also select the collection of content blocks in the same way.
Once we’ve cached our selectors we can set the length of the conveyor element; in the CSS it was set to the width of two of the content blocks, but for it to function correctly, the content boxes need to float alongside each other, so the conveyor needs to be wide enough to accommodate them all.
So that we don’t restrict how many content blocks can be put into the widget we don’t hardcode a set width into it; instead, we get the number of content blocks, and multiply this by the width of each block. This is why it’s important to set a fixed width on the blocks. We need to use JavaScript’s parseInt function when we retrieve the width of the blocks because the jQuery css method returns a string value in getter mode.
Next we create a literal configuration object which will be passed into the jQuery UI slider method and used to set some properties of the slider widget. Our configuration object has two properties, max and slide. The max property’s value is an integer which represents the width of the conveyor element minus the width of the viewer. This will be the maximum value that the slider handle can reach. The value of the slide property is an anonymous function which will automatically receive two arguments; the original event object and a prepared object containing useful properties relating to the widget. We don’t use the first argument at all, which we define as e, but we need to include it to gain access to the second argument, which we term ui.
The slide event is a custom event exposed by the slider API, and the function we set as its value will be called each time a slide interaction occurs. Whenever the event is fired, we simply manipulate the left style property of our conveyor element negatively by the same amount as the slider is moved. We can get the value that the slider is moved to using the value property of the ui object.
We set the maximum value of the slider to the length of the conveyor element, in this example it ends up being 2128px, so the maximum value is 2128. This isn’t in pixels, as you’ll see in the next screenshot, the slider itself is around 650px in length. But, if we move the slider to about halfway along the track, the value reported in the ui object will be around 1064, so we move the left edge of the conveyor this many pixels to the left or right.
We don’t need to worry about detecting which direction the slider was moved in; if the slider handle has already been moved to the right, the left CSS property if the conveyor will already have a negative value. When we minus a negative number from a negative number, the outcome is of course a positive number so the conveyor will move back as it should. The completed page should now appear featuring the slider:
You should find that it works as expected and the different blocks of content can be moved in and out of view using the slider widget. As well as the standard drag interaction, also built into the slider is the useful addition of a click interaction; if click anywhere on the track, the handle is automatically moved to that position and the slide callback function is executed.
In this tutorial we’ve looked at how the underlying HTML used for the slider (a simple empty container), the default styling applied by the library, and how it can be configured and initialized with our code.
The slider is a great addition to any interface; it’s easy for us to set up and easy for our visitors to use, it’s tactile and interactive and can be used in a variety of situations from moving content around like in this example, or as, say, a volume control on a streaming web app.
Check out some more great tutorials and articles that you might like
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Community Link Feed
I don't know how to put this but i'm kind of a big deal
The effects and techniques demonstrated in tutorials on the Tuts+ network can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are copyright their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.
Writing a tutorial or article for the site is not only a great way to get exposure and give back to the community, but we'll also give you $150 cash to boot!
This is YOUR site, so if you have suggestions or feedback on how we can improve it for you, please let us know! We do our best to keep up!
User Comments
( ADD YOURS )The Mafalian July 10th
Thanks………
( )Gonzalo July 10th
Really nice, but if JS isn’t enabled you only see two images. Maybe you could display all of them by default, and hide the rest with JS, so that if the user doesn’t have JS they don’t miss that much.
( )Montana Flynn July 10th
You are absolutely correct. That would be the unobtrusive and progressive use of JS.
( )Jacob Lee July 10th
But then their would be a lag before the js loads and the page would jump.
Would it not be better to place them inside a div that’s scrollable, and then use the js to remove the scrollbar and place the alternative slider their. It works pretty much the same way, just slightly less aesthetically appealing, but the functionality remains.
Dan Wellman July 10th
using the native scroll bar would be the best way to do it definitely
thanks for reading
Hieu Vo July 10th
what do you mean by “if the user doesn’t have js ” ? I think every modern browsers these days also support JS.
( )DK July 11th
Some people browse with JS turned off, usually people using a screen reader, or some people turn off anything that involves animation etc to improve performance.
Shane July 11th
Modern computer-based browsers support JavaScript, but the user may have JavaScript disabled, for a number of reasons.
Also, some mobile handsets and other user agents’ support for JavaScript may be limited or non-existent.
You should always keep this stuff in mind when developing JavaScript. Don’t rely on it, use it to do nice things such as those demonstrated in this tutorial.
Nori Silverrage July 11th
I disagree. I think there is nothing wrong with relying on Javascript. If they don’t have it then its just too bad. That probably doesn’t sound good, and don’t get me wrong, if it is simple enough to do graceful degradation then fine, but I’m not going to spend tons of time making sure it works for the minute percentage of people that don’t have JS enabled.
Shane July 11th
OK Nori – we’ll agree to disagree.
Taylor Satula July 13th
-1 for accessability nori
Merrick Christensen August 10th
I am with Nori.
Myfacefriends July 10th
that’s very nice, and i have problem using the jq because where using mootols most of the time theres a conflict between the 2 javascript framework.
( )sven July 10th
use jQuery.noConflict();
( )Merrick Christensen August 10th
Or just use MooTools to accomplish this.
( )crysfel July 10th
Good one!!
( )Aaron Bentley July 10th
This is awesome, have a project coming up which is perfect for this
( )z0r July 10th
Looks pretty good. Nice one for scientific sites
( )Dan Wellman July 10th
lol, I used these images because they’re open-source and free to use
( )z0r July 12th
Anyway, this “theme” matches the slider very well.
Kevin July 10th
That’s really cool.
I like it a lot. Now I have to find a use for it!
( )Aayush July 10th
Obviously again a great tutorial….
( )Jeff Adams July 10th
Very useful cheers – can see a benefit here of using the slider for maybe displaying timelines of a company or product – cheers!
( )Dan Wellman July 10th
it does work very well as a product slider, I used it on an ecomms site recently
( )Rik Girbes July 10th
Nice, thx
( )Edward July 10th
Nice, I think I’ll use this.
( )kevinsturf July 10th
great tut. I always wondered how some sites even began to use the jquery ui slider. Now that you’ve clarified this for me, I ‘ll try to make something I’ve been wanting to make for a while now.
( )tintedPixel July 10th
Nice tut. You ever notice that no matter how cool the code is underneath, its the eyecandy that keeps them comin back. oooooooh pretty.
( )Márcio A. Toledo July 10th
That’s exactly what I was looking for! Thanx ^^
The only problem I see is that if javascript is disable, the user will not see the hidden content… but I think that the use of hide() function will do the trick here.
Great tutorial.
( )Soner Gönül July 10th
Cool man
( )Realy usefull http://www.sonergonul.com
Márcio A. Toledo July 10th
I’m thinking here… what happened to my comment? I just said that users with javascript disabled would not be able to see the hidden content.
Great tut.
( )BeMoreDifferent July 10th
great tut. really usefull!!!!
( )FireDart July 10th
This is awesome! Thanks for sharing.
Also is there a way to make it auto scroll?
-FireDart
( )Aaron Bentley July 11th
I am currently seeing if i can do this… will post any code snips i come up with
( )Muhammad Adnan July 10th
Very nice Tut Dan , i like it . will use in my future projects definitely !
( )Hieu Vo July 10th
I have already made one, but a bit more complicated than yours -_-
( )Developnew July 10th
nice tutorials….
( )HMM July 11th
very nice tutorial
( )DJmattH July 11th
Very nice tutorial! Thank you for that…
( )landscape Photography July 11th
thanks for sharing, nice tut.
( )Ben Blogged July 11th
Well done! Very useful tutorial.
( )Patrick July 11th
This is an interesting application. From a usability standpoint, however, I struggled to even figure out what I was supposed to do with the demo. Eventually after getting frustrated and clicking wildly I accidentally clicked on the almost invisible gray slider, advancing the images.
While this is a neat trick, designers and developers should remember to consider how a user with no perspective on the application will interact with it and come to understand it. Make the parts that require attention more obvious.
( )Dan Wellman July 11th
Hi Patrick, that’s a good point but you have to remeber that this is just a tutorial, the design is almost completely arbitrary and only the default styling for the widget is used. In a real-world implementation, the slider itself you probably be much more visible and is easily themed manually or with Themeroller
thanks for reading
( )Brian Temecula July 11th
I’ve only recently started working on learning jQuery, and I’m also checking out Prototype. The book that I am reading on jQuery is from Wrox books, and while I don’t have another book to compare it to, I really like the book and think it is well written. I look forward to reading more about jQuery, Prototype, or any javascript framework here.
I have plans to change my website, and use some javascript effects. These javascript frameworks are pretty awesome, but I think they do require reading a book to fully understand all of the finer points of the framework. There’s a new Wrox book coming out that showcases multiple javascript frameworks. Amazon has it available for preorder. Awesome topic, thanks.
( )Helen July 11th
Very nice. It solves the problem that the standard scrollbar is too ugly to be used inside the page.
( )Chris July 11th
Thanks for this tut!
( )JimmyJames July 11th
While a nice tutorial, I really don’t see the point. As mention ed earlier if JavaScript is turned off, it doesn’t degrade properly but moreover, there’s nothing that this accomplishes that can’t be accomplished without JavaScript at all. Simple create a container div and add your other divs within the container and set the overflow property on the container to auto. Any recent browser will automatically add a scroll bar similar to what the JavaScript of this code does.
( )Dan Wellman July 13th
But the scrollbar added automatically will vary quite considerably between browsers and cannot be styled at all except for in IE, whereas the jQuery UI slider is extremely themeable and totally consistent between browsers.
jQuery UI’s slider also gives methods for programmatically setting the value of the slider (cannot be done with native scrollbars) and callback functions whenever the value of the slider changes (very difficult to emulate with native scrollbars).
I understand that not everyone will want to use this, or if they do use it, maybe not in this way. The article isn’t trying to force you to use it, or say that it is the best in the universe, or anything like that, but if you wanted to put something like this together, you could use this article as a simple starting point.
thanks for reading
( )Dan Smart July 12th
Thanks for the tutorial.
I’m still unconvinced by the size of the Jquery UI module, it feels excessive unless there is significant use of the library.
( )Márcio A. Toledo July 12th
Dan Smart, I was thinking about that too. I found an exellent website that has a really nice slider (using JQuery too) that seems much smaller than this JQueryUI ones, but still very functional and elegant too. Take a look:
http://www.luigibormioli.com/products/
Wished I knew how to do something like this with raw javascript ^^
( )Snorri-Css July 12th
nice tut.
( )but i would like to be able to scroll side to side with my mouse
insic July 12th
+1 some user opt to scroll content using the mouse scroller.
( )XuanThanh July 13th
I just like to use mouse scroller to scroll the page!
( )strony internetowe July 12th
very useful!
( )Jack Millard July 13th
Great tut!
( )James July 14th
Dan,
This is an awesome implementation, the smoothest on the web.
I am extremely new to this, so could you explain how to make this into a vertical slider instead?
Thank you for your time.
James
( )Dan Wellman July 18th
The slider can be made vertical very easily, the jQuery UI plugin can have an orientation property set to vertical, see the API docs for more info: http://docs.jquery.com/UI/Slider#options
( )David Moreen July 15th
I love it. The sliding motion is so smooth and effortless.
( )Julie Berlin July 16th
Dan, thank you for the very clear explanation of your jQuery code. I can accomplish effects I want with jQuery and jQuery UI but I know there are better, more efficient ways of doing things. Thank you for introducing those concepts here and explaining them.. More, please!
( )Mujtaba July 16th
thnx a million for this tut…
( )Using your ideas i built myself a webdesign portfolio at: http://www.dynamicguru.com/mujtaba/
Dan Wellman July 18th
Excellent, it’s reay effective
a great implementation
( )Omer Abbas July 17th
Hi this is really nice but i want this in vertical can u help me with dat ?
( )Omer Abbas July 17th
ohh kool i did this ty again man
( )Omer Abbas July 17th
hey but i cant make a vertical slider
help me
( )Dan Wellman July 18th
Hi, see the API docs for info on setting the orientation property to vertical: http://docs.jquery.com/UI/Slider#options
( )km September 4th
Vertical Slider strats from bottom, not from top. How to change start point?
nazcar July 20th
very nice. thanks..
( )giulio July 22nd
good tutorial. how about using a bigger/custom handle?
thanks
( )Dan Wellman August 6th
You can specify custom styling as the handle is given the class name ui-slider-handle so as long as you out-specify the framework styles you can style it any way uou wany
( )Neill Horsman July 23rd
Could this work on a ?
( )Chillibeans July 26th
I can’t seem to get this to work properly vertically. I have the slider in vertical orientation but it slides the same way as the content (instead of opposite as it should do), and I can’t for the life of me figure out how to change it. Any ideas?
( )Dan Wellman August 6th
Start off with the last few content items visible instead of the first few, and as the slider has it’s top increased positively, move the content’s top negatively
( )AmericaReclaimed July 31st
Sliders are a great addition to most sites, particularly news.
( )Fiona P August 6th
Please help! Am wondering if there is any way to switch the slider so that the first items seen by the viewer are Crab Nebula and Eagle Nebula, and then we move the slider from right to left to view the rest. Thanks very much!
( )Luis // zreedee.com August 11th
This line:
conveyor.css(”left”, “-” + ui.value + “px”);
seems to be your problem, be sure add the “-”
( )Vivekanand August 9th
This is awesome enough, I am searching for round circle slider…. I got this one, cheers! thanks for this one and I would like to thank the author for sharing this one.
( )Merrick Christensen August 9th
Dan, nice job. I really like the slider effect its definitely a pretty alternative to the scroll bar. Anyways I liked it so much I turned it into a MooTools class. Well sort of, while its different it accomplishes the same effect. So for those of you wanting to do this using MooTools check out
http://thejavascriptblog.com/mootools-content-slider-class/
( )Swebd August 10th
First of all :: thank you! This was exact what I was looking for.
( )I have only one problem. The images I show in the slider content don’t open any more in a LightBox. They just open in another window. Is there someone who had this problem also and know how to resolve this problem? Thanks!
Luis // zreedee.com August 11th
Very nice man!
I was implementing this in one of my sites but I’ve found a problem when I added a margin and a padding to the div.item …
I don’t know if someone else had the same problem but here is my solution:
(I have to clean it now)
[...]
//set length of conveyor
var margins = 42; //you can get this parsing the margins and padding values at the same way as others
var itemn = parseInt(item.css(”width”));
var itemm = itemn + margins;
conveyor.css(”width”, item.length * itemm);
//config
var sliderOpts = {
max: (item.length * itemm) – parseInt($(”#content-wrapper”).css(”width”)),
[...]
hope you find this useful..
( )kula September 10th
is this setting the width of scroller bar?
( )chromax August 14th
It needs easing!
( )Zach Leatherman August 18th
This tutorial made me sad.
The slider component is meant to be used as a form control, NOT as a replacement for a scroll bar. I realize you’re just trying to demo jQuery UI functionality, but Front End Engineering isn’t just about making the code work, and examples that encourage bad usability are bad for everyone.
( )Dan Wellman September 30th
Apple use a slider in this exact same way to showcase some of their products, it’s just styled differently, as this example easily could be. See this page: http://www.apple.com/mac/
( )Edward August 20th
Hello,
Is there an alternative way to scroll the content as opposed to using a negative “margineLeft” or simple a negative “left” for a relatively positioned element.
For example. can we use the scrollTO plugin somehow to achieve that?
Please help me. I need this for my page (http://www.tomngo.net/arch1k/archives/category/academic) where i’m trying to use both the locallScroll and serialScroll plugins to make the “next” and “prev” buttons.
so yes. i wanna have both – a custom scrollbar and a cyclins slider effect.
Your help would be greatly appreciated. I’ve been trying to crack this problem for 3 days now!
( )TxT August 25th
Thanks man
( )Roger September 4th
Has anyone added Auto scroll snippet to this yet? I would love to see one that fits nicely into this sweet java scroller
( )Manuel Medina September 10th
Is there a way to combine the slider with a lightbox effect so if I have a link in one of the s it open the content (flash mp3 player) with the lightbox effect?
( )kula September 10th
how would you go about making the scrollbar a set width like 200px wide but my image viewing area is like 800px wide, appreciate the help
Thanks!!!!!
( )optimus September 12th
hey can anyone help me the same thing in vertical slider……
I tried this http://docs.jquery.com/UI/Slider#options
but some parameters are getting wrong………..
If anyone can, then really appreciated….
( )Roygbiv September 14th
I’m new to all this and have been playing around with it but would love to know how to show a div if the value hits a certain level and hide otherwise. This doesn’t seem to be working:
slide: function(e, ui) {
conveyor.css(”left”, “-” + ui.value + “px”);
$(”#amount”).val(’$’ + ui.value);
if ($(”#slider”).slider(”value”) == ‘304′) {
$(”#test”).show();
} else {
$(”#test”).hide();
}
Any ideas what I’m doing wrong?
( )rugbert September 19th
Ok so this is pretty cool but Im trying to get it to work vertically. I set the orientation to vertical and took the float off the items so that they SHOULD scroll up BUT Ive run into two issues.
First, the slider starts at the bottom of the track. AND pulling the slider up makes things scroll down when I set conveyor to “top”.
Its this line I need to change right?:
( )slide: function(e, ui) {
conveyor.css(”top”, “-” + ui.value + “px”);
}
thinkbliss September 27th
This is a great tut but I found one Safari bug I can’t figure out how to fix. I need all the items to have a width: auto; but Safari doesn’t like that and will display what seems like the last item with the scroll handle position at the end which also breaks the scroll.
Anyone have any ideas?
Thanks
( )lukas September 30th
very great tut. Thanks for sharing.
( )Joe October 11th
Amazing Tut!
( )Shahriar Hyder October 11th
Nice one mate. I have also added the link to your post in my Ultimate
collection of top jQuery tutorials, tips-tricks and techniques to improve
performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-
tutorials-tips-tricks-techniques-to-improve-performance/
( )elmolulu October 20th
Hi, thank you for this wonderful tutorial. I was trying to create something like the apple’s slider. There is another jquery tutorial out there, but it only works with older version of jquery. Would it be possible for you to show me how to add labels in the scroll bar so that when you click on the label, it will jump to that section accordingly? Your help is greatly appreciated!
( )Gunpower October 25th
Hi,
Thanks for the great tutorial!
Is it possible that you make one with mysql?
I would really appreciate that!
Greetz!
( )droomagon November 18th
any idea when you click on the block (on the scrollbar), it would slightly jump? how can i fix that ?
( )