Does anyone out there have a good example of a vertical content rotator in jQuery or Javascript? Especially ones with navigation arrows and thumbnails?
Most that I've seen are horizontal.
jCarousel will do this for you. Here's an example showing the vertical functionality (with arrows).
I'll make a suggestion for you. Create a div with a defined height and overflow set to hidden. Create another div inside the defined height div and place your content with it. Using the animate function of jquery, animate the child div upwards with marginTop or top with relative positioning. Use some creativity to make it pretty or dynamically load content.
If you really need a script i'll make one for you. But you can just get any horizontal carusel and change the left/right attributes with top/bottom (the ones in animation). Also jCarousel is a good example. (the one Andrew suggested).
Related
I am trying to create a skewed div with scrolling content inside of it.
You can take a look at my code here:
http://jsfiddle.net/kDv45/1/
Originally I had it hidden by placing the content inside of a smaller div, but the skewing made the scrollbar visible again.
If I set the css overflow as hidden, it hides the scrollbar but it is no longer able to scroll. Can you guys think of a workaround for this problem?
I suggest you to use overflow : hidden on both x and y. And use JavaScript events for scrolling.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance
I have three divs
page-left
page-right
flipper
I have images of equal size in all three divs. I hide the image in flipper div when the document is ready. When I press the animate I use jQuery's animate function to reveal the div. The problem is I want to div the be revealed from right to left and not left to right as show in the fiddle.
http://jsfiddle.net/UZWmd/38/
I had solved the problem of revealing from right to left using a single image. But I cannot figure out how to do it in the current scheme of things.
http://jsfiddle.net/UZWmd/38/
Can someone help
If you want that effect then you will have to go the opposite way. You're gonna need to hide the top div, instead of revealing (showing) the bottom div. Take a look at this modified version of your fiddle.
Like this? http://jsfiddle.net/UZWmd/47/
Look here:
How can I animate the opposite way?
Manipulating the margin-left and width on animate seems to do the trick.
How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.
Example: or a similar effect
I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.
Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.
I think you mean Draggable elements, you can use jQuery User Interface:
http://jqueryui.com/demos/draggable/