javascript for url

[Crash1hd]

I was wondering if anyone new of a simple javascript that checks the url of the page?

I need it so that I can change the image of a menu bar in a js file according to the header of the url for example:

if the url is test.website.com then image 1 would be down

or

if the url is test1.website.com then image 1 would be up and image 2 would be down!

[cheesebagpipe]

You can check the document.url property (loaded page), and parse it for a particular portion (test.website.com in the above), then map that to a specific image url to be displayed. Hard to give a more exact description without knowing how your page/navigation is set up. ;)

[Crash1hd]

it set up like follows

document.write("<P Align=Center>")
document.write("<A Href=#' onMouseOver='changeImages(\"About\", \"Images/AboutDown.jpg\"); return true;' onMouseOut='changeImages(\"About\", \"Images/About.jpg\"); return true;'> <Img Name='About' Src='Images/About.jpg' Alt='About' Border=0 /></A> ")
document.write("<A Href=#' onMouseOver='changeImages(\"Prices\", \"Images/PricesDown.jpg\"); return true;' onMouseOut='changeImages(\"Prices\", \"Images/Prices.jpg\"); return true;'> <Img Name='Prices' Src='Images/Prices.jpg' Alt='Prices' Border=0 /></A> ")
document.write("</P>")

I thought that I would try

function test() {
var url = document.url;
var path = 'http://about.site.ca'
if (url == path) {alert('test')}
}
onload=test();

but the alert doesnt come up!

[cheesebagpipe]

Again - this syntax:

onload=test();

...is incorrect. You want to assign the handler function, not run it immediately (and assign the return value). Two ways:

onload = test; //pointer

onload = function() { //wrapper
test();
}

[Crash1hd]

ok I am having trouble understanding! could you maybe show me an example!

[cheesebagpipe]

Have you thought about how you were going to 'roll' the menu image after you find out what page you're on? This is a bit more involved than it seems. If you could post a little more about what you wanted to do (generic description) it would help.

http://www.xs4all.nl/~ppk/js/events_tradmod.html

[Crash1hd]

well the site is here (http://www.alwaysremember.ca)

and the images at the top are the links to the different pages but I am useing a js file so that I dont have to change each individual page when I add a button or remove a button or change how the look ext.... but I wanted the button that the page I was on to be pressed down by default for example the button for about would be pressed down when on that page like it does for google with the 4 links at the top and they grey and the blue!

[cheesebagpipe]

OK, you might try this. Unzip the file below. The one thing you'll need to do is change all the capital letters in your image filenames (http://www.Alwaysremember.ca/Images/Text'/About.jpg) to lowercase. Could do this in the script but, might as well stick with simple naming conventions. Then try the script. Hope it works....

[Crash1hd]

Looks like where on the right track but theres no change!

'<p align="center">' +
'<a name="Top" href="http://www.Alwaysremember.ca">' +
'<img name="Title" src="http://www.Alwaysremember.ca/Images/Title.gif" alt="Title" border="0"></a>' +
'<br>' +

'<a href="http://About.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'About\',\'http://www.Alwaysremember.ca/Images/Text/AboutDown.jpg\');return true" ' +
'onmouseout="changeImages(\'About\', \'http://www.Alwaysremember.ca/Images/Text/About.jpg\');return true">' +
'<img name="About" src="http://www.Alwaysremember.ca/Images/Text/About.jpg" Alt="About" border="0" /></a>' +

'<a href="http://Affiliate.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Affiliate\',\'http://www.Alwaysremember.ca/Images/Text/AffiliateDown.jpg\');return true" ' +
'onmouseout="changeImages(\'Affiliate\',\'http://www.Alwaysremember.ca/Images/Text/Affiliate.jpg\');return true">' +
'<img name="Affiliate" src="http://www.Alwaysremember.ca/Images/Text/Affiliate.jpg" alt="Affiliate" border="0" /></a>' +

'<a href="http://Memorials.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Memorials\',\'http://www.Alwaysremember.ca/Images/Text/MemorialsDown.jpg\');return true" ' +
'onmouseout="changeImages(\'Memorials\',\'http://www.Alwaysremember.ca/Images/Text/Memorials.jpg\');return true">' +
'<img name="Memorials" src="http://www.Alwaysremember.ca/Images/Text/Memorials.jpg" alt="Memorials" border="0" /></a>' +

'<a href="http://Obituarys.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Obituarys\',\'http://www.Alwaysremember.ca/Images/Text/ObituarysDown.jpg\');return true" ' +
'onmouseout="changeImages(\'Obituarys\',\'http://www.Alwaysremember.ca/Images/Text/Obituarys.jpg\');return true">' +
'<img name="Obituarys" src="http://www.Alwaysremember.ca/Images/Text/Obituarys.jpg" alt="Obituarys" border="0" /></a>' +

'<a href="http://Pets.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Pets\',\'http://www.Alwaysremember.ca/Images/Text/PetsDown.jpg\',\'Title\',\'http://www.Alwaysremember.ca/Images/TitlePet.gif\');return true" ' +
'onmouseout="changeImages(\'Pets\',\'http://www.Alwaysremember.ca/Images/Text/Pets.jpg\',\'Title\',\'http://www.Alwaysremember.ca/Images/Title.gif\');return true">' +
'<img name="Pets" src="http://www.Alwaysremember.ca/Images/Text/Pets.jpg" alt="Pets" border="0" /></a>' +

'<a href="http://Weddings.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Weddings\',\'http://www.Alwaysremember.ca/Images/Text/WeddingsDown.jpg\',\'Title\',\'http://www.Alwaysremember.ca/Images/TitleWeddings.gif\');return true" ' +
'onmouseout="changeImages(\'Weddings\',\'http://www.Alwaysremember.ca/Images/Text/Weddings.jpg\',\'Title\',\'http://www.Alwaysremember.ca/Images/Title.gif\');return true"> ' +
'<img name="Weddings" src="http://www.Alwaysremember.ca/Images/Text/Weddings.jpg" alt="Weddings" border="0" /></a>' +

'<a href="http://Prices.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Prices\',\'http://www.Alwaysremember.ca/Images/Text/PricesDown.jpg\');return true" ' +
'onmouseout="changeImages(\'Prices\',\'http://www.Alwaysremember.ca/Images/Text/Prices.jpg\');return true">' +
'<img name="Prices" src="http://www.Alwaysremember.ca/Images/Text/Prices.jpg" alt="Prices" border="0" /></a>' +

'<a href="http://Login.Alwaysremember.ca/" ' +
'onmouseover="changeImages(\'Login\',\'http://www.Alwaysremember.ca/Images/Text/LoginDown.jpg\');return true" ' +
'onmouseout="changeImages(\'Login\',\'http://www.Alwaysremember.ca/Images/Text/Login.jpg\');return true">' +
'<img name="Login" src="http://www.Alwaysremember.ca/Images/Text/Login.jpg" alt="Login" border="0" /></a>' +
'</p>';

var whichpage = document.URL.substring(7, document.URL.indexOf('.'));
var oRegExp = new RegExp('Images\/Text\/' + whichpage + '.jpg', 'g');
HTML = HTML.replace(oRegExp, '/Images/Text/' + whichpage + 'Down.jpg');

document.write(HTML);

I slightly edited it to be easer to read! I am thinking that you have a var of oRegExp in there but its not actually replacing what is in the stuff above

:)

[cheesebagpipe]

Try unzipping that file again - it appears to have been corrupted somehow (mine unzipped correctly).

Didn't change those image names!

http://www.alwaysremember.ca/Images/Text/about.jpg

http://www.alwaysremember.ca/Images/Text/aboutDown.jpg

..and so on. Let me know if you can't, for some reason.

Here's why it's important: your pages have URLs like 'http://about.alwaysremember.ca/' and 'http://memorials.alwaysremember.ca/'. The script parses out the 'about' and 'memorials' part and uses it to find and add the 'Down' part to the image URL. Might as well use lower-case for both.

[cheesebagpipe]

OK...doesn't seem like you want to change those names so - whatever; add this line:

var whichpage = document.URL.substring(7, document.URL.indexOf('.'));
whichpage = whichpage.charAt(0).toUpperCase() + whichpage.substring(1);

[Crash1hd]

ok but this is what has to change

<img name="Login" src="http://www.Alwaysremember.ca/Images/Text/Login.jpg" alt="Login" border="0" /></a>

per page to

<img name="Login" src="http://www.Alwaysremember.ca/Images/Text/LoginDown.jpg" alt="Login" border="0" /></a>

as long as I am at http://login.alwasyremember.ca

[Crash1hd]

Ok sorry took a bit to change all the images to lower case all lower case now! :) and the zip downloaded ok check the js file
here (http://www.alwaysremember.ca/scripts/Header.js)

[cheesebagpipe]

Now we're almost there. You've still got to change the image tags in the script:

http://www.alwaysremember.ca/Images/Text/about.jpg

http://www.alwaysremember.ca/Images/Text/aboutDown.jpg

Don't forget the preloader!

Shouldn't take long...:D

[Crash1hd]

cool :) why do they have to be lowercase??

[cheesebagpipe]

aaarrrgh...they don't :o

var oRegExp = new RegExp('Images\/Text\/' + whichpage + '.jpg', 'gi');

Sorry I've been drinking....

[Crash1hd]

Ok Well Thankyou Thankyou Thankyou :)

one more question can you break this down for me so I can understand fully what its doing

var whichpage = document.URL.substring(7, document.URL.indexOf('.'));
var oRegExp = new RegExp('Images\/Text\/' + whichpage + '.jpg', 'gi');
HTML = HTML.replace(oRegExp, '/Images/Text/' + whichpage + 'down.jpg');

Cause I have to figure out how to change the main title as the pet and weddings ones have different titles

[cheesebagpipe]

var whichpage = document.URL.substring(7, document.URL.indexOf('.'));

Let's say this is the current page URL (of the loaded frame, naturally):

http://memorials.alwaysremember.ca/

The String.substring() method (a function) chops off a section of the whole string described by the argument(s) in the parentheses. In this case, it starts with the seventh character - the 'm' in 'memorials' (JS counts from 0), and extracts the slice up to the number returned by another String method, .indexOf(), which finds the index (position) of the dot ('.') which, in this case, is 16. So you end up with

http://memorials.alwaysremember.ca/

the seventh through fifteenth characters (the last is not included). Then the regular expression is built:

var oRegExp = new RegExp('Images\/Text\/' + whichpage + '.jpg', 'g');

...in this case, it's

Images/Text/memorials.jpg

..and the next line finds that pattern and replaces it with

/Images/Text/memorialsDown.jpg

..or something like that. Go to bed now.