I have 3 pages:
By clicking the "filter" button on page1, it takes you to page2. Clicking the "grey buttons" on page2 takes you to page3. Clicking the "red buttons" on page2 take you back to page1.
But during all these transitions, the pages lose their styles.
I tried adding this code on page1, but it didn't seem to work very well:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
It seems that When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load).
This means that any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP.
So I tried to consolidate the styles, as well referenced the same set of stylesheets and scripts in the head of every page. This fixed the issue.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
If you r using windows 8 navigation, when you navigate to one page to another, the new page css is loaded, if any css selector have the same name, the new css will be valid. When you back you can lose this styles.
Try to use css namespaces for each page and subpage:
https://www.google.com.br/search?q=css+namespace
I m not sure what logic you have are using to navigate to page2 or page3
you can try changePage function to navigate to different page..
$.mobile.changePage("page2.html", { allowSamePageTransition: true,
transition: "slide", reloadPage: true });
When you use pageChange an Ajax request will be made to that url and it will be loaded only the content inside the div with data-role="page". So everything you have out of this element will be ignored (JS and CSS).
Related
I hope someone can help me. I have an issue with going to pages from my index page. But for some reason not all of them. The problem is that when I navigate to these pages they do not open at the top of the page, but rather open on what appears to be the same scroll position from the index at the moment. The same happens when I navigate back to the index page from the opened one. It is just a basic HTML href structure, I even tried adding ID tags to the top element and adding it to the link but no success.
So I basically just need a way to make these pages open at the top of the page, either with HTML, JS, or Jquery whatever can help.
If i am understand your problem correctly then you need to move to top when your page load.
so in your target page that you are open write below code:
$(document).ready(function() {
console.log( "ready!" );
$(window).scrollTop(0);
});
Or
$(document).ready(function() {
console.log( "ready!" );
$(this).scrollTop(0);
});
using above code it just moves your scroll to top when you load your page.
try second
To open pages in a new tab, use target="_blank" attribute.
Check out this documentation with target attribute for more clarity.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?
I'm writing some documentation using GitHub's built in wiki (using Markdown syntax).
The problem I have had with anchor tags is that once I have clicked that anchor once, manually scrolled down to it again, and try to click it, it won't work anymore.
a) The place where the anchor links jump to.
##<a name="listofactions">List of Actions</a>
b) An example of an anchor link
[Back to List of Actions](#listofactions)
I also tried html in markdown syntax
Back to List of Actions
And even tried linking to the full url with the # and anchor appended.
Back to List of Actions
They all work, but when I manually scroll down to the anchor link again and click it, it doesn't bring me back to (a) anymore. Unless I click on a different anchor link.
How can I write it such that the anchor links can work regardless?
There is nothing wrong with your Markdown. This is simply how browsers work. The first time you clink the link (when viewing the same page), the URL in the address bar of your browser changes from http://example.com/path/to/your/page to http://example.com/path/to/your/page#someanchor. As that is a different URL, the browser will navigate to the new URL by scrolling to the appropriate position on the page. However, as you read the page and scroll to a different position, the URL remains the same. Finally, the second time you click the link,the URL is already http://example.com/path/to/your/page#someanchor so there is no change in the URL and as far as the browser is concerned, you are already there so no navigation happens and the page does not scroll.
There may be some JavaScript tricks you can use to trick the browser into behaving as you want, but those won't work on GitHub as they won't let you include any JavaScript in your pages for security reasons.
What you could do as a workaround (assuming you have a long page and want to easily find the specific location again) is first click the [back] button (taking you back to http://example.com/path/to/your/page) in your browser's navigation bar and then click the [forward] button (returning you to http://example.com/path/to/your/page#someanchor) which should trigger the browser to navigate to the location and scroll the page.
Try this:
...
<a name="listofactions"></a>
## List of actions
Mind the blank line between the HTML tag and the markdown markup.
Then call it via [link-to-anchor](#listofactions)
Should work.
Hope to have helped!
Add the attribute target="_self"
http://www.espnfc.com/team/nigeria/657/index
Select team/group from category and select Brazil
If you notice, the url changes (no hash tags), then there is a CSS progress bar loader at top and page loads quickly (without white document refresh)
Is this site using some framework?
AJAX call to refresh a portion of the page + history.pushState to change the URL and save state... It's all been out there for a while.
Read this: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Every framework works on its language (like jQuery is JavaScript, for example), so there's absolutely nothing a framework can do that the original language can't.
I have a drop down menu which I include on all my pages using php. On this menu I am using anchors to navigate to various divs on a single page. It is very simple code, anchors with tags in the href, no JavaScript.
Test
navigates to
<h2 id="test">Test</h2>
If I am navigating to the page this works fine. If I am already on the page it goes to the tag then redirects back to the page without the tag (i.e. goes from test.php#test to test.php). What is causing this behavior and how do I fix it?
If you had provided more code then it would have been more helpful. But I am just guessing here what the problem is. You can add the following javascript to your page:
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
What this does is target all hash-links and prevent their default behavior and change the URL. But without seeing more of your code, its hard to tell if it'd work. You can also interchangeably use replaceState, which would change the URL without adding an entry to the browser history. Code borrowed from here.
I begin to develop mobile app using PhoneGap. First I make 2 .html files named index.html and place.html
In index.html I use $.get() method to get json data from web service and then show on HTML tag.
When user click link from index.html page it going to place.html. In place.html I put back button like
Back
for back to index.html page.
A problem is when I click back button to index.html page it run $.get() method when page is loaded.
How to cache index.html page? When I clicking back button, it use same data from the first time.
Thanks!
Have you tried jQuery mobile?
You don't have to actually incorporate the entire library, but only utilize the
<div class="home-page" data-role="page" data-dom-cache="true" >
attributes on the Home page container. Another thing to note is that all your pages need the data-role="page" attribute for jQM to work.
By default, jQM has disabled caching, you can enable it in JavaScript as follows
$.mobile.page.prototype.options.domCache = true;
Reference: jQM Documentation on caching pages