on http://2fb.me (feel free to demo the App) I'm using skrollr and implemented a slider based on http://jsfiddle.net/GpPHx/2/
As you can see on the webpage, the slider scrolls left and right smoothly but it also scrolls the page vertically when it doesn't need to.
How do I stop this behavior and only let it scroll left to right with the mouse-wheel and up and down and then left to right when needed because of screen resolution?
<div class="scrollcontainer" id="skrollr-body"
data-0="left:0px;"
data-250="left:-730px;"
>(box divs)</div>
Related
I have growing content in ScrollPane. When content reaches bottom ages of ScrollPane, vertical scrollbar appears. At that time all content is being pushed to the left side by width of scrollbar. It's not much, but not pleasant for eye and ruins smooth user experience. Is there a way to prevent scrollbar from interfering with content? Maybe by positioning it outside of ScrollPane or specifying not to move content?
With blue line I showed by how much content is getting pushed to the left:
I'm trying to implement an Off Canvas layout and I'm stuck (have spent half the day trying to figure this out). I basically want to use this off canvas layout from bradfrost Right Side Off-Canvas responsive pattern
What I want is:
On mobile the left and the right content should each be 100% width. The left content should be the one that is displayed by default and you click on a button to slide in the right content.
On desktop the left content should be set to 300px width and the right content should fit the rest of the width.
It seems like in the above code example, the width on desktop is set on the right content and the left content just fits the rest of the width. I basically want the opposite of that on desktop (left content fixed width, right side fits rest of width).
Another version of the code FOUND HERE is also similar (and might be easier to edit) but the problem is that the right content is what's displayed by default on mobile view. I need the left to be displayed by default on mobile view.
Any help with this would be greatly appreciated. Thanks in advance.
Is it what you want?
demo
Animating top/left really sucks on mobile devices. You should use css transform instead.
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
I have a fixed position side tab on my page that contains filtering options for the user. When there are a lot of options, the side tab gets too long and the bottom goes beyond the bottom of the page, where it is impossible to view.
Is there a way to have the whole page continue scrolling to the bottom of the side tab div? I don't want to put scroll bars inside my side tab div, even though that would be an easy fix. I just want, when the bottom of my div butts against the bottom of the page, to bring the whole div up with it so that the bottom content is visible.
I am limited in that I can't use jQuery in this particular application. I can, however, use Dojo.
I am developing a website where the menu it should be the end of the page. Besides the menu, another div with two images should also sit at the bottom of the page.
Follow the link to the complete source code of the page;
In red, the menu should be aligned at the bottom of the page, aligned to the center of div#leftcontent.
In the div#blue social-networks must be aligned at the bottom of the page, aligned to the center of the div#nav.
When I say bottom, I mean right at the end of the page.
If you mean not statically positioned, but just naturally occurring at the bottom of the page even when the sidebar content causes the page to exceed beyond the main content under which the bottom nav occurs, then you are out of luck using divs. This is one of CSS 2.1's major shortcomings.
You are left with two options:
Use a table for the basic layout
Use javascript to dynamically position the div based on the length of the sidebar
It's up to which you want to choose, but the javascript option will not work for people with javascript disabled, such as older mobile browsers.