I'm currently using JQM1.3 with iscrollview and was wondering how I would go about fixing this issue I have when I put an iscrollview inside another iscrollview.
My HTML goes something along the lines of:
<div data-iscroll="">
<!-- some content goes here -->
<div data-iscroll="">
<!-- more content goes here -->
</div>
</div>
The problem I have is when scrolling down everything looks good but if I scroll up; both div will scroll up. Is there anyway that I can stop the outer div from scrolling until the inner div is at the top?
I don't even know where to begin doing something like this so I was hoping for some pointers as to where to begin/look for info?
Please and thank you.
Related
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
I have created an app using phonegap, jquery mobile and iscroll with 3 scrolling divs, the first 2 scroll vertically and I am trying to get the third scrolling horizontally, but am having problems. The horizontal is working, as in letting me scroll to the right of the div, however, when i try to scroll further, the div jumps back to the start. I am hoping someone has encountered something similar and has a solution.
My code looks like this;
var myScroll, myScroll2, myScroll3;
$(".scrollArea").live("pageshow", function() {
setTimeout(function(){myScroll = new iScroll('wrapper', {vScroll:true, hScroll:false});},0);
setTmeout(function(){myScroll2 = new iScroll('wrapper2', {vScroll:true, hScroll:false});},0);
setTimeout(function(){myScroll3 = new iScroll('wrapper3', {vScroll:false, hScroll:true});},0);
});
<div data-role="content">
<div id="wrapper3">
stuff here...
</div>
I have set the width of the wrapper to 1500px to test the scrolling, but this jumping error is driving me mad. Any help would be greatly appreciated.
please use jq.scroll.js from github it works for me.
https://github.com/appMobi/jQ.Mobi/tree/master/plugins
I've got a jquery accordion on site BUT it kinda doesn't work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it kinda stucks with all sections closed! When I reload the page this loop starts from the beginning. Here is the link to the site, click on "Pakalpojumi" to see that accordion.
Here is the html of accordion:
<div id="accord">
<h3><a id="gr" href="#">Griezšana</a></h3>
<div>
<p>
max griešanas garums: 2500mm </br>max loksnes biezums: 4mm
</p>
</div>
<h3><a id="ur" href="#">Urbšana</a></h3>
<div>
<p>
Mēs piedāvājam 3 dažādu veidu stacionārie urbji
</p>
</div>
<h3><a id="lo" href="#">Locīšna</a></h3>
<div>
<p>
max loksens garums: 2000mm, </br>max spiešanas spēks: 65 t
</p>
</div></div>
Adding accordion to accord:
$('#accord').accordion();
Does anyone have any idea of what could be wrong?
The code works fine by itself, see here. On closer inspection of your site, there is a style which is placed on the active div each time the header is clicked (I'm using chrome, it appears as element.style in its css properties) which sets the height, padding-top and padding-bottom to 0px. If I disable those styles, the selected div appears fine. Do you happen to be adding these styles on every click?
Edit
Ok, I found your problem... Does the second tab here look familiar? According to this post it's because when you initialise your accordion, its parent element is hidden (via your 'off' class). So you can get around this issue by defining a height for your divs after initialising your accordian like so:
$('#accordion').accordion();
$('#accordion >div').css('height', '300');
... or by by initialising your accordion once its parent is shown.