Today's tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, "why?". Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider.
To get this started go ahead and check out the little demo below. There isn't anything real hard to figure out with the demo. One nicety to check out is the ability to click on the scroll bar anywhere and the div will do an animated scroll to that position. Just as a note, I have noticed a small bug with the jQuery slider where it doesn't always get the end position correct when you click on the scroll bar. Well, take a second and bask in the glory of the scrolling area below.
Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.
Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.
Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.
Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.
Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.
Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.
Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.
Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.
Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.
Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.
Ok, now let's get coding. We are first going to start with the basic html setup of the demo above. This shouldn't look like anything crazy. The first element I pretty much always add to wrap my content is a div. We then setup the slider div, the handle will be created for us. Next up is a div to scroll and inside a div wide enough to hold the content. And lastly the content, which in my case is a bunch of divs. This ends up looking like the following (minus the content).
<div id="content-slider"></div>
<div id="content-scroll">
<div id="content-holder">
<div class="content-item">
</div>
<div class="content-item">
</div>
<div class="content-item">
</div>
<div class="content-item">
</div>
<div class="content-item">
</div>
</div>
</div>
</div>
To complete the html part we need to add some css to make things look as they should. After the code I will go over it.
width: 510px;
margin: 0 auto;
}
#content-slider {
width: 490px;
height: 6px;
margin: 5px;
background: #BBBBBB;
position: relative;
}
.ui-slider-handle {
width: 8px;
height: 14px;
position: absolute;
top: -4px;
background: #478AFF;
border: solid 1px black;
}
#content-scroll {
width: 500px;
height: 300px;
margin-top: 10px;
overflow: hidden;
border: solid 1px black;
}
#content-holder {
width: 1500px;
height: 270px;
}
.content-item {
width: 290px;
height: 270px;
padding: 5px;
float: left;
}
Starting at the top we simply set the width the main wrapper. Then we set the size of the slider bar, we also have to set the position to relative (a must have). For the handle we set the size and more importantly the position to absolute. For the scrolling div we set the size to a visible area we want. To make sure the content is hidden beyond that we set overflow to hidden. The inside content holder needs to be wide enough to hold all of the content horizontally. Finally the content items themselves need to float left in order to keep moving horizontally.
We can start working with jQuery (1.3.2) now that we have everything setup. We also need to use some jQuery UI script so I built a custom script that included two pieces the UI Core and Slider Widget.
To get things moving let's take a look at the code to setup the slider. Using the basic jQuery setup function $(document).ready() we build our slider. To do this we use the function slider called off of the selector for the slider element. The options we pass are an object with animate, change, and slide properties set. The change property is set to the function that will be called when the slider value changes and the slide property is set to the function that is called when the slider handle moves. The creation code is below, we will add the event handlers after.
$("#content-slider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});
});
The two handle functions are below, I will go over the code after.
{
var maxScroll = $("#content-scroll").attr("scrollWidth") -
$("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value *
(maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollWidth") -
$("#content-scroll").width();
$("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
The first line of both event handlers calculates the maximum scroll value, which is equal to the scrollWidth minus the width of the div. Then for the change event we animate the div scrolling using the jQuery core animate function. Then for the slide event we simply set the scrollLeft value. To calculate we use the slider value (defaults to value of 0 to 100) and the max scroll to figure out the scroll offset.
Well that pretty much takes care of all the code. You can download all the demo slider application files and if you have any questions feel free to ask. Until next time, keep coding and keep reading SOTC. Also note that the demo was tested in FF2, FF3, Opera 9.6, Safari 3.1.2, IE 6, and IE 7.
Edited May 11 2009
Code has been updated to work with jquery 1.3.2 and jquery UI 1.7. The example project has been updated as well. The example above is still using older code.
Edited June 18 2009
For jQuery UI 1.7.2 in order to get smooth scrolling when clicking on the scroll bar you need to update ui.slider.js and replace the following:
handle: this.handles[index],
value: newVal
});
with
var allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal
});
}
Thanks, to hiKrittiya for providing this update.
10/24/2008 - 21:46
Your link to the "demo sler aspplication files" does not work.
How do I get a copy of your slider code?
Thanks.
10/24/2008 - 21:58
Sorry, there was a typo in the link - it is fixed now.
11/07/2008 - 09:16
Thanks a lot for the cool code. This is one of few jQuery scrollers I have found that actually works smoothly in all browsers. Well done!
Now I am trying to change the scroll-handle to be an icon instead. Wish me good luck.
Tomas
11/08/2008 - 02:29
What if you only have 3 content-items and have all this extra white space?
Is there something that can be tweaked with the coding to scroll to the length of the last div?
11/11/2008 - 23:26
Very useful JQuery script.
11/15/2008 - 09:23
Great app. How do I make it scroll down instead of to the left? I feel like I've changed all the css to do this. But I'm not certain where to start with the jQuery scripts.
Thx
11/16/2008 - 09:52
That is really nice. I too would like to see how to make is scroll vertically. Nice work.
11/17/2008 - 18:35
is there a way to use this script but to not have to set the width of the container div (content-holder). I would like to use the scroller for a site running off of a cms - so I can't preset the width because the amount of content will be changeable.
11/24/2008 - 23:39
The code works, thanks for your blog.
11/25/2008 - 12:05
Hi, great script! thank you! I w as wondering if you could tell me how to get the slider bar centered under the box? I've shortened it but it aligns on the left. Would love to have it centered.
Thanks, -Chris
11/25/2008 - 12:06
link to my page is here:
http://tattoodesignmall.com/index.php?main_page=index&cPath=2
12/09/2008 - 12:48
Thanks for the tutorial!
When you refresh the page, the div content doesn’t start back at the starting point to the left like the handle does. Is there a way to make this happen?
Also, is there a way to make the slider snap to step points while retaining the smooth scrolling effect?
@mark: assuming all the content-item divs are equal width, you can make it work without knowing the exact width of the content holder. What I did was calculate the amount of child divs in the content holder. Then, since I knew the width of each content-item div i set $(”#content-holder”).css(”width”, childWidth * amountOfChildren
My example is at http://static.spartaninternet.com/sandbox/
01/26/2010 - 17:11
The issue with the slider not being reset to its correct position along with the div can be corrected using the following bit of code
$("#content-slider").slider({ animate: true, change: handleSliderChange, slide: handleSliderSlide });
var content_scroll_pos = Math.floor(($("#content-scroll").scrollLeft() / $("#content-scroll").width()) * 100);
if ($("#content-scroll").scrollLeft() != 0) { $("#content-slider a").css("left",content_scroll_pos+"%"); }
});
Great script, thanks again.
02/19/2010 - 14:47
correction to above:
04/21/2010 - 04:45
what is the ".wall" ?
03/03/2010 - 22:58
amy, i a noob, can you please show me where to insert the code to make it work. Thanks in advance
03/04/2010 - 19:56
someone please help me. i need to know how to make this script work without defining the width of the scroll. amy showed the script addition but i dont know how to implement it. im a noob. please help!!! really nice script btw
12/17/2008 - 07:11
And is there any way to make it works if you don’t have javascript active?, i mean unobtrusive javascript.
Thanks in advance.
12/29/2008 - 08:09
Sorry for the stupid question but how can I use this scroll for vertical content?
01/03/2009 - 10:24
I have 50 “content-item” and scroll is very fast.
How to reduce scroll speed
01/22/2009 - 08:50
Great! helpful for us!!!!!!!!!!!!!!!
04/10/2009 - 13:08
Hi! Great script...
I was just wondering how I might be able to make the scrolling action a bit smoother. Are there any options or plugins that might help make the scrollbar a bit more responsive and smooth?
Thanks!
04/13/2009 - 10:13
Are you talking about the content scrolling more smoothly or the scrollbar itself? For the more responsive part can you include an example that illustrates what you're looking for?
05/06/2009 - 10:03
Hi Fattest
great tutorial
but does not work with latest build of jquery.
can you please amend it for new jquery i have tried many times but failed i hope you can get it to work with JQ1.3 above.
Regards
Salman
05/06/2009 - 12:15
Yes, I will do this today at some point and update the post above.
05/07/2009 - 14:49
Hi Fattest
Thanks mate for quick response,
looking forward to it, i want to implement this idea into one of my apps so keenly waiting for the update.
also when i try to post a reply from google chrome i get an error saying
"Your hashcash string is not valid. Are you a spammer?"
Regards
Salman
05/07/2009 - 14:54
Thanks for the comment reply bug. I just tried using Chrome to reply and had no issues (both logged in and not logged in). The comment system requires javascript to be enabled when you're not logged in. Is there a chance you've got javascript disabled?
05/07/2009 - 15:05
Wow
you guys are fast with responses
i think javascript is enabled, can you disable javascript in chrome?
lets try to send this comment from chrome instead of fox
and what about the tutorial being compatible with JQ1.3
salman
05/07/2009 - 15:08
You know, I actually don't think you can disable JS in Chrome. It looks like the comment worked though, so maybe that was a one-time glitch. I'll have to check out our HashCash module. As far as the tutorial working on JQ1.3, that's all up to The Fattest. I'm sure he's on it though.
05/09/2009 - 13:18
Well guys its my 4th and final attempt to send comment and i have tried chrome, IE7, Firefox3 all said
"you hascash is not valid are you a spamer".
fattest iam still waiting foe the tutorial to be updated for jq1.3
salman
05/10/2009 - 09:41
It is not working properly with jquery v1.3.2 and 1.7.1. The content is moving but the handle remain fixed
05/11/2009 - 09:33
Sorry for the delay but the code has been updated to jquery 1.3.2 and ui 1.7.1. Let me know if you have any issues.
05/26/2009 - 11:24
Hi, I've tried the latest version of this (downloaded your demo files) and there do seem to be some bugs using jquery1.3.2 and ui 1.7.1. I've been testing in FireFox 3 and Safari on the Mac.
Are you aware of any bugs?
05/16/2009 - 15:49
Hi there,
I am using this script, making a portfolio,
here is a snippet, explaining the problem:
bkinfo.bk.tudelft.nl/portfolio/websites/jvanommeren/Third%20website/slider_test.html#
the problem is that the slider only appears at the first loaded item.
I am pretty new to jquery, probably, I need to make some sort of generic piece of code, but I dont know how...
Thanx!
05/18/2009 - 21:11
I think this is probably because of the multiple sliders and your using the same id for every slider. This is going to confuse javascript. If you would like I can put up a sample using multiple sliders?
10/23/2009 - 12:06
How do I edit the javascript code if I'm using multiple sliders? Any help would be very much appreciated, thank you in advance.
05/20/2009 - 22:23
First, nice piece of code!
I have an interesting issue...I'm using this to scroll my news and everything works well in FF, Chrome and Safari, in IE however the floated item elements remain stationary when I scroll the div.
Any ideas why or how to fix?
My sandbox page: http://newsite.aquanode.com/news
Thanks in advance and again nice work.
05/21/2009 - 01:28
Hi,
Nice work. How can i make it to scroll vertically instead of scrolling horizontal?
Thanks
leluch
06/12/2009 - 01:02
Very nice work! I downloaded your slider_example which uses jquery 1.3.2 and ui 1.7.1. and tested it.
It works fine when I drag the blue handle. However,if I click anywhere on a grey track, the content doesn't scroll /animate properly. Sometimes the content jumps without animation and sometime with animation.
I found a similar issue when I tried the tutorial I found below with jquery 1.3.2 and ui 1.7.1 http://jqueryfordesigners.com/slider-gallery/
I'll revisit your site to see if you find any solution to fix it.
Thanks again :) !!!!
06/12/2009 - 12:43
I will check it out, probably won't get to this until tonight though.
06/16/2009 - 10:51
hi The Fattest.
Thank you for your response. Did you get a chance to look and find a solution to the unsteady animation (when clicking the track)? I wonder if this is caused by a conflicting logic in the two callback functions ( slide and change) .
For example, whenever the track is clicked, the handleSliderSlider function will always be executed before handleSliderChange function. The code in the handleSliderSlider function tells the content-scroll to move without animation. Then, the handleSliderChange tells content -scroll to move with animation BUT the content -scroll was already moved before.
Is there a way to stop handleSliderSlider from being executed when the track is clicked?
If my assumption makes sense, I wonder why this is not an issue in older jquery ui 1.2.x ( the demo embedded on this page shows a perfect smooth animation when clicking the track).
I'm new to jQuery but found your resource very useful. Thank you in advance!
06/16/2009 - 15:03
Yeah I played around with a little bit, I will try and come up with solution quickly.
06/17/2009 - 16:43
hi again :)
I found the answer that someone posted from
http://jqueryfordesigners.com/slider-gallery/
and want to share.
//Using jQuery ui 1.7.2
the ui.slider.js: needs to be modified. from
handle: this.handles[index],
value: newVal
});
to
var allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal
});
}
This prevents the slide function from being triggered when clicking the slider ( track).
06/17/2009 - 17:40
awesome stuff, I assumed it was something of mine and hadn't started combing through their code yet. I will add an edit to the post about it.
07/02/2009 - 23:44
ui.slider.js ? For all those who don't understand which file he's talking about, just use
http://jqueryui.com/latest/ui/ui.core.js and
http://jqueryui.com/latest/ui/ui.slider.js
instead of the custom jquery ui, and scroll to line 360 of
ui.slider.js to find the "allowed" variable".
07/15/2009 - 08:14
Hi to all and thanks for the cool code!!!
I have this problem: http://89.186.66.71/dmanagement_ok/html/scroll/multimediaw.asp?mnome=megan
Anyone help me?
thanks
Bye
07/15/2009 - 12:52
What is the issue, from a quick glance I didn't see anything obvious.
07/27/2009 - 22:23
http://www.invisionblue.com/lab/scrollhorizontal/slider_test.html how come when I click the orange scroller it moves about 30-40 pixels to the right?
07/28/2009 - 09:10
This is happening because the click is being recorded on the scroller (track) and the middle of the slider button is the 0 point on it, the left side of the button is. Not sure the best way to remedy that, will try and think up something though.
07/28/2009 - 10:15
If I made the button smaller would that help? I've noticed on yours and some others it's thin and doesn't do that.
07/28/2009 - 12:37
Yeah that would certainly help.
07/28/2009 - 13:33
problem solved without changing the size. I simply removed the attribute "width: 66px;" and made it "padding: 5px 33px 5px 33px;" and it now works smoothly. So I suppose the width attribute was the problem here.
08/04/2009 - 13:25
great work! I'm having a problem with using a background image on the handle. If I use a root-relative url, or a full url, it creates all kinds of problems in IE. Something like this doesn't work:
background:url(http:www.foo.com/scrollbar/handle.gif);
}
but this works:
background:url(scrollbar/handle.gif);
}
I need to use root-relative links in my site, but can't figure out why this is causing problems.
08/04/2009 - 15:14
At first glance, the URL syntax is incorrect. You have:
Where it should be
You forgot the set of slashes after the http.
08/04/2009 - 15:31
Sorry, that was just a typo in my comment. The problem persists with a properly formed url. The problem involves quirky behavior during hover and drag states in IE. I tried making explicit styles for different link states (.ui-slider-handle:hover, ect), as well as the specific class names that are added when the handle changes states (ui-state-hover, ui-state-focus).
08/04/2009 - 17:13
Which version of IE are you using?
08/05/2009 - 12:39
IE6
08/04/2009 - 17:15
I always put the contents of url() in quotes. ex
url("scrollbar/handle.gif"). Does that help at all?08/05/2009 - 12:40
the behavior is the same for single quotes, double quotes, and no quotes
08/05/2009 - 15:57
If you want a wide scrollbar you'll run into a couple issues, but I've found solutions.
If the scrollbar is wide it will align to the right of the mouse when you click the track, rather than ending on the center. This can be fixed by adding a right-margin to the handle that is the negative value of half the handle width. Example:
width: 92px;
height: 12px;
position: absolute;
margin-left:-46px;
overflow:hidden;
}
The handle also hangs off either end of the track rather than ending at the end of the track like you would expect from a normal scrollbar. Fix this by subtracting the handle length from the track width and adding a margin to the left and right of the track equal to half the length of the handle.
To make the shortened track appear longer you'll need to add elements to either side matching the track background, or use a single element on a lower z-index below the track.
The make the left and right sides of the track go to the end, you can add buttons on a higher z-index above the slider. Here's an example:
css:
[css]
#sliderLeftButton{
position:relative;
top:-36px;
height:12px;
width:56px;
overflow:hidden;
}
#sliderRightButton{
position:relative;
top:-48px;
left:912px;
height:12px;
width:56px;
overflow:hidden;
}
html:
<div style="height:12px; width:56px; display:block" onClick="javascript:moveSlider(0);"></div>
</div>
<div id="sliderRightButton">
<div style="height:12px; width:56px; display:block" onClick="javascript:moveSlider(100);"></div>
</div>
javascript:
$('#content-slider').slider( 'value' , value );
}
This code isn't optimized, you can probably clean up the css some. I hope this was helpful.
08/17/2010 - 08:40
this is amazing, but I am a Noob,
where do i put the HTML tags? anywhere, or somewhere in the earlier tags?
08/05/2009 - 17:48
Good evening friends
First, i want to congratulate you for the great job you're doing.
I've been having some troubles trying to put together the solution by increase the 8px size of ui-slider-handle to 40px. It actually increase but after move the slider to the end of the area it just fade away. Is there any solution for this problem? Thank you a lot for all your time, please let me know if you need extra information. I will appreciate so much your help, i don't know what else to do, i'm kind of desperate. Thank you friends. Best Wishes
08/05/2009 - 19:26
One of the earlier comments had an issue similar, he solved this by keeping the standard width and adding padding the slider to make it bigger.
03/05/2010 - 00:43
the fattest, could you help me out with the width of the content holder. I need to find a way to not define it in the css bc I wont know how many items ill have scrolling horizontally. all items are the same width and height. please help! thanks
08/06/2009 - 08:51
Hello My friend,
The fattest, I actually did read the post from invisionblue but in my case it didn't work that solution 'cause setting the padding the size of the ui-slider-handle did increase but it keeps getting out of the boundaries at the end of the area. Thank you a lot my pal,. I really appreciate all the time you're putting on this! Best wishes
The next link: http://jd17ortiz.100free.com/slider_test.html has an example of what im trying to do, in the code i change the padding as the last comentary says but the slider keeps getting out of position
JD
08/12/2009 - 17:42
JD, sorry for late response but I was out for town for some RL vacation. I figured out why it goes out of bounds, they use the css
leftattribute to move it and they used to use absolute px placement calculating the correct amount for the width of the slider bar. They no longer do that and use percentages % now. This causes the slider handle to go off the end. They center the handle by using negative margin on the handle. I personally don't like this solution at all, but that is the way it is. I would suggest if you want to scroll the entire distance inside the bar you wrap the scroll bar in another div, in which you style like your scroll bar and then inside offset the actual scroll bar by the width of your handle. Let me know if this doesn't work out or if you need an example of what I am talking about.08/17/2009 - 15:16
Thank you the fattest, you don't have to apologize, i understand perfectly. About the slider topic, i understand what you're suggesting, but it isn't clear enough for me the use of an internal div, if you could show me an example about it i would appreciate a lot. The solution a have come througth is the one you suggest about center the handle but this makes the sensible area of the scroll shrinks, but i don't think is quality at all.
My friend, if it isn't too much bother i would like to know if in order to implement two sliders i have to use the function $("#content-slider").slider({ twice, changing the id of each div for the slider. It isn't any other more elegant solution?
Thank you for everything and sorry for all the trouble. Greetings
JD.
11/11/2009 - 07:28
hi, can you pls give us an example to stop the slider going out of bound at the end. I have been struggling to solve this issue.
09/04/2009 - 03:23
hi dud,
it really nice, but I cant able to use #content-scroll's width by %, because whole pages i m making with % only, if I give width by (px)It does not flow of design page. Please help.
09/04/2009 - 05:25
Hey it working........ thk alot
09/15/2009 - 15:23
Awesome, this really helped me out with something Ive been working on but I was hoping for help getting things to scroll vertically.
I changed orientation to vertical, and made the appropriate CSS changes butt the scroll bar wont work.
do I have to make changes to handleSliderChange and handleSliderSlide?
I changed the lines for max scroll values to:
but do I have to change that "scrollLeft" on the next line too?
09/23/2009 - 10:29
I've got few questions about that awsome slider.
1. Is it hard to make it slowly move itself? I'm new with jQuery and even if it's piece of cake I won't figure it out myself.
2. Is it possible to catch mouse wheel moves over it, and scroll it accordingly?
Thank you for any help
09/23/2009 - 16:50
i'm sorry if this is double post or i missed it in description, but for me, it looks better if the speed of sliding content is calculated in same way and using same easing as slider animation when clicking on slider tray. Speed of animation is calculated by the distance of mouseclick from the handle.
However its very nice example.
sry for poor english.
10/08/2009 - 19:14
I am trying to do vertical scrolling too and I got the scroll to work except that the slider doesn't move/slide.
I changed the follow:
$("#content-slider").slider({
animate: true,
orientation: 'vertical',
change: handleSliderChange,
slide: handleSliderSlide
});
});
function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
$("#content-scroll").animate({scrollTop: ((100 - ui.value) * (maxScroll / 100)) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
$("#content-scroll").attr({scrollTop: ((100 - ui.value) * (maxScroll / 100)) });
}
Any idea how to make the slider handle to move? Thx a lot.
11/14/2009 - 04:22
@Jabie you need a initiate value below orientation option I think, say:
orientation: 'vertical',
value: 100,
01/07/2010 - 11:48
This does cause the thumb to appear at the top of the scrollbar, however, the scrolling is inverted(the top of the scrollbar shows the bottom of the content)
To fix this, change the functions so they look like this:
animate: true,
change: handleBioSliderChange,
slide: handleBioSliderSlide,
orientation: 'vertical',
value: 100
});
function handleBioSliderChange(e, ui)
{
var maxScroll = $("#artist_bio_content").attr("scrollHeight") - $("#artist_bio_content").height();
$("#artist_bio_content").animate({scrollTop: (100-ui.value) * (maxScroll / 100) }, 1000);
}
function handleBioSliderSlide(e, ui)
{
var maxScroll = $("#artist_bio_content").attr("scrollHeight") - $("#artist_bio_content").height();
$("#artist_bio_content").attr({scrollTop: (100-ui.value) * (maxScroll / 100) });
}
the only difference is
ui.valuebecame
(100-ui.value)01/22/2010 - 21:51
Kevin, I've found this tutorial and tried to adapt it to a vertical slider bar. I saw your comment and followed it, but my slider still doesn't slide. The content scrolls, but the slider doesn't move. Here's my code, do you see what could be the problem?
$("#content-slider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
orientation: 'vertical',
value: 100
});
});
function handleSliderChange(e, ui)
{
var maxScroll =
$("#content-scroll").attr("scrollHeight") -
$("#content-scroll").height();
$("#content-scroll").animate({scrollTop:
(100-ui.value) * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll =
$("#content-scroll").attr("scrollHeight") -
$("#content-scroll").height();
$("#content-scroll").attr({scrollTop:
(100-ui.value) * (maxScroll / 100) });
}
02/02/2010 - 03:49
I also used this code , but the slider does not moves. Any workaround ?
02/14/2010 - 15:09
To get the slider to move using a vertical bar you need to change the css form
width: 8px;
height: 14px;
position: absolute;
top: -4px;
background: #478AFF;
border: solid 1px black;
}
to
width: 8px;
height: 14px;
position: absolute;
left: -4px;
background: #478AFF;
border: solid 1px black;
}
change the position from a fixed top to fixed left.
12/03/2009 - 09:53
Anyone else having issues with skinning the handle in ui 1.7.2
for what ever reason it seems to be defaulting back to the stock handle and not allowing me to use my own skin for it.. :/
1.7.1 works fine, I would go back to 1.7.1 but I already am using 1.7.2 through out the site and I would like to stay up to date..
01/07/2010 - 13:58
I didn't have any trouble skinning my thumb, make sure that your custom CSS comes after jquery ui's themebuilder so that your styles overwrite its styles.
12/09/2009 - 10:51
Hi, when i use the script it works fine, but when i click the slider handle there appears a little blue halo around it... anyone knows how to get rid of this?
Thanks
01/08/2010 - 05:29
Hi there
My mouse moves off my slider as I scroll. The issue resulting from this is that my content don't scroll all the way
I've also modified my #content-slider and .ui-slider-handle a bit according to my needs
{
width: 100%;
background: #BBBBBB;
position: relative;
}
.ui-slider-handle
{
width: 2px;
height: 40px;
position: absolute;
top: -4px;
background: #ff0000;
background-image:none;
}
02/07/2010 - 16:24
good thakns
02/10/2010 - 06:28
Thanks for these useful JQuery slider tips.
Don't overlook the ASP.NET Ajax slider, it can easily be swapped with JQuery slider and can make it easier and solve some common issues:
http://www.timacheson.com/Blog/2010/feb/ms_ajax_slider
03/05/2010 - 19:21
Is there any way to get the slider to move to a set point on page load. The idea being when something is clicked in the slider and page reloads I can move the slider along so the item they clicked is showing on the left.
03/22/2010 - 10:45
I Love it! Thank you! However, I have a mootools slideshow on the page I want to add this to and they will not work together. Do you know how I would use a NoConflict script to make them both work on 1 page?
Thanks!
04/06/2010 - 20:10
Awesome slider...
BUT...
When i download the .zip and open it in FF, there's an issue with the handle overlapping the div "content-holder". The distance is equal to the width of the handle.
The example on your site works PERFECTLY - but the demo .zip has the error in it.
Any ideas?
07/28/2010 - 03:46
Hi Gerry.
Were you able to fix this? If so, can you please post the solution here? If not, can anyone help us? :D
Thanks!
04/10/2010 - 18:36
Very useful script, absolutely love it!
Just quoting one question posted before(anonymous 03/05/2010 - 19:21) which I think would be a nice feature to have: is there any way to change the starting point of the slider so that the handle and clicked scrolled item are in the middle when a new page loads?
05/17/2010 - 16:17
hmm, tried out the example scroller above and it did not function at all (tried in Firefox 3.6.3 and Internet Explorer 7). Any idea why this isn't working for me? I certainly don't have Javascript turned off!
05/17/2010 - 16:35
Sorry about that, I had made a change to the site recently which apparently causes our jQuery tutorials to stop working. This should be fixed. Thanks for letting us know.
06/03/2010 - 08:31
hey all
i've rewritten the whole thing to make the scrolling vertical...i've also wrapped it as a jQuery plugin so it can be easily evoked on multiple elements like e.g.:
$('div.slider-vertical').sliderVertical({height:100, width: 200});<div style="position:relative;">
Lorem ipsum dolor sit amet....
</div>
</div>
the js code for the sliderVertical plugin is below.
However, the whole slider thingy doesn't work in IE 7 (not sure about the other IE versions just tested in IE 7 for now) when there are relative positioned elements inside the slider-vertical div...?!?
thanks
sissi
var SliderVertical = function(element, o)
{
element = $(element);
var obj = this;
var s = $.extend({
element: $(element),
height: 300,
width: 100, //needed if element is initially display:none
heightContent: '',
elSlider: '',
elScroll: '',
elHolder: ''
}, o || {});
//init
this.init = function() {
//getting height of element even if it's hidden initially
$(element).clone().attr('id', 'sliderTempXXX').css({'position': 'absolute', 'top': 0, 'width': s.width, 'visibility': 'hidden'}).appendTo('body');
s.heightContent = $('#sliderTempXXX').height();
$('#sliderTempXXX').remove();
//alert(s.heightContent + 'xxx' + s.height);
if (s.heightContent > s.height) {
$(element).append('<div class="content-slider">content slider</div>')
.wrapInner('<div class="content-holder">')
.wrapInner('<div class="content-scroll">');
$(element).height(s.height).css({'padding-right': '22px', 'position': 'relative'})
s.elSlider = $(element).find('.content-slider').height(s.height).css({'position': 'absolute', 'right':'2px', 'top':0, 'text-indent':'-9999px'});
s.elScroll = $(element).find('.content-scroll').height(s.height).css({'overflow': 'hidden'});
s.elHolder = $(element).find('.content-holder').height(s.heightContent);
//alert($(element).html());
function handleSliderChange(e, ui)
{
var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();
$(s.elScroll).animate({scrollTop:
(100-ui.value) * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();
$(s.elScroll).attr({scrollTop:
(100-ui.value) * (maxScroll / 100) });
}
$(s.elSlider).slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
orientation: 'vertical',
value: 100
});
}
}
};
$.fn.sliderVertical = function(o)
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('sliderVertical')) return;
// pass options to plugin constructor
var sliderVertical = new SliderVertical(this, o);
sliderVertical.init();
// Store plugin object in this element's data
element.data('sliderVertical', sliderVertical);
});
};
})(jQuery);
06/06/2010 - 00:50
Hi to all and thanks for the great code. I have one problem and can't fix it. The slider dosn't work when I use it with an ipad or iphone. Have you got an idea how to fix it?
07/14/2010 - 18:04
First thank you for the code.
Is there any way to get the div scrolling whith mouse wheel also? I mean both the slider and the mouse wheel being oprable.
Rodre
07/18/2010 - 11:04
Hi,
Is there a way to add two extra buttons for back/next?
Thank you.
07/19/2010 - 11:40
Yeah sure, I think am going to work up a updated tutorial with some additional features like this. I will let everyone know when this is done.
08/02/2010 - 03:58
Great, I'm really looking forward to have this feature soon.
08/02/2010 - 03:53
Thanks a lot for great tut. One thing.....
How can I load the selected panel (not the first panel) at the load. I mean I want to start from second panel when loading for fist time. and the slider also should be at appropriate position.
Thanks in advance for any help and really sorry if I had asked a stupid question.
08/20/2010 - 22:23
Great tutorial, this was a nice start for what I needed. I didn't want to have to alter the jQueryUI source to have a smooth scrolling div when clicking on the slider bar, so here's the modification I made:
$(".type-cat-slider").slider({
animate: true,
start: checkType,
slide: doSlide,
max: 750
});
function checkType(e){
type = $(e.originalEvent.target).hasClass("ui-slider-handle") ? 'drag' : 'click';
}
function doSlide(e, ui){
var parent = $(e.target).prev(".type-cat-scroll"),
maxScroll = parent.attr("scrollWidth") - parent.width();
if (type == 'drag')
$(e.target).prev(".type-cat-scroll").attr({scrollLeft: ui.value * (maxScroll / 750) });
else
$(e.target).prev(".type-cat-scroll").animate({scrollLeft: ui.value * (maxScroll / 750) }, 400);
}
I use the 'start' event to determine whether the handle was clicked or not, which tells you if it's a handle drag or a click. Then, in the slide handler I specify whether to animate the scroll based on which type it is.
Also with using '$(e.target).prev(".type-cat-scroll")' I can use this code on multiple sliders on the page without needing them to have unique IDs.
Example of the code correctly handling clicks vs. drags:
http://i.imgur.com/Uks6O.gif
Thanks again!
#### EDIT ####
Adjusted code to fix a cross-browser problem. This solution works properly in IE, FF, Chrome, Opera and Safari.