I have this example:
jsfiddle.net/6mNpp/
Is it possible, to prevent the scrolling of the left menu, when it is open and the whole site is scrolling? I mean, when I open the left menu and scroll the content, then the left menu is scrolling as well. How to make them with independent scrolling?
Thanks
Nik
You can set the panel fixed with CSS. With this, the left panel is not scrolling when the content is scrolling.
The code is the same that the JSFiddle, just add in the style, position:fixed
<div data-role="panel" id="defaultpanel" data-display="push" data-theme="b" style="overflow:auto; position: fixed;" data-animate="false">
Reference: Positioning Panels
More info...
JqueryMobile roadmap http://jquerymobile.com/roadmap/ says independent scolling should arrive in version 1.7
Another possible hack workaround maybe adding the divs via an iframe may offer a clumsy solution.
Related
I'm using the "Setlist" theme on Big Cartel and I'm not sure how to enable the flickity arrows but I see it in the code at the bottom talking about a button
The reason I want the arrow/buttons is because on mobile the swipe motion is pretty buggy. You can check it out on my site shop.bbedits.com. It's either I fix the carousel or I disable vertical scrolling which I don't think is possible to do, only affecting the landing page.
I am trying to use jQuery Ui to drag an overflowing child div, this div does drag but further than I like. I only want it to drag the scroll-able amount.
Hopefully this codepen will show you want I mean -
http://codepen.io/seanjacob/pen/RKKEyO
$(".box").draggable({axis: "x"});
All widths will be responsive. It doesn't have to be a jQuery Ui solution.
This is exactly what I was looking for -
http://qnimate.com/javascript-scroll-by-dragging/
github: https://github.com/asvd/dragscroll
It just drags the scrollbar, nothing more or less and is responsive.
I am using jquerymobile framework and i would like to stop scrolling conent while panel (menu) is open.
on this page: http://api.jquerymobile.com/panel/#option-positionFixed
it says how to position it to fixed, however you can still scroll down.
many thanks
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
The default behavior in jquerymobile when I have header, content and footer (where header/footer are fixed) is that when I scroll the content the header/footer show/hide. I mean when you start scrolling the header/footer hides and when u stop scrolling the header/footer are shown again. On devices its looks very bad/none-user friendly. I want to avoid this show/hide effects of header/footer. Is there any thing thats available in jquerymobile or some of its plugin to avoid it? If nothing then I want to apply iScroll on the content. Can someone guide me how to make data-role="content" using full-screen height?
If this is what you are referring to, then you can just remove the data-position: fixed from the headers and footers. I tried it on the iPhone, and it is still buggy (seems to flicker whenever a touch event it generated, even if it is not necessary).