I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.
It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.
I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post
Related
I'm creating photo slides using simple scrollbar method but also adding js for left and right button to make it flexible to view slide horizontally.
Scrollbar is working just perfect but the bellow buttons doesn't seem to show any action. Can someone please guide me what's wrong in the coding? TIA
Here's what I am talking about: [https://jsfiddle.net/sh27dyx3/1/]
scrollbar doesn't set $("#slide").left. jQuery's offset().left is just clever enough to tell you what is its offset. you need to update the parent's scrollbal scrollLeft property
https://jsfiddle.net/txth2usk/
by the way, i guess you could determine what image is at the leftmost position and then instead of -100 and +100 you could scroll to the next/previous sibling's offset, would be much cooler
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you
Helo to all, i have been searching all over the web for some jquery or javascript tutorial or plugin for a horizontal scrollbar and i have found many of plugin asnd tutorial but not the one i want.
Now im using tinyscroll and i have found it has alot of bugs, can somebody help me with the next effects.
Mouseover: At mouseover at the right or left it scrolls by itself.
Shadow at hiding: When a image hides at the left or right a shadow effect that gives a "it got in the bottom of this layer" effect.
Scrollbar: simple bar that has a 80% opacity
mouse scroll: that mouse scroll can be used with it.
I need something like the movie scroller in this page:
Cuevana.tv
And i know html and css but css -webkit styling can't do this effects.
I really dont have any codes to start with, please help.
Try this one.
It has the horizontal scrollbar and the mouse scroll works.
With css you could get it to look exactly like the one in the link you posted. (positioning the left and right carets up by the image container and etc...)
I'm quoting a good SOF answer here: jquery horizontal scroll
Try hoverscroll jQuery plug-in - http://rascarlito.free.fr/hoverscroll/
Also try Smooth Div Scroll - http://www.smoothdivscroll.com/demo.html
I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).
Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.
The following demo will show you basically what I am doing as well as my problem:
http://jsfiddle.net/mstefanko/e38bE/67/
I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.
Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.
Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.
Any help is appreciated, thanks!
Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:
Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
Set the overflow value and get rid of the resizer entirely
Give container a css height value of auto or scroll (if size is not an issue)
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.