Jquery slider 100% height

Question

I'm trying to set a vertical jquery slider to 100% height of a container div. How can I do this? I've tried changing the parameter height: 400 to height:"100%" but that just stretches the page to the height of the entire slider content. The goal is to have a flexible page with no scroll bars on the side

$(document).ready(function() {
    $('#my-list').hoverscroll();

});

// Override default parameters onload
$.fn.hoverscroll.params = $.extend($.fn.hoverscroll.params, {
    vertical: true,
    width: 221,
    height: 400,
    arrows: false
});

yes, it breaks the containing div container even with overflow:none and stretches the slider to the point that it doesn't slide because all content is exposed. Hope that makes sense — LPAOriginal, Jul 09 '12 at 02:48
What's the name of the element you want to match the height of? — Ohgodwhy, Jul 09 '12 at 02:50
is the first surrounding container that is set to 100%. If the slider is 100% it should align to that? surrounding that is a
that is set to 100% as well... — LPAOriginal, Jul 09 '12 at 02:53
'my-list' can't be the element you want to match the height of, as that's going to be the container you *want to set the height of*, looks like you want to replace `$('container-div')` with `$('.nav')` in my answer. — Ohgodwhy, Jul 09 '12 at 02:55

score 1 · Answer 1 · answered Jul 09 '12 at 02:53

1

There's no need to extend the plugin. Hoverscroll accepts parameters in the form of an object.

$('#my-list').hoverscroll({
  vertical: true,
  width: 221,
  height: $('container-div').height(),
  arrows:false
});

Replace container-div with the element that you wish to reference the height of.

answered Jul 09 '12 at 02:53

Ohgodwhy

49,779
11
80
110

The slider is still stretching past the container div? – LPAOriginal Jul 09 '12 at 03:01
@LPAOriginal I'm trying to replicate your issue so I can get an idea of the design flaw you have. [Does this mimic the problem you're having?](http://jsfiddle.net/Txdmp/) – Ohgodwhy Jul 09 '12 at 03:17
this might be the same thing you made but it's really close to what it looks like in dreamweaver. http://jsfiddle.net/LPAOriginal/SYA8G/2/ pretend that the red container (nav) is set to 100% but the slider keeps overflowing it. Therefor the slider is not functioning properly. – LPAOriginal Jul 09 '12 at 03:40
The best way to understand this is by getting this slider http://rascarlito.free.fr/hoverscroll/ to scale to 100% height. I don't think my site in particular has anything to do with it not working. – LPAOriginal Jul 09 '12 at 03:49
@LPAOriginal http://jsfiddle.net/SYA8G/3/. 100% height is going to be respective to the `visible DOM at time of page load`, or, `the height of the first parent element with a position`; whichever comes first. So..in your case, if you need to make it so that the page never has scrollbars, you will set the `width/height` of the html document to 100% / 100%, then the `width/height` of the body to `inherit` with `overflow:hidden`, then give a height on the container, match the height of that div in the hoverscroll paramters, [just like I've done in this jsfiddle](http://jsfiddle.net/SYA8G/3/) – Ohgodwhy Jul 09 '12 at 03:58
uggg that's perfect but I can't get it to work! started over from nothing 3 times and i – LPAOriginal Jul 09 '12 at 04:53
@LPAOriginal I'm sorry that this is so frustrating -- sometimes it's difficult to clearly envision what someone needs and tailor a complicated response to them. Is there anyway I could see the production site you're attempting to accomplish this on, so I can better assist you? Sorry again. – Ohgodwhy Jul 09 '12 at 04:55
k so I have it working perfectly but every time I set the container element to a percent rather than a set px height the slider becomes unresponsive... I need the slider to be 100% height no matter what the users window dimensions are. – LPAOriginal Jul 09 '12 at 07:27
any more advice on setting the slider to 100%? – LPAOriginal Jul 10 '12 at 05:30

Jquery slider 100% height

1 Answers1