I've already managed to succeed in doing the same task with the horizontal scrollbar visible when resizing the window (as you can see at click here #1) but now I want to avoid this undesidered behaviour. I thought to replace the "left" property with "background-position:" in the css and in the js file, but the animation doesn't work at all.... has anyone a clue?
Here is my last version: click here #2
You need to put the animating elements inside a div container that has the CSS property overflow:hidden
Related
I have 2 nested DIVs, with the inner one having images of fixed height (but arbitrary width) aligned one near each other horizontally.
I want to use jScrollpane so that there is horizontal scrollbar to display the images outside the viewport of the div. The list of images is not known beforehand, it will come dynamically from a CMS, so I cannot hardcode the width of the internal DIV in the CSS.
When I harcode the width of the internal div the horizontal scrollbar works fine. However, the moment I remove it the horizontal scrollbar disappears, even though the DIV has display:inline-block and I checked through Chrome's element inspector that its width is in fact expanding.
I also noticed that when I pass the autoReinitialise: true property to the jscrollpane, the horizontal scrollbars appear after a few seconds. But it seems this slows everything down because it keeps checking every few seconds.
What is the right way to make the jScrollpane realise that the internal div is larger than the outer scrollable div?
I have created a JSFiddle here: http://jsfiddle.net/793CB/1/
I have put a comment in the CSS (last line) which shows the fixed width, and if removed demonstrates the problem.
The images aren't loaded yet when you initialize the scroller, so the width isn't available.
This seems to fix it: http://jsfiddle.net/793CB/3/
$(window).load(function () {
$('#scroller').jScrollPane();
});
... on $(document).ready(), DOM is loaded, but images may still be in progress
I'm using tinyscrollbar to show a nice scrollbar.
Part of my content is hidden (display:none), and only shown after a button is clicked, in a slideDown()/slideToggle() animation.
When I reveal the extra content, the scrollbar does not update, and part of the content is now unreachable. Is there a solution that updates smoothly with the animation?
FYI, here is a non-smooth solution (just call .tinyscrollbar() again after the animation finishes):
$(".toggler").slideToggle().promise().then(function(){
$("#scrollbar").tinyscrollbar()
});
Use the the tinyscrollbar_update() method. Thats a lot cleaner then initializing the scrollbar again.
$(".toggler").slideToggle().promise().then(function(){
$('#scrollbar').tinyscrollbar_update();
});
Maybe use 'relative'
$('#scrollbar').tinyscrollbar_update();
There will be no need to animate scrollbar after toggle content. This solution has helped in my issue.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.
I'm trying to create a flyout menu that has scrolling build in if its larger than the screen. I can't seem to figure out how to do this with the native overflow-y scrolling properties. Everytime I seem to set that overflow-y:auto then the the menu that flys out is nested within the parent div with a scroll bar.
Anyone has any ideas?
Thanks!
This is not a solution of mine, but you can try this.. it has a really nice effect and serves your purpose:
http://css-tricks.com/examples/LongDropdowns//
you should set the max-height proparty for the div otherwise it cant tell (since it is sort of absolutely positioned) where to stop, or u can set the height for older browsers, or you can javascript it, change height dynamically until it reaches a maximum