javascript:history.go

[inetwebguy]

I have a client who wanted me to add "Forward" and "Back" history buttons to his webiste. Which I did. What he wants now is for the navigation button to only display if it is applicable. For instance, if they enter the site the back button would display, but not the forward. If they went forward and came back, both the back and forward buttons would display.

Here is my current nav code:

<A HREF="javascript:history.go(-1)">
<IMG SRC="(CGIVAR)images_path(/CGIVAR)/site/back.gif"
BORDER="0"></A>
<A HREF="javascript:history.go(1)">
<IMG SRC="(CGIVAR)images_path(/CGIVAR)/site/forward.gif"
BORDER="0"></A>

As you can see this method displays the buttons all the time regardless if they can go forward or not.

Can anyone give me some help?

Thanks!

[DJRobThaMan]

I believe if you save the following as a js file it should work (I haven't tested it so I can't be positive). This is also assuming the user's browser can handle this method (all new versions can)


You might want to change the names of the elements as they pertain to your file tho.
var i = 0;
var j = 0;
// call the two next functions with an onClick from the buttons
function back(){
document.history.go(-1);
++j;
--i;
}

function forward(){
document.history.go(1);
++i;
--j;
}
// call this function from the onClick of both buttons
function loadnav(){
if(i == 0){
document.getElementById("navback").style.visibility = "hidden";
document.getElementById("navforward").style.visibility = "hidden";
}
else
if(i > 0){
if(j == 0){
document.getElementById("navback").style.visibility = "visible";
document.getElementById("navforward").style.visibility = "hidden";
}
else
if(j > 0){
document.getElementById("navback").style.visibility = "visible";
document.getElementById("navback").style.visibility = "visible";
}
}
}


Hope this helps

[inetwebguy]

The javascript navigation is currently coded into an (I'll call it an element) that gets called dynamically, sort of like a SSI call.

If I save that code as a .js file how would I refernce it in my "Forward" and "Back" image buttons?

[inetwebguy]

I am more of a designer and less of a programmer. I do have a intelligent grasp on how javascript works but only on a basic level. So any expanded explanations would be GREATLY appreciated!

:)

[DJRobThaMan]

Uhhhmmm.....

I was kind of assuming that both buttons were pictures. So what you could do is put each within a div which you could give two id's (using my code they would be navback and navforward but you can change as desired) and then the code would look something like this...

<div id="navback" onClick="back()" style="visibility:hidden;">
<img src="back pic.gif">
</div>

also, within the style attribute you could write position:relative(or absolute);top:50px;left:20px; or whatever to position them.

Honestly I'm not sure what an SSI call is (do you mean it's some sort of applet???) so I'm not sure if it's different to do that but using a couple pictures in divs seems to me to be a simple way to deal with your problem.

[inetwebguy]

Sorry, I should have given more information originally.

You can see the existing code here

http://www.eletecouture.com/cgi-bin/shop/cp-app.cgi?pg=cat&ref=f_fash_jers

The code I added in my first post is part of a module or element that is getting placed in that location when certain pages get loaded.

They are images, but are not to be displayed at all unless the history is available. Right now they are there all the time regardless if you can go anywhere or not.

So essentially there would be 4 stages;

1) No buttons at all
2) Back Only
3) Forward Only
4) Both Back and Forward

I just cant seem to figure out how to make this work. I guess it really doesnt HAVE to be javascript but that's how they are now so I went in that direction first.

I hope that was a littlle better explanation

BTW,

Thank you BIG TIME already. I've learned so much so far!

Jeff

[DJRobThaMan]

I'm not too sure I understand. I looked at your code and found this ....




<MAP NAME="TITLE_AFFACCT-1x1">
<AREA SHAPE=rect COORDS="368,4,469,61" HREF="#" onClick="window.close();"><AREA SHAPE=rect COORDS="0,0,470,62"></MAP>
<IMG NAME="TITLE_AFFACCT0" SRC="http://www.eletecouture.com/shop/media/images/title/title_store.gif" WIDTH470" HEIGHT="62" BORDER="0" USEMAP="#TITLE_AFFACCT-1x1"><br><br><A HREF="javascript:history.go(-1)">
<IMG SRC="http://www.eletecouture.com/shop/media/images/site/back.gif"
BORDER="0"></A>
<A HREF="javascript:history.go(1)">
<IMG SRC="http://www.eletecouture.com/shop/media/images/site/forward.gif"
BORDER="0"></A><br>


These seem to be what you are using to navigate forward and backward through the site. However, if you werte to reformat a bit you could use my code above and i think it should work.


just instead of anchors, put the pictures inside 2 divs. Then do what I said before with the onClick handler and the style="visibilty:hidden;" and anything else you need to get it wherte it needs to be on the page and you'll be fine.


( NB I did not test the script (made it on the fly while I was at work). However, in essence it is correct. You might have to add a semi-colon here or there if I left one out by accident or something like that. I doubt it tho. You also might want to add a script like

if(document.getElement ById){
my code
}
else
if(document.layers){
my code w/o the use of getElementById
not certain the code for the older netscape browsers but anybody on here can tell you
}

[inetwebguy]

I think I'm missing somthing?

http://www.eletecouture.com/jeff/