window.history and pop-ups

[japangreg]

Hey, Everyone. I'm using a single page to handle the images on my site (image size and other atributes are set in the link that opens the page)

When the visitor clicks on a link, I open the picture-handler page in a new window. Then, if they click on another link while the window is still open, the new image loads in the same window. As I've turned off all of the navigation tools in the new window, I use the following code to check to see if the window has held more than one image:

<script language="JavaScript">
if (window.history.length){

//is there a history for this window? If yes, it needs a back button

document.writeln(
"<a href='#' onClick='window.history.back();'> << go back << </a>")

}else{

//no history means no need for back button

document.writeln("&nbsp")
}
</script>


This works perfectly except for one problem; when the user first clicks on a link the image loads without the "<< go back<<" text, as it should. Once the second link is clicked, the text appears and functions correctly. HOWEVER, when the first image is brought up again, the text remains (because the history is still there, even though we are at the first position in it)

I've read that it's impossible to determine where in the history you are; is this true? Also, I've tried adding a function to the onClick with the back button to subtract 1 from the history (hoping to zero it at the starting image) but that didn't work. Can anyone suggest a different approach to this problem?

Thanks!
japangreg

[Mr J]

Could you not have a seperate function for the first link that would simply write

document.writeln(" ")

or something to cancel the history if the first link is selected

[japangreg]

Hey, Mr J. Thanks for the reply.

Actually, that wouldn't work in this context; the window is already open and the code which generates the back button is within the window.

So, to clarify a bit further, a visitor clicks on a link and a new window opens up with the image and no "go back" text below it. They minimize that window and click on another link. The minimized window resizes and loads the new image with the "go back" text below it. When the visitor clicks on the "go back" link, the first image is loaded again, but the "go back" link is still there, even though clicking on it will not go anywhere (as it is the first page in the history) So basically, all of this is taking place in the pop-up window and no longer has anything to do with the page that has the links.

Make sense? Sorry if this is a bit confusing, but it all makes sense to me :)

Thanks again for the reply!

japangreg

[whammy]

Perhaps an idea like this may help?:

http://www.solidscripts.com/displayscript.asp?sid=9

[Mr J]

can you post your url so I can go see this in action,

maybe get ideas to solve problem

[japangreg]

Here, the follwoing link opens the image-handler page with the image name passed to it in the URL. Click on one link and note that there is no "go back" text.
Link1 (http://www.rookalpha.com/picture_pop.html?logo1.gif)

Now change the number at the end of the URL to 2 (so it would say ?logo2.gif; would use another link as I do on the site, but these forums open all links in new windows) A new image should appear with the text below it. Click on the text and you'll see the first image, but the text remains.

Any one have any ideas?

[japangreg]

~bump

[japangreg]

@Whammy:
That example is nice, but what I have already performs that function. What I'm trying to do, in terms of that example, is to get the "back" button at the bottom only to appear if there is a page proceeding it and not just stop functioning if there isn't one.

Also, I'm not using query string parsing with this, as I want the code to function with any image in any sequence (although I do use it on the rest of my site) I'm trying to do this through the history object; is it possible to get the current location in the history object?

Thanks for the replies!
japangreg

[beetle]

Originally posted by japangreg
is it possible to get the current location in the history object?No, the history object is one of the most sparse in all the DOM. The IE DOM has only 3 methods and 1 property. The Gecko DOM has 3 additional properties listed.

Reference
IE: http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_history.asp
Gecko: http://www.mozilla.org/docs/dom/domref/dom_window_ref25.html#1017340

As you can see, there is nothing exposed here to help you determine WHERE you are inside the length of the history.

[japangreg]

Hey, Beetle. Nice to see you again. :) You helped me out last time with this same page, in case you don't remember me. Now I'm mucking with it again, so I'm glad your here!

Alrighty, if I can't determine where I am in the history, is it possible to alter the contents of the object? For example, could I set a variable and use window.history.length -= 1? (I tried this earlier and no go; just trying to illustrate the idea)

Thanks again to everyone who took the time to reply!
japangreg

[beetle]

Hello :)

No, as you can see here (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_history.asp), the length property is read-only.

[japangreg]

Bollucks. Oh well, I guess it won't kill me to have the back text at the bottom of each picture... but now I'm thinking of adding a forward button just because if I'm going to have to have one, hey, why not have two?

Anyhoo, thanks again to everyone. I'll keep trying to sort this out.

japangreg

[ConfusedOfLife]

Hi
Do you insist on using window.history? It's really an easier way to do this. You should keep 2 variables in your main page ( the page that has all the thumbnail pics and by clicking on them you go to the pop-up page:
[list=a]
The current index ( number ) of your image, starting at zero.
Maximum number of images that you've got.
[/list=a]
Now in your pop-up page you should read those 2 variables from the parent window and put the relevant picture in it's place. If the current index ( we call it parent.currIndex from now ) is more than zero, you make your back button:

<input type='button' value="back" onclick='--parent.currIndex; window.location = 'popup.html'>

I also assumed that your popup window ( the window that contains the button ) is called popup.html. By pressing the button it decrements the main value in the main page and reloads itself and because at the begining you read the number of currIndex to put your picture in the page, you always put the right picture in there.
If you wana make your program independent of the main page, you should send your variables by the address bar ( something like window.location=popup.html?logo=2") and you can use Beetle's function. I don't remember the address, but he's kind enough to give it to you!

Hope that it helped :thumbsup:

[japangreg]

Hey, ConfusedOfLife, that's a good idea; I'll take a crack at it and see what happens.

I was hoping to keep all of the code for the pop-up page in the page itself, but I guess a little cross-window interactivity won't hurt. :)

Thanks again to everybody who replied! You guys rock! :thumbsup:

japangreg