When using swipe to slide pages, e.g.
// swipe right event (currentpage is pseudo code)
$("body").pagecontainer("change", "#page" + currentpage - 1, { transition: "slide", reverse: true });
// swipe left event
$("body").pagecontainer("change", "#page" + currentpage + 1, { transition: "slide" });
I get this effect: on swipe right, the current page disappears immediately and the previous page slides in from the left. On swipe left, the current page slides out to the left and then the next page appears immediately.
What I want is that the old page slides out and the new page slides in simultaneously, like in Omar's example: http://jsfiddle.net/Palestinian/L297j/
I tried $.mobile.changePage instead of the newer $("body").pagecontainer("change") but that makes no difference. I made sure that the slide target pages do exist ahead of the slide (the pages are created dynamically) and I also added another call to the page constructor before setting up the swipe.
"flip" transition looks perfectly fine in the same place, probably because there are never two pages visible at the same time? I have no clue and I am hoping that someone knows more "slide" pitfalls.
Sorry it took a while to recreate the problem and the fiddle became rather lengthy:
http://jsfiddle.net/timvdh/eFDLr/7/
I am using a static panel in this example:
<div data-role="panel" id="select-panel" data-position="left" data-display="overlay" data-theme="a" data-bind="jQM: true">
<div data-role="header" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">Optionen</h1>
</div>
</div>
The
data-bind="jQM: true"
binding essentially executes
$("#select-panel").trigger("create");
This has to be done since the static panels (panels outside of pages available for every page) do not get enhanced by jQM otherwise.
However, in this special case everything seems to work fine, but the slide becomes ugly as described in the question.
The simple workaround is the remove
data-role="header"
from the header. You can try it in the fiddle and the slide will work fine.
Related
I'm using jquery mobile 1.4.5. In some instances, I generate a pop-up when a user clicks a link and fill that popup with the results of an ajax call. The generated code taken from firebug after the ajax call returns looks like:
<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
...content...
</div>
</div>
</div>
The popup is showing up fine. I'd say 90% of the time, when i click the close button, the popup closes. However, 10% of the time it just sits there. Usually it'll highlight the close button as blue, indicating it is active or something but the window itself stays open. If I click around in the popup box a few times and keep trying, it will eventually close, but it is extremely frustrating and user unfriendly.
I'm not sure why it doesn't work that small fraction of the time? I've included a screenshot of what the modal looks like. I don't know if the parent div (the blue outline) is somehow covering half of the button and so that is catching the clicks sometimes?
any thoughts as to what is going on here? I've only been able to try in android/chrome and not an iphone, so i don't know if it is browser specific.
Thanks!
edit: adding javascript code that parses ajax response and generates window. NOTE: i know i'm putting everything in the header div right now (for padding purposes), however I don't think that's causing the issue. I stripped out a lot of the contents of the window for brevity.
function showPopup(jsonResponse){
// parse json response
var obj = jQuery.parseJSON( jsonResponse );
// close button
var closeBtn = $('Close').button();
// start to construct window contents from response
var content = "<div data-role=\"header\" data-theme=\"a\">";
content += '<table border="0" style="width:100%"><tr>';
content += '<td style="vertical-align:top;">';
content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
content += '</td></tr></table>';
// close header div
content += '</div>';
// Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
var popup = $("<div/>", {
"id": "detailsPopup",
"data-role": "popup",
"class": "ui-content"
}).css({
"width": $(window).width() / 1.3 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("#detailsPopup").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
//x: 150,
//y: 200
});
}).popup({
"dismissible": false,
"history": false,
"theme": "a",
"overlayTheme": "b",
"class" : "ui-content"
}).popup("open");
} // end showPopup
ok, so i finally figured it out. was 100% my fault (as expected). i was overriding some default JQM css, and of course it caused the error. on another part of the page i had to try to fit 3 buttons on the same row, and had used the following to do it.
.ui-btn{
font-size:12px;
}
(originally: 1em)
That shrunk the buttons enough to fit that other requirement, but that also caused the close button to not show properly (as you can see below it was missing the outer border). Thus, I'm guessing it was just a weird offset/padding/etc error caused by the differing font-size that was the reason behind the clicks not registering or being handled properly.
(insert advice to never override jqm css)
thanks!
Using Jquery-mobile, the following (abbreviated here) footer
<div data-role="footer">
<a href="#table" data-role="button" data-icon="plus"
data-iconpos="left" class="ui-btn-left">Open</a>
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a>
</div>
that exist in a popup, when popped-up, its buttons
are displayed outside the popup-frame, aligned under it.
Why? What am I doing wrong?
The full example is in http://jsfiddle.net/yotam/d0aqmx6m/
I'm beginning to wonder if button footers are not supported in popups. Or at least, not fully supported. From the docs, you need to throw a "ui-title" in there too - it's what will give the footer height (The docs show a span after the button definitions).
I've done that here:
<div data-role="footer">
Open
Close
<span class="ui-title"></span>
</div>
See: http://jsfiddle.net/had4or71/
Of course, it only partially solves your problem, as though they are now in the footer, they don't yet look good. I tried with a navbar in the footer with similarly disappointing results (the navbar was well positioned top, bottom, and left, but ran over the right border pretty badly.
Finally, I did this version real quick as well:
http://jsfiddle.net/ph0e54ee/2/
Which shows pushing the close button into the header like the demos site does, and just presenting your open button inline as a standard button - alas, it's a compromise, and not what you asked for.
On further investigation, it would appear the "ui-btn-left" and "ui-btn-right" classes are not supported in the footer, see:
gh:6331
gh:6872
gh:6137 (comment)
Again, I messed about with the CSS a bit, and managed to get something sort of nice, at least on my test browser of chrome. I suspect your mileage will vary greatly outside of chrome.: http://jsfiddle.net/9crnjakr/
i have two separate pages, index.html and profile.html, and i want to href index.html to profile.html with slide animation so i tried,
$.mobile.changePage("/profile.html" , {
transition: "slideUp",
reloadPage: true });
in index.html. i guess this code does not execute or say update head of profile.html and some how reloadPage not working, it is just targeting body tag. is something wrong or how can i reload whole profile page with slide animation?
you are not loading a page "with slide animation". The slide animation is a CSS effect you can add to any div element you want by adding the class(es) JQM is using (try slide in).
So when JQM is loading a page it fetches the content of the first <div data-role="page"> it finds on the page and "throws away" everything else.
The new "page" is then positioned using CSS depending on the transition you set, so normally pos:absolute; top:0; right: screen-width. Then the classes are added and the page slides in.
Since JQM does not parse anything outside of the page, your profile <head> is disregarded. To fix, all scripts should be available on all pages, because you never know where the user starts and you need to make sure everything you need is on board.
I have a jQuery Mobile (1.0.1) page with a fixed footer:
<footer data-role="footer" data-position="fixed">
Click Me!
</footer>
When I add elements to the DOM, the footer bar (which obviously shouldn't move) scrolls off the bottom of the screen - in accordance with the height of the elements added to the DOM. There's also white background between the previous end of the (grey) page and the new position of the footer bar.
If I scroll down and back up, the formatting is corrected.
I'm using Chrome, but it also occurs in Mobile Safari and IE.
The code that adds elements to the DOM is:
$("footer a").click(function () {
$("div[data-role='content']").append($("<button>Button A</button>"), $("<button>Button B</button>"), $("<button>Button C</button>"), $("<button>Button D</button>"));
$("div[data-role='content']").trigger("create");
});
What am I missing?
Have you tried calling the JQM updatelayout event?
See this page for some more info.
Try something like this:
$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.