I currently have a carousel using Twitter's bootstrap on my website. I'm controlling which divs to slide in based off this javascript, which works perfect in Chrome, Safari, FF, etc. But I'm having issues with it in IE 9 and lower.
<script type="text/javascript">
$('.carbtn').click(function(q){
q.preventDefault();
targetSlide = $(this).attr('data-to')-1;
$('#myCarousel').carousel(targetSlide);
});
</script>
The buttons to control the carousel look like this,
<div class="carbtn" data-to="2">Learn More</div>
In IE, only the first click is registered. Rather than sliding in, the new div just shows up. Any other clicks on .carbtn buttons don't change anything. Is there a fix to get this to work in IE?
As Jako said in his comment, adding the slide class to the carousel div seems to fix this problem.
<div id="myCarousel" class="carousel slide">
So before 2.1, including 'slide' is required for IE8 to run.
After 2.1, including 'slide' will allow IE8 to have slide effect. But without 'slide' it will still work, just without transition.
Related
Weirdest thing, using JQuery Mobile 1.2.0. When a user travels to a page with a collapsible, clicking anywhere inside that collapsible div except on buttons adds ui-mobile-viewport-transitioning viewport-slidefade to the body, which is freezing the pane and hiding the scroll bar, and snapping the view to the top of the page. Before click :
<body class="ui-mobile-viewport ui-overlay-c">
After clicking inside a collapsible (Not anywhere else):
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-slidefade">
If I f5 and reload the page, it doesn't do this anymore. Only after following a link.
Example of a link that leads to the page :
<a href="ax_mer_view.cfm?MERID=XXX" class="ui-link-inherit">
<h3>Info here
</a>
This is happening on every single page across our entire mobile application, no matter the browser. iOS, Android, Chrome on PC, Firefox on PC, etc.
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I have a strange problem with jQuery Mobile page transitions.
Demo can be found here:
http://www.dev.theorie24.ch/mobile_index.php
If you click on "ANMELDEN" the new page gets loaded, but without the background gradient and some other styles missing.
After refreshing the new page, it looks fine. But then, if you go back (browser back button or arrow to the left on top), the first page gets displayed with some styles messed up.
What is happening here? How can I enforce the correct display of the whole page after the transition?
EDIT:
After the page transition, this is how the DOM looks like:
The body-tag actually closes much too early. This can't be right. Is that a bug in jQuery Mobile?
Thanks a lot!
Chris
I think the problem is that in your second html file data-role attribute applied to the body.
Try to wrap the content with div element with data-role="page", like so:
<html>
...
<body>
<div data-role="page">
<!-- content -->
</div>
</body>
</html>
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.