I need to create the "Facebook iPad" look and feel using jQueryMobile.
I have a little question:
How to "stack" a page over the current page of my app from right to left?
(I need to mimic the same effect, when you want to reach an user page, means, the new page "overlays" the current one.. and so so..
if I click (or tap) to a link from the "stacked" page, I want a new one comes from right to left and "cover" the last staked page...
If close the latest inserted page, I want an slide effect from right to left and (destroy the closed page)
Any help?
Regards
U just need jquery-mobile transition effect & open the new page via AJAX technique-
<a href="newPage.html" data-transition="slide" >It will Slide</a>
U can put rel="external" or data-ajax="false" - to open as full page reload, without AJAX
Related
SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
I have an MVC4 mobile project that I want to add a desktop (non mobile) page to for some users.
I have added a new desktop master page and assigned my view to use it.
The first time I navigate to the page it renders using jquerymobile which appears to somehow be cached from the previous screen.
If I hit F5 to refresh the page it displays using the assigned desktop masterpage correctly.
Can anyone tell me how to fix this? Any insight appreciated
I'm still not sure the cause of this but found a work around.
Instead of creating the button to link to the next screen like this:
View Pots Orders
I changed it to be:
<a href="#" onclick="window.location.href='#Url.Action("ReviewTeamOrders", "Team")'" data-theme="b" data-role="button" >View Pots Orders</a>
Seems to do the trick!
I'm using CSS for a dropdown menu on a site I'm building. When you hover over a parent tab, the dropdown menu fades in using CSS3's transition-property. The problem I'm having is the parent tab links off to another page, so when you tap a parent tab on the iPad, it takes you to the page instead of displaying the dropdown menu - which causes usability issues.
Is there a way to make it so the dropdown appears on the first tap, and the second tap takes you to the parent page?
Here's the HTML I'm using to display the menu:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team
<ul>
<li>Our Workers</li>
<li>Join Us</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
And here's a jsFiddle link: http://jsfiddle.net/A64QU/197/
Thanks in advance, I appreciate any help.
You're on the right track with a design that invokes the menu on the first tap and the parent page on the second tap. This will work on touchscreen-only or touchscreen-sometimes devices where the user cannot always 'hover', and is critical for users who have difficulty holding the cursor steady over the menu, so I recommend it over a hover-to-show-menu design regardless of whether this is Mobile Safari, Internet Explorer, or any other browser.
To do what you ask, handle the click event on the <a> tags (for example use jQuery: http://api.jquery.com/click/) and hide/show the menu that way (you could use jQuery's toggle, or show/hide.) Then extend the code to consider whether the menu is shown or hidden to determine whether it should prevent <a> tag's default behavior and show the menu (for example jQuery's preventDefault: http://api.jquery.com/event.preventDefault/) or allow the default behavior of click on <a> to occur: navigate to the <a href> URL.
Consider that with this approach you may also need to provide a way for the user to dismiss the menu once it's open (and blocking some part of the page.) Often this is done with a click handler at the document level.
I do not recommend trying to implement a touch-hold instead, as this is not well-known to users. In my experience with user testing most will not try this, even on things that look as if they are a menu.
There is no "hover" in the touch UI metaphor, although there is a counterpart event which has been called touchhold in the jQuery Mobile UI; it is fired when the finger remains pressed down on the touch-screen for a certain amount of time, e.g. 500ms, 700ms, whatever. Something similar happens on the virtual keypad of the iPad when you hold a finger down on certain keys, the [a] key, for example: you get a popup of variant forms of [a] (umlauted, accented, and so forth).
You could wire things up so the menu-open code would be called on touchhold rather than on the tap event, and then have the individual menu-items listen for the tap event. You would either have to override the touchevents of Mobile Safari yourself by writing the required javascript, or install a UI library that implements this behavior.
I´m using jquery mobile for an iPad app, and I wanted to have the typical splitview layout so I used the splitview plugin which is working fine until now, but I would still have some minor questions:
Can my first page be a normal page, meaning non-split and then when for example I click on a button go to the second page which would be split?
How do I do to enlarge the left panel if I find it a bit narrow?
Thank you for your help.
I am having the same issue.
I am able to workaround this by providing rel="external" on the link in my navigation menu. This however reloads the entire page, and the ajax effect is gone.
<li>Some Text</li>
I will be spending some time on it this weekend to get it working through ajax, will let you know if I find a solution.