Develop Reference

Detect which link was clicked with javascript that got user to specific page

Been searching on the web for a solution, but couldn't find anything, so maybe it's not possible, although I hope it still is.
What Im trying to do is detect the button (class or id) that was clicked when being redirected to another page on my site.
What I have is a portfolio page that contains a large amount of divs with different classes, so when someone clicks on a specific button on the homepage and gets redirected to the portfolio page, is it possible to detect on the portfolio page how the visitor got directed from. So detect which button got clicked.
no idea how to approach this, something maybe with if previous window.location last action find class or id.
Hopefully my question makes sense and someone can give me an idea if even possible.
I imagine it would rather be possible to do with php, but unfortunately server side languages are not an option in this case.
Thanks

Examples of methods you can use
add the information in the originating url - use location.search or location.hash depending on your choice of ? or #
Set a cookie (or use session/localStorage in modern browsers) in originating page and read it in the target page
Interrogate document.referrer (not always set)

You can't do it without either modifying the links (adding a query string or hash), or having code on the source pages (where the links are).
The former is pretty obvious: Just add a query string or hash (I'd use a hash) that identifies where the click came from, and look for the hash on the portfolio page. E.g., links:
Portfolio
Portfolio
and in the portfolio page:
var from = location.hash;
If you don't want to do that, and you can put code on those pages, it's easy: Add a click handler that sets information about the link in sessionStorage (very well-supported on modern browsers), and look for it in sessionStorage when you get to the portfolio page.
E.g.,:
$(document).on("click", "a", function(e) {
// Maybe check the link is going to portfolio, or refine the selector above
sessionStorage.setItem("linkFrom", this.className);
});
and then in the portfolio page:
var from = sessionstorage.getItem("linkFrom");

You can use window.localStorage to save the last id of the clicked element.
localStorage.setItem('last_clicked_id', id);
And then read it in the next page:
localStorage.last_clicked_id
Before running you should check for localStorage support:
if(typeof(Storage) !== "undefined") {
//localStorage code
} else {
//no localStorage support
}

this is how it works: the recent page or url is set on the URL parameters like a GET server request, but instead the client will receive it and parse it not the server. the recent page or url is on the "fromurl" parameter. on every page put this in (it's a javascript code):
function getURIparams(s) {
loc = window.location.href;
loc = loc.substring((loc.indexOf("?")+1));
loc = loc.split("&");
for (l = 0; l < loc.length; l++) {
lcc = loc[l].split("=");
if (lcc[0] == s) {
return lcc[1];
break;
}
}
}
next on every anchor link put this in href:
The Link to another page
after that, on every page execute this javascript:
from_url = getURIparams("fromurl");
the "from_url" variable will be the string variable of where the user clicked before it comes to that page.
if you are to lazy to put all those anchor one by one like this, do this work around but you need jquery for this. you dont need to put the parameter on the links for it to know where it comes from it will be automatically added by jquery.
$(document).on('click', 'a', function(e){
e.preventDefault();
window.location.href = e.target.href + "?fromurl=" + window.location.pathname;
});

jQuery .load page then navigate to anchor using hashtag

I need help with a jQuery function that will allow me to use hashtags to scroll to an anchor point on a .load() page.
Basically someone clicks on a homepage link and it opens up a model window that they use to navigate the remainder of the website. This window then uses the same code to open up any other links on the site. I know the format of these links is not optimal, but it's what I am required to work with.
I have the following code that is displayed in a model window.
<div id="pop-top-menu">
<p class="p_text">
Go Back |
View by Resorts |
View our Private Homes |
View our Properties with Discount Coupons</p>
</div>
When someone clicks on one of those links, it will then go though this code:
function pop(id) {
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
}
So I need to have the visitor click on properties.php#property_id and it load the page properties.php and THEN navigate to the anchor tag. Not all links will have anchors, but many will.
Please note, this is not anchor-based navigation. This is loading a link and THEN navigating to the anchor provided (if it exists).

Untested, but when I understood your question correctly you could modify your pop function like this:
function pop(id) {
// Expression to test if id has a hashtag
var hasHash = /(#([^ ]*)/,
$hashID;
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
if(hasHash.test(id)!== false) {
// hasfound - grep it, and make a jQuery Object
$hashID = $('#' + id.split('#')[1]);
if($hashID.length) {
// if it is found, scroll to this element with an animation
// in case you just want a jump, simply set scrollTop
// and remove the animate method
$('html, body').animate({
scrollTop: $hashID.offset().top
}, 2000);
}
}
}

Link to specific slide of jQuery-tools scrollable

jQuery tools seems to have support for this built into the Tabs object, but not scrollable.
I want to be able to link to a specific slide on the following scrollable:
http://jsfiddle.net/cutcopypaste/5UWsr/
I'm using
if (location.hash)
{
$('#' + location.hash.substring(1)).click();
}
but it doesn't seem to be doing anything. It picks up the hashtag fine, but the click event is either not firing or not firing on the correct element.
Could you help me with how to mimic a click on an element to navigate to the correct slide? or some other way of getting this to work?
I am worried I'll get weird scrolling down the page to the anchor name, but will worry about that only if it does actually happen.

Assuming you want to deeplink so that scrollable will scroll to a certain slide based on GET URL? here's what I do:
scrollapi = $("#scrollableID").data("scrollable");
deeplink = window.location.search.substring(1)
if (deeplink) {
scrollapi.seekTo(deeplink);
}
Add the GET string is just the number of the slide you want to link to. (starts at 0)

javascript is affecting every anchor, I want to make some exempt

so I have one script that scrolls the whole page smoothly. Nice script. It uses anchors to do this. So the NAvigation Menu basically says "ABOUT ME" or whatever, and when clicked the whole page scrolls to the ABOUT ME section. But what its programmed to do is when I click on an internal anchor link, it bring the browser view to the TOP, LEFT. which works fine, since I want to scroll the entire page.
BUT.
I am using another script that allows me to click an option on a menu, and a little window should pop up and give me the info. BUT instead, the whole page moves, thanks to the previous scrolling script, and puts the new pop TOP, LEFT.
Soooo? any ideas?
init: function () {
var lnks = document.getElementsByTagName('a');
for (var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
addEvent(lnk, 'click', HtinyScrolling.initScroll, false);
lnk.onclick = function () {
return false;
} // Safari
}
}

Rewrite the scrolling script so it does not affect the anchors in the menu. Without seeing any code it is difficult for me to say exactly what to change.
The best way to solve this would be to either make the scrolling script only affect anchors of a specific css class such as .scrollable, or alternatively make it not affect anchors with a specific class for example if the option menu has every option with class .option then disable your script for anchors with class .option. If I could see the relevant parts of your code I could help further

Can JavaScript tell the difference between leaving through the back button or a link?

My application has pages with several tabs that simply switch the visible content. However, the page also has links that will add tabs to the page. In addition, the application remembers (with cookies) which tab you last viewed in case the page is refreshed (strict cache settings cause refreshes even when using the back and forward buttons).
My problem is that the first time you visit this set of pages, it should show the first tab (Tab A). Then, you click a link, and it adds a tab, and it remembers that new tab (Tab B). However, if you hit back, now it looks like it did nothing because it remembers and displays the tab you last clicked (Tab B).
Remembering Tab B is desirable behavior if you click forward to a new page and then use our in-application history to return to the previous page. However, it is undesirable if you click the Back Button, because you want it to again show Tab A, the way it did when you first arrived.
My question is whether the JavaScript onunload event can detect the difference between leaving the page with the Back Button, or some other means. At this point, I want it to forget any tabs that it had remembered for that page.

If the difference you are trying to detect is between a user clicking a link and navigating away from the page some other way, you can detect a link click using JavaScript by attaching onclick event handlers to each link you want to observe clicks on.
So if onunload fires without an onclick first having fired, the user is leaving the page some other way than by clicking one of your tracked links.
<script type="text/javascript">
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = setGlobal;
}
function setGlobal() {
window.linkClicked = true;
}
window.onunload = function() {
if (typeof window.linkClicked === 'undefined' || !window.linkClicked) {
// they are leaving some other way than by clicking a link
}
}
</script>
It gets a bit trickier if you already have onclick events on your <a> tags, if that's the case I can provide a way to do that too.
Of course you can also attach to all the onclick events using jQuery or another JavaScript library.

Browsers remember the state of the timers (setTimeout calls) that were made on that page.
The first time the page loads the onLoad will be called, set a timer that forwards to the next page based on the history. If you are already on the last page, no problem :D, if not then it will be forwarded.
For IE the onLoad is always called, no matter if is with the back button, therefore you can put the same portion of code there.