I have two html pages: mainpage.html and secondPage.html
The first page works like the layout:
<div id="header"></div>
<div id="home"></div>
<div id="footer"></div>
the second:
<div id="content"></div>
So when i click on a button in the home div i have a function that charge the #content inside the #home, until here everything works good. In few words i refresh only #home.
Now I want that when I click the back button of the browser I come back to the old home because now if i do this it goes to the previous page.
Is there a way to do this?
Related
Can you please let me know if it is possible to control the scroll to element which is in child page from parent page?
Lets say I have a.html like this
<div id="header">
Homepage
App
Map
Tap
</div>
and in 2.html I have
<body>
<div id="app" style="height:600px;">App Section</a>
<div id="map" style="height:600px;">Map Section</a>
<div id="tap" style="height:600px;">Tap Section</a>
</body>
now what I would like to do is when a user clicks on each of links App, Map, or Tap first load the 2.html and then scroll to the linked section?
Thanks
I have a simple one page architecture. In the first page I loaded some list items. Next I scrolled the list and say I reached item 60. Then I clicked the item and it took me to second page.
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 0
<h1>Header</h1>
0
</div>
<div role="main" class="ui-content">
<ul data-role="listview" id="list"></ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Back
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
Some page
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>Footer</h1>
</div>
</div>
Now when I pressed back button in second page it brings the first page with the list, but scroll position is 0. I wanted it to be position of the 60th item. What I'm missing? How to get back in previous page where I left scrolling?
JsFiddle
Watch the situation by scrolling, then press any button and then press the back button.
When navigating from one page1 to page2 get the scroll position of page1 and when come back form page2 to page1 set the scroll position.
From page 1 to page 2
var scrollPosition= $("div").scrollTop();
and when coming back to page1. Then in page 1 ready function
$(document).ready(function(){
$("div").scrollTop(scrollPosition);
});
I don't know about jquery mobile well but As you said you have two pages and after navigating back to the first page you want previous and as we all know that we can't store any data page wise. once if you refresh or reload the page, everything will be reinitialized again. so you have only one way to achieve your goal is that, when you click on list item, get its current scroll position and send that position as query string parameter to another page and store it in one variable there. soon after when user clicks on "back" button you have to again send that variable to first page as query string and on document ready event you will have previous scroll position and you can set that.
Thanks
I'm trying to fix the top menu on page change.
Example:
<div data-role="page" id="page1">
//page 1 contents
</div>
<div data-role="page" id="page2">
//page 2 contents
</div>
and my top menu
<div id="top-menu">
</div>
Is there any way to not make the menù code reappear on each page?
I want my menu div to be collective for all pages.
Any ideas?
Thanks,
Andrea
No, the concept of "pages" does not allow for static content to be shared among them.
But I see at least two solutions:
use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need
use some JavaScript trickery:
$(document).on("pagebeforeshow", "[id^=page]", function(event)
{
// "move" the menu to the content of the current page
// (you have to add IDs to each page like 'page1content')
$("#top-menu").prependTo("#" + this.id + "content");
});
I have the following
<body>
<div class="sidebar"></div>
<div class="main">
<div class="page-1">
<p>Page 1</p>
<button id="btn-page2">Go to Page 2</button>
</div>
<!-- Other Pages -->
<div class="page-2">
<p>Page 2</p>
</div>
</div>
</body>
I am trying to follow the same principle of JQuery mobile by having all the pages in a single HTML document.
On page load, only the div with class page-1 should be displayed. However on clicking the button with id btn-page2, the second page should be displayed instead of the first one.
I figured I could add an .active-page class on the visible page with a display:block as attribute.
However, I also want to slide the second page from the bottom smoothly.
Any suggestions?
You can have a look at this blog.
http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/
This demonstrates the way to add slide page effect using css3.
You can use the same concept to have the page slide form bottom to top.
you can create a css3 class which will slide any page from bottom and add it to the page div based on the button clicked
What to do if i want to link two internal pages on the click of a button using jquery or javascript...
i can do it using <a href=#nextPage"> in HTML but i want a script to do it! what i am doing right now is:
<!-- first page-->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>Test page</h1>
</div>
<div data-role="content">
<p>this page will link internal pages using # </p>
change to next page
</div>
</div>
<!-- second page-->
<div data-role="page" id="nextPage">
<div data-role="header">
<h1>Test page 2 </h1>
</div>
<div data-role="content">
<p>this page will appear after you click the button on first page. </p>
</div>
</div>
this is doing good, but what i need is a script to link them. as in my app i need to change the page on click of button only after certain conditions met. but i dont know how to do it...
-----------Edit------------
I found out a way
window.location.href="#nextPage"
this is how its done.
Thanks all for your effort..
You can add onclick handler to the a tag:
JS
function navigate() {
if (condition) {
$.mobile.changePage("#nextPage");
}
}
HTML
change to next page
OR you can do this:
JS
$(document).ready(function() {
$(".nav-nextPage").click(function() {
if (condition) {
$.mobile.changePage("#nextPage");
}
});
});
HTML
change to next page
jQuery Mobile, Anatomy of a Page
Scroll down to Local, internal linked "pages"