I've been seeing this on a few websites recently where a link has changed the href of the window.location, but the page does not reload when the link is clicked, and the page remains scrolled down by the amount it was before. Does anyone know how this is done?
The sites you're thinking about probably use the new HTML5 History API, which allows you to change the behaviour of the back buttons and the address bar. Here's a demo: http://html5demos.com/history
Note that most funny business with hyperlinks will confuse search engines. Make sure your site works acceptably in an ancient browser (Lynx comes to mind) and/or read up on Google's Ajax Crawling Guidelines.
If you want to change the URL in the browser address bar without reloading the page, do this
Change URL
stateObj = The stack in which the current state of the page will be pushed
"page2": This parameter is currently being ignored by the FF.
"newpage.html" : New URL which will be displayed in the address bar
reference: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Supported by: FF 4.0+, Chrome 8.0+, Safari 5.0+, Opera 11.5+, IPhone 4.2.5+
Related
I have page with few most used links, I want use it like my homepage and new tab page.
when I press ctrl + t for new tab I need see my page (it is done) but with empty address bar for faster writing in it (it is impossible for me).
.htaccess, javascript it doesn't matter. Any ideas? Thanks.
Your users do not expect that CTRL-T or ⌘-T will take them to a specific site or a page with a blank address bar, which is why browsers don't give you that capability. Unlike a native desktop application, you cannot control the workings of the user's browser. You should not even try.
I have a website that consists of a bunch of single-page-template jQuery Mobile pages that are linked to each other using prefetching and caching. All pages exist in the DOM (after they are prefetched).
This works fine on my desktop browser. However, when I browse my site using my HTC EVO 3D Android phone (either the default browser or the Opera browser), switching between pages acts like I'm actually going to an external page. In other words, the browser's address bar appears momentarily, then the page turns white, then the new page loads, then the address bar goes away.
I would expect the behavior to be exactly that of a multi-page-template. For example, if you browse the multi-page-template in the jQuery Mobile documentation, you can switch from one page to another very smoothly. The browser address toolbar does not pop up, and there is no white flickering in between pages. However, if you browse the "persistent toolbar" example (which uses prefetching to load all the pages in the example), you will see the same behavior that my site is experiencing. The browser's address bar will appear, the page will turn white, the next page will render, then the address bar will go away.
So how do I make my prefetched pages act like the multi-page template without having to rewrite my site to use the multi-page-template?
For reference, here are the jQuery Mobile persistent toolbar demo and multi-page demo that I believe should work exactly the same (in regard to URL address bar appearing):
http://jquerymobile.com/demos/1.3.0-rc.1/docs/toolbars/footer-persist-a.html
http://jquerymobile.com/demos/1.3.0-rc.1/docs/pages/multipage-template.html
Unless your initial page links directly to all of your other pages with the data-prefetch attribute on your <a> link tags, those pages will not be prefetched and cached. I state this because your question implies that there is some chaining with your pages which is not supported. You can load also load and cache them via the API.
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );
Are you able to actually inspect the DOM on your mobile Android device?
Is there any chance the pages are being flushed from the DOM based on a memory constraint? I am not aware of any specifics in the jQM docs on this scenario but at some point you will fill the cache.
I am writing a complex AJAX application at the moment and the entire site has clean URLs. At the moment PHP creates the basic layout for each page however I don't want to have to navigate away from each page when the user clicks on a link, and I don't want to have a hash in the URL because it won't fit with the rest of the site. I know that this has cropped up loads before on the site and it seems to be quite commonly asked but I was wondering if there was a neat HTML5 way of just appearing to change the URL in the address bar even if it technically remains on the same page.
You can do it with history.pushState, but only in browsers that support it. Just try the following line in your browsers JavaScript-Console.
history.pushState({},"URL Rewrite Example","https://stackoverflow.com/example")
More on that in The pushState() method (Mozilla Developer)
Similar question How do I, with JavaScript, change the URL in the browser without loading the new page?
As others have stated, HTML5's history.pushstate is the way to go. Try browsing a repo on github to see it in action (https://github.com/visionmedia/express).
Trouble is the only version of IE that supports history.pushstate is IE10, which kinda sucks.
Plenty of sites use hashbang #! URL's such as Twitter (e.g. https://twitter.com/#!/Sironfoot ). The hashbang is a URL pattern agreed on by search engines so that they can still trawl and index a heavily Ajax powered website (more info here http://code.google.com/web/ajaxcrawling/docs/specification.html), so you could go that route.
The only other approach is to use history.pushstate for browsers that support it, and fall back to full-page refreshes for non-supporting browsers.
I have a referral project.
In that there is an agent between the
affiliate(my site) and the target site.
So all hyperlinks displayed in my
site will be redirected to the agents
site and then it is redirected to the
target site.
The hyperlink itself is the link to
the agents site.
So i am displaying all products. I
have given links to them. When users
hover a hyeprlink you can see the
href text displayed in the status bar
which will be the agents site.
The requirement is the hyperlinks of
an agent site should not be displayed
in the status bar.
My solutions and assumptions
So i can use span onclick =
window.location = hrefOfAgentLink.
I have seen in other sites that they
redirect to another scripting page
and then the redirection takes
place. for example
http://sitename.com/click/id=32.
The id refers to the hyperlink in
database. hope they fetch the link
and they do a location header to
redirect to the agent page.
Why so? because the user should not see where the link goes.
I want to know whether there is(are) any other option(s) so that the hyperlink will not be visible in the status bar and in the address bar when it is redirecting.
Anyway when redirecting the agents url is not visible because it immediately redirects to the target site.
I would like to have the stackoverflow users suggestions. Thank you.
You used to be able to set the status bar message using javascript, but you can not do that reliably anymore. This is most probably because the browser wants to protect the user. Instead of trying to hide the URL, perhaps you should work on a "redirect-URL" that looks reliable and that makes it obvious to the user both that it is a redirect-URL and where it is going. For example this kind of URL would both make me aware of where I am going and that my access is going to be recorded:
tracker.my-ad-network.com/stacktrace.com/ad/568
Instead of something like this (that would not make me feel safe):
dashj2.gggfbad.com/index.php?aid=1232808432&ref=123432.
And as noted above, start accepting serious attempt to help you or people will simply stop :)
Piotr
You can use the new data attribute so your code would look something like this:
link text
Then in your JS, if you're using jQuery for example:
$('a').click(function(e){
e.preventDefault();
var loc = $(this).data('redir');
window.location = loc;
}
Not too hacky for what you're trying to accomplish.
I would show IE6 visitors a site with limited css (Progressive Enhancement) but would also like them to gently show a header informing them they can/should upgrade to a modern browser. There are initiatives out there, like ie6nomore, who do just that. But the list of modern browsers and the headertext is hardcoded.
My site is localised, so I rather have a link to an external website, that autodetects their browser language, and informs them of modern browsers in their own langauge.
That way my 'advice' will always be up to date and fully localized.
It's not a complete list, but Microsoft had to setup a browser choise page which shows the top 12 browsers, based on market share. This list will be re-evaluated every six months.
You can read more about this here:
Browser Choice FAQ
So if you detect an old browser, you could display a nice message and a link to this page.
Hope that helps.
At least safari goes directly to the windows download, so its not really a universal solution.
And its only in english.
The browser landingpages are available in all languages, so so should be the browserchoice page. Unlike firefox and chrome apple doesn't have an auto browser language detecting landingpage, so I rerouted it via google search to achieve that.
(why can't I add this as a comment to the previous post?)