Question

I would like to achieve the following UI affect, really appreciated for your help or hint.

1) When a link is clicked, a window pops up to its side (preferably relative to the position of the link instead of being fixed). The link is pointed to a php-based URL.

2) The pop-up window should have some “relation” or same “name space” to the original window, for instance, passing mouse events, cross-window “scroll to”, etc.

It is doable across div’s, I am just not sure if it is also true across different windows. I don’t even find something to try with.

I am not an expert of jQuery or Web design in general, so please give your advice with sufficient details for me start. Thanks a lot.

---

Regarding the answers…

First of all, thank you! I am currently testing “opener”…
When I am doing this, I wonder if objects from different windows can be referenced.
For example the following code,

function mse_over()
{
  $('#'+object).css('border', '2px ridge brown');
}

which simply changes the border color of an object.

My question is in child window, can it be done if the object is in parent window (and vice versa). One way doable might be to call “mse_over” from child. But is it possible to directly access objects cross windows? Thank you.

Answer 1

If a window is opened via a link, it is certainly doable to manage the content both from the child to the parent and the reverse.

You need to assign the child window to a javascript object. This example opens a new window and then changes the title of the window:

child_window = window.open('test.php');

$(child_window.document).ready(function () {
  $(child_window.document).contents().find('#title').html('New title');
});

Likewise, you can manage the parent by assigning the window.opener to an object:

parent_window = window.opener

This is core javascript, jQuery just makes some of the selectors and page manipulation a bit easier.