My client wants a website specifically for iPads containing 3 pages. Instead of a menu to navigate between these pages, he wants to swipe leftward / rightward anywhere on the screen to see the next page or the previous page. The 3 "pages" of the site would then be div elements belonging to the same html page, with only the one corresponding to the current "page" being visible. The markup would look like this:
<div id='page1'>
content page1
</div>
<div id='page2' class='current'>
content page2
</div>
<div id='page3'>
content page3
</div>
I did find a few little solutions here and there (for example this one) but nothing very established/popular. Am I missing something, is there a reliable and easy way to swipe between pages on mobile devices?
If you want something "established", there's Dojo mobile:
http://dojotoolkit.org/features/mobile
I've used it before. The only problem I've found is it's built by default to adapt the look of your site to match the look of the OS of the device it's being displayed on (which is totally under your control whether you want to use their CSS, I just don't like the idea.)
EDIT:
On that note if they want a "website specifically for iPads" why not just build an iPad app? Websites are not meant for any single particular device to be viewing them.
Related
I have a project that is five pages: 1 landing and 4 second level pages. I'm using page transitions, panels, and popups. The issue I have is that things like popups and panels work on the landing page but when I navigate to the second level pages, popups and panels don't work. I don't have any errors in console. If I navigate directly to the second level pages, they work. It seems as though navigating to the subpages does not activate some of the JS or code necessary.
Unfortunately, it's on a closed network for a client so I can't upload an example. Any ideas or has anyone run into this? I know that jQuery will only fire JS that's within the data-role="page" tags.
Thanks.
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 have a list of menu items and content in a single page. In PC browser or ipad, I want to see both parts in the same page. But in the smaller devices such as iphone and android phone, I want to separate the two so that you selects one of menu items in a page and see its content when he clicks it.
Jquery mobile demo page already does it. But I can't figure out how I can achieve it. Can someone explain or point to any good reference? Thanks
You may take a look at the following blog post which illustrates how you could organize your views so that based on the client type you could provide different contents.