Start structure of my html
<div class="parent">
<div class="child"></div>
<div class="parent__content">
<p>Some text...</p>
<p>Some text...</p>
</div>
</div>
Follow this simple example for see the css code: https://codepen.io/SarioDesign/pen/jYZZEb
Only on iOS mobile device, when scroll the '.child' element have a 'shake' effect.
I can't fix that, has anyone had the same problem?
Related
I am using jquery mobile and wanted a overlay in to be visible when ever i need. I have this at first in my html
<body>
<div id="overlay"></div>
</body>
(if you are wondering about other pages then they are added afterwards)
but when jquery mobile 1.4.2 initializes it turns my div in to a page like so:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 640px;">
<div id="overlay">
</div>
</div>
How can i make Jquery not touch this element?
Let me guess you are using it to show a splash screen.
jQuery Mobile requires at least one page to exist during initialization.
To solve this problem add one dummy jQuery Mobile page and just set it CSS to display: none; something like this:
<body>
<div id="overlay"></div>
<div data-role="page" style="display: none;">
<div/>
</body>
I seems it only does it if there are no pages initially in the body. but if you add a blank page every works fine:
<div data-role="page"></div>
I have got a jQueryMobile page that adds some white space after the content. How do I remove it? I know I have not got a footer in the page, is that the reason? Any advice much appreciated.
<div data-role="page" id="home">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<div class="message"></div>
<a data-role="none" href="" id="btn_loginEmail" class="button"></a>
<a data-role="none" href="" id="btn_loginFacebook" class="button"></a>
</div>
</div>
What do you mean white space??
I've tried your page and it works just fine
Check out this fiddle
You mean the space between header bar and first element inside content (in above case the button)?
Then you can do style as below
.ui-content{
margin-top: -23px;
}
Check out this fiddle
if u are using jqm 1.2.0. In min.css, change min-height to 400px in ui-page{min-height:420px}. Hope it works for you!!
I am using the bootstrap accordion (collapse) in my project, but unfortunately the result is not the desire one. I have around 8 items in the accordion, some of them having lot of text inside (sometimes more than half a page).
I am trying to collapse/expand items in accordion, but the behavior is totally strange and unpredictable. I just copied the example on their site and added more items.
My expectations was that each time I click on a closed item it will open and the open div will receive focus. Sometimes I see page scrolling very fast and focus is positioned in a wrong place or item is opened but focus is too low on the page and title is not visible.
Any idea on how to handle accordion properly or what's the correct behavior ?
Here's a working example http://jsfiddle.net/panchroma/RdK8t/
It's taken directly from the bootstrap example with extended content added to one of the elements.
The typical code is:
<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->
<!-- start typical content group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
content
</div>
</div>
</div>
<!-- end typical content group -->
</div> <!-- end accordionParent wrap -->
You could validate your page to ensure there isn't a nesting problem, and double check that if your aren't using the full bootstrap js file, make sure you are including the transitions plugin.
Hope this helps!
I would like to add a button to our Jquery Mobile webapp. I added a screenshot from the FourSquare App which show the upperright 'checkin' button and icon, we would love to implement in our HEADER..
http://www.iclarified.com/images/news/26011/99138/99138.png
We can;t figure out how to imlement this. We now the Navbar is able to get us a button style like the FSQ button, but we would ONLY have one of this button's in our Header, aligned right.
Has anybody already designed something like this and could help us?
Yes it can be done, here is a quick example:
<body>
<div data-role="page">
<div data-role="header">
<h1>Foursquare Like</h1>
Checkin
</div>
<div data-role="content">
<p>This is a test page</p>
</div>
</div>
</body>
See more here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-headers.html
jsFiddle Example: http://jsfiddle.net/Twisty/xWzFt/
I am trying to use iScroll for my webpage and it is behaving weird.
My markup looks something like this.
<div id="content">
<div id="some-header">
</div>
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
</div>
Now both header and wrapper have heights and they both are positioned absolute.
when I try to scroll, it does scroll but its kind of stuck, when I stop scrolling it returns back to the starting point. Weird :(
Any Sugestions.
btw this is on ipad safari.
Thanks
Dhaval
I met the same problem with you.Did you use ajax the render in the scroller element.
Finally I use iscroll pull to refresh to solve this problem.
This is the question I asked : When I am using ajax to render the Scroller part iScroll doesn't work