Refresh page and change ID of the URL - javascript

I'm trying to make an page with tabbed content. I'm using foundation tabs (http://foundation.zurb.com/docs/tabs.php).
I made an link offside the <dl></dl> element, and it doesn't work if I use only <a href="#simple5">. I tried an javascript to reload the page <a href="#simple5" onClick="window.location.reload( true );">, but doesn't work either.
How can I proceed?

When you call JS on click, it is run before the default action. You reload a page without hashtag.
Try to add the ID with JS : <a href="#" onClick="window.location = '#simple5'; window.location.reload(true);">
You can also use et function and get the id dynamically.
Sorry for my bad english. ^-^

You don't have to manually perform location.reload. Navigating to a new hash will update the URL without reloading the page. If an element in your DOM has the ID simple5, the browser will scroll to that element.
You may also manually look at the hash change event (or repeatedly check the URL for a change, for browsers that doesn't support that event), and perform an action such as switching to a certain tab.
This is if you want your switching between tabs to be reflected in the browser history. If you don't wish to leave markers in browser history, you would instead want to intercept the link click, extract the href to use just as an indicator of which tab to show, perform the tab change, and prevent the browser from following the link (so that no actual hash change will occur)

Related

remove hash location from history and browsers back button

i have a project in which i have to scroll to a particular image out of a list of them. those images are lazy loaded (since they are all high resolution).
my current approach is to have an internal link to each one of them:
<a name="photo1"><img ... /></a>
when i click on a thumbnail to see the original photo i get a click by doing:
location.hash = "#photo1"
the problem is when i click browser back and forward, the page does not go back to the prev page, instead goes back to whatever photo link has been clicked previously
how can i remove all hash from history?
Your best bet here, I think, is to manually scroll to a target element with JavaScript.
Use the native scrollIntoView to jump to your element:
document.getElementById('[id]').scrollIntoView(true);
You can actually execute this in the <a> href attribute.
<a href="javascript:document.getElementById('[id]').scrollIntoView(true);">
Then, if you desire, you can manually add in the hash without adding a new history entry.
window.location.replace("#[id]");
Sources:
Making browsers ignore the URL hash when the back button is clicked
Scroll with anchor without # in URL
How to call JavaScript function instead of href in HTML

Track onclick actions

I need to build Google Chrome plugin, what will track all clicks on all links on all pages.
After click on link, instead of page opening plugin must catch click, plugin must obtain href attribute of the clicked link, change something in this URL and open page with new, changed URL.
Is it possible to make?
With the Content Scripts you can pass your own JS library into any (or particular) page, intersect clicks and prevent defaults (with regular JS API) and finally you can pass link back to the background page and use chrome.tabs API to open the window.

How do you hide the URL when you hover a hyperlink?

When you hover over a hyperlink you see in the corner of your browser the url you're gonig to. I'm using javascript to navigate through my tabs div. When I hover over the tab I see the url. I would like to hide this. Is this possible?
Link to example
Don't do it! Clients like to see where links are going. This behavior isn't up to you.
The only thing you could reasonably do is set the link to go to nowhere, and set the onclick attribute with sourcecode that does a window.location.
If you don't use the "href" attribute, the link won't show up.
Simply do this:
<a id="tab1">Tab 1</a>
$('#tab1').click(function(event) {
switchTabs();
});
This will register a click event (using jQuery) on the link without displaying any URL to the user. This is the proper way for handling links that don't redirect the user.
Hide Text
Then in that function you can have a switch case statement which uses window.location to send the user to another page.
Downsides to this include alienating your users which disable Javascript, and search engines probably won't follow this link.

Using AJAX for page items while still allowing them to be opened in a new tab/window

I'm looking at using AJAX to allow some content within part of a page to be reloaded without reloading the entire web page (eg things like overview, reviews, specifications, etc pages about a single item).
The problem is however I still want to allow users to open these items in a new tab or window (using the normal systems for their web browser such as right clicking the link and picking "Open Link in New Tab) rather than just left clicking the link).
Is it at all possible to do this, or is it just generally best practice to reload the entire page in cases like this?
It's very much doable. You simply need to provide an href and an onclick in your links.
The href will activate if the user has no JS, or if the user decides to open the link in a special way (new tab, etc.)
The onclick will activate on "normal" clicks of the link. You can then cancel the default action (by returning false or using your JS lib of choice's way to do it) and do your ajax stuff.
It is possible, in fact its even possible to set up a timer to update portions of pages periodically. If you are using jquery it'd be something like this:
setInterval(function() {
$('#your-div').load('your-server-side-request.php');
}, 3000);
of course you could simply bind to a link, and on refresh use .load().
OR you could even just do this with normal javascript and use my script above as pseudocode essentially.

Using the BACK button to revert to the previous state of the page

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites

Categories