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.
Related
http://www.duellinksmeta.com/pve2.html
This is a test page of my site. I learned how to create a link to jump to a specific part of a page, but what I want to accomplish is a link that opens a tab and/or jumps to content within a tab.
My main reason for this is I want people to be able to share a link that when used as a URL, it will go directly to the relevant tab opened with the content they want to see.
Without using javascript and CSS there is no provision in HTML to accomplish what you are looking for. However, if you do use javascript and CSS, this is quite easy. Tab sets can be implemented with <ul> and <li> elements, and jumps to tabs and specific bookmarks on tabs can be implemented with javascript based manipulation of CSS rules.
I have made 3 different html pages and I set anchor as [data-ajax="false"] to move another page.
Is there any way to change the page when swipe left or right ?
Also How do I set page change transition ?
page1
page2
page3
Why not use SlideMe (http://slideme.luigiferraresi.it/) ?
There are many jQuery slideshow plugins and it is usually hard to decide which one is better.
SlideMe is a responsive jQuery slider. It is done using CSS3 and works smoothly even in IE7. It is easy to install and has full screen option.
I use this plugin (which I modified a little) and I'm satisfied.
Nicolas
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.
jQuery mobile 1.2 alpha introduces Popups while it already has a similar widget, called Dialogs. They both seem very similar in nature.
What are the technical differences between Popups and Dialogs?
What Popups can do (any practical usecase as example preferred) that is impossible with Dialogs?
They are quite different beast. Here is my opinion based on my limited experience.
Dialogues
Dialogues take over the page, they contain a fullscreen dark background to make the "dialog" appear to have replaced the page.
Any page can be presented as a dialog by adding the data-rel="dialog" attribute to the page anchor link.
Like pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.
Can be chained.
Popups
Displays within the current page, and are probably more similar to the functionality commonly referred to as modals or lightboxes.
Can't be chained.
Popups are probably more suited for alerts, tooltips, small yes/no ok/cancel messages, making a thumbnail popup into a larger image, small ajax forms(newsletter, login, post a comment) etc. Useful when you don't want to overload the page with information, and only want to reveal certain functionality to users when they need or request it.
Dialogues on the other hand could be used in situations where you need to convey a lot of information (terms and conditions acceptance screen, etc), or when you really want to emphasis an alert, menu, the choice a user has, etc. Dialogues kind of break the flow of a page so should be used more cautiously.
One neat feature of the popups is that they can be used as overlay panels, which could be used to create a menu that slides in from the side of the screen, not too dissimilar to the menu in the Facebooks iphone application.
At the end of the day, either could be used, and neither is right or wrong, a lot of it comes down to personal preference, and how you want your application to flow.
One important difference is Popups appear in the same page as an element, where as dialogue is a different page in all and the background is blank.
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.