We Keep Coding

Get previous page URL a user has visited and add class to element on current page using jQuery

I need to get the previous page URL a user has visited and then apply an "active" class to an element on the current page using jQuery.
My website sells telephone numbers so if a user visits a page that sells 0800 numbers then goes to the shop page I want my 0800 anchor link to have an active class
Here is what I have...
$("#range a").each(function () {
if ($(this).attr("href") == document.referrer) {
$(this).addClass("active");
}
});
but the class isn't adding. Is document.referrer the correct way to grab the previous URL?
Thanks

Probably you're using relative paths in your links. document.referrer returns an absolute path. Note that # fragments can also be different among other things that can make the comparison return false. Maybe you should parse document.referrer using the next trick to compare properly with your link href.
https://gist.github.com/jlong/2428561

So I used CBroe's method of Logging both values to the console, and checking to see if the expectation actually matched reality. It turned out the URLs we're different so that's why I wasn't getting an expected result.

Dynamic bootstrap "active" selection for pages

I need to select a navigation item as active when the page loads. This issue is within a bootstrap framework. I know how to do this in PhP.
I have multiple pages and want to keep the navigation in a PhP include. Currently, I have to have the navigation code links in each page. When the user selects "About" I want the About nav item active and dynamically selected. I would like use javascript and the "addClass" function.
I'm not a high-level javascript developer, but can do some basic functions, etc.
I have been searching and haven't found anything that works for me.
Thanks
Ted

So I'm not exactly sure what you're asking, but I assume you want the Javascript to add the .active class to a nav bar link when that url is the active one. You could create a utility function which analyzes the window's url and matches that to the correct tab. for instance:
(function(){
var host = "www.yourdomain.com/plus/whatever/else"; //the default domain
var state = window.location.href.subString(host.length - 1); //extract state
var stateMap = {
someStateName: 'nav-selector-value'
};
var navElement = document.getElementById(stateMap[state]);
navElement.className += " active"; //make sure you have a space before
})();
This is just a quick and dirty example. You'll have to use some regex if your states get more complex.

jQuery / JavaScript Hide an element based on current page?

lets say im on this page
http://MyWebSite.com/users
and there is a link button on this page lets say
<span class="user">
go to page
</span>
If i click on the link it goes to for example
http://MyWebSite.com/users/jake
So now when im on this page there is same button exists and i want to hide it using javascript or jQuery :)
More info: The {$record->url()} in the link is dynamic goes to a page depending on the user, so i must use {$record->url()} in the script to match the current page link
Is this possible?

(I'm on a phone so this is the best I can do for now)
Maybe something like....
if (window.location.href.replace(location.hash,'') == "http://kodeweave.sourceforge.net/editor/") {
$(".nicole").hide()
} else {
$(".michael").hide()
}

You could use jQuery's equals selector to hide any elements that had an href attribute that pointed to your target page using the following code :
// This assumes that the URL will be populated via your server-side code in
// { ... } braces
$('[href="{$record->url()}"]').hide();
likewise, if you just wanted to hide any elements that pointed to the current URL, you could do the same thing via a bit of string concatenation :
// This would hide any elements that point to the current URL
$('[href="' + window.location.href + '"]').hide();
If you can avoid it though, you may want to consider hiding this using server-side code (i.e. using a conditional to determine when certain elements should / should not be rendered).

Javascript creating a link to another page with a JS function for that page

So I have a page that has multiple divs that can be toggled to be visible/invisible by the user.
Then I have another page that I want to link to something specific in the aforementioned page. How can I pass the javascript toggle code along with the link so that it displays the correct div, instead of just the default view.

You could use a url hash like site.com/page.html#div1
Then use javascript to parse the hash and decide wich div to show
var hash = window.location.hash;
var selectedDiv = hash.split('#')[1];
//Then show selectedDiv

Looking for advice on what approach to take for multiple image swaps

I'm working on designing an interactive university campus map and need some direction with what I am looking to do.
Link to page: http://www.torontoclassfind.com/startpage.html
I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.
I could do that with the following:
$("#buildinglink1").click(function () {
$("#buildingimg1").attr("src","highlightedimage.gif")
})
Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.
The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.
I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.
Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.

Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.
I think you're asking to do something like this:
$(".any-building").click(function () {
//replace all building sources with the unhighlighted version
$(".any-building").attr('src', function () {
return $(this).attr('src').replace('buildingc', 'building');
});
//replace clicked image with highlighted one
$(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});
A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.

A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.
You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .
Example:
var $mainImage=$('#mainImage')
var $buildingLinks=$('.buildingliststyle a').click(function(){
/* "this" is the link clicked*/
/* get index of this link in the whole collection of links*/
var index=$buildingLinks.index(this);
/* perhaps all the image urls are stored in an array*/
var imgUrl= imagesArray( index);
/* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
var imgUrl=$(this).data('image');
/* store the current image on display (not clear how page is supposed to work)*/
var currImage=$mainImage.attr('src');
$mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
/* nw update main image*/
$mainImage.attr('src', imgUrl);
/* load ajax content for this link*/
$('#ajaxContainer').load( $(this).attr('href') );
/* avoid browser following link*/
return false;
});
/* button to reset main image from data we already stored*/
$('#imageResetButton').click(function(){
$mainImage.attr('src', $mainImage.data('lastImage') );
})
Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID
Code above mentions potentially storing image url in data attribute such as:
Building name