Welcome to WebmasterWorld Guest from 54.159.12.17

Forum Moderators: open

Message Too Old, No Replies

Restoring Popup Window Focus

(using a popup window with embedded anchors)

     

Winedark

11:39 pm on Jul 27, 2003 (gmt 0)

10+ Year Member



I'm implementing a glossary on my site: when a user clicks on a term the glossary page loads in a popup window (loaded to the appropriate term, each of which has an embedded anchor).

In practice, however, if a user clicks on a term and then returns to the main browser window, thereby hiding the glossary window, clicking on additional terms won't return the glossary window to the front as I'd like it to.

I'm sure this is happening because subsequent links to the glossary are simply jumping to a new anchor on the same page rather than actually reloading the page.

Can anyone suggest some code that will allow the popup to "reload completely" when it is linked to subsequently?

I'm not very javascript savvy - more of a cut & paste type at the moment. I'd like, however, to keep the solution valid XHTML 1.0 Strict.

------------------------------------------------

Right now I'm using the code below to create the popup:

<a href="../glossary.html#sampleterm" class="term" onclick="window.open(this.href, 'glossarypopup', 'width=400,height=300,scrollbars,resizable'); return false;">Sample Term</a>

with

onLoad="window.focus()"
in the body tag of the glossary page.

Anyone?

MonkeeSage

11:57 pm on Jul 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Winedark:

Try this:

<a href="../glossary.html#sampleterm" class="term" onclick="var w=window.open(this.href, 'glossarypopup', 'width=400,height=300,scrollbars,resizable'); w.focus();">Sample Term</a>

window.open() returns the object of the window it opens, which is why you needed the "return false;" so that it didn't interpret the returned object as HTML and write it to the parent window's view.

But if you set the return to a variable, you don't have to use the "return false;", and then you can access the new window's methods from the variable (e.g., "w.focus();" ). This is called window 'aliasing'. Hope that helps.

Shelumi`El
Jordan

S.D.G

Winedark

12:14 am on Jul 28, 2003 (gmt 0)

10+ Year Member



Thanks for your reply.

However, when I replaced my old links with the code you suggested it doesn't seem to function correctly: now, clicking on the popup link does indeed launch the popup window, but then a moment later the main browser window loads the glossary page itself and moves to the front automatically.

If I back up in the main window, then click on a new term, the popup does indeed come to the front again - but just for an instant, before the main browser window loads the glossary itself and returns to focus.

Any more ideas?

Winedark

12:23 am on Jul 28, 2003 (gmt 0)

10+ Year Member



hmmm... adding "return false;" to the end of the code seems to allow it to function normally now.

<a href="../glossary.html#sampleterm" class="term" onclick="var w=window.open(this.href, 'glossarypopup', 'width=400,height=300,scrollbars,resizable'); w.focus(); return false;">Sample Term</a> 

But is this still valid?

MonkeeSage

12:26 am on Jul 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Winedark:

Ahh, I am stupid...sorry about that. The reason why the "return false;" is in there is to cancel the click on the link, not to void the returned window object (though it did that also). I didn't think about the fact that these are links you've got there. Links, when clicked, will load their href...so without the "return false;" to cancel the click event, the main page will load the glossary href itself, as well as opening the popup. That's one problem.

<a href="../glossary.html#sampleterm" class="term" onclick="var w=window.open(this.href, 'glossarypopup', 'width=400,height=300,scrollbars,resizable'); w.focus(); return false;">Sample Term</a>

As to the focus issue, try taking out the onLoad="window.focus();" in the glossary page and see what happens.

Shelumi`El
Jordan

S.D.G

MonkeeSage

12:26 am on Jul 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Winedark:

Yes it is valid, it is what ya need actually, I'm just low on brain cells today. ^_^

Shelumi`El
Jordan

S.D.G

Winedark

12:30 am on Jul 28, 2003 (gmt 0)

10+ Year Member



Ah, well many thanks. Everything seems to be in order now... by the way, can I name the variable anything I want, besides "w"?

Thanks again...

MonkeeSage

12:40 am on Jul 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Winedark:

Glad it worked! :)

The "w" is arbitrary, it can be any character, or string. You could use, for example "var fluffyChickens="...or whatever suites your fancy.

Just make sure you get the "var" part in there so that Javascript knows it is a variable and doesn't give you errors / warnings about assigning a value to an undefined variable.

Also, be aware that Javascript uses case sensitive variables, so if you do "var W=" and then try "w.something();" it won't work.

Shelumi`El
Jordan

S.D.G

 

Featured Threads

Hot Threads This Week

Hot Threads This Month