Page 1 of 1

Exit DOM pop up window

Posted: Thu Nov 30, 2006 9:19 pm
by Dr.Goodvibes
I’m using document.createElement(“div”) and zindex to create a Javavscript DOM pop up window.
I can create the window, however I am having trouble removing it.
I have created an element in the toolbar div of the pop up window with an:

Code: Select all

toolBar.onclick=closeWindow()
winBody.appendChild(toolBar)
This does not do what I expected.
The closeWindow function has

Code: Select all

function closeWindow()
{
  winBody.style.display=”none”;
  winBody.visible=false;
}
The problem is that the onclick seems to fire at the point I ‘click’ to create the pop up window.

I have read up about the bubbling effect of the onclick and now I’m just confused.
I’ve not used EventListeners before and finding the whole thing a bit of a mystery.

What I want is for the DOM pop up window to open, then to be able to click on the pop up window exit/close icon in the toolbar of the pop up window to close it.

Examples on the web use HTML div id to anchor the close on or window.open, however all my divs, or more to the point, the whole pop up window is created in javascript (DOM) so it appears to be chicken and egg.

Using other methods I just get winBody has no properites or the window is not displayed, which is probably true as it has not yet been appended to the document.body before it gets 'removed' by the onclick bubbling up.

Sooo… any ideas on how to build an onclick icon into a DOM pop up window that will close it after it has been displayed.

Hope this makes sense and sorry for being so vague. I’d give you an example however nothing I’ve tried remotely works

Posted: Sun Dec 03, 2006 5:13 pm
by Dr.Goodvibes
Ah, Looks like it's more reading on Object Orientated coding.

toolBar.onclick=closeWindow(); is a reference which invokes the function.
toolBar.onclick=closeWindow; is a method which stores/copies the function awaiting envoking.

Big difference.


Given a bit more reading I'm sure 'this' is the key :)

Posted: Sun Dec 03, 2006 10:55 pm
by Dr.Goodvibes
I have constructed the answer I was looking for.

The problem:

I had created a Javascript pop up window, which is appended to the main document body.
This allows me to click on a button and via AJAX return data within the pop up window.
In fact I could click and open multiple pop up windows, but the problem was how to close them.

The Solution: (Here's one I prepared earlier :D )

Code: Select all


function DOMWin(x,y,h,w,title,sessionID){

// Other code....

  var toolBarImg = document.createElement("img");
  toolBarImg.src = exitImage;
  toolBarImg.alt = exitAlt;
  toolBarImg.sid = sessionID;
  toolBarImg.className = exitImg;

  closeButton.ctrl(toolBarImg);

// Other code .....

}

closeButton = new Object();

closeButton.ctrl = function(obj){

  obj.addEventListener("click",closeButton.close,false);
}

closeButton.close = function(){

  var remPop = document.getElementById("pop"+this.sid);
  remPop.style.display = "none";
  remPop.visible = false;
}


The newly created pop up window is allocated an ID. I have called it sessionID, as it is a unique value which I pass to AJAX. You could use the zindex or another unique value.

When you create your first absolute positioned DIV for the pop up, you allocate this value to the id of the DIV. I have chosen to use "pop" and then append the sessionID value.

I then create the toolbar exit image object, which will invoke the handler.
I pass the sessionID to the toolBarImg as sid.

I then passed the toolBarImg object to the Event Listener.
Now when the image is 'clicked' on, the closeButton will search for the DIV id and return it's attributes.

At this point you can hide the display (or move it off the canvas)

The above has only been tested in Firefox, as IE Event Listeners are handled differently.

A real scripter i.e. one that didn't just open the book yesterday like me, will probably be able to correct or enhance the above where I have gone wrong. I invite them to do so.

I just thought I'd share, as there doesn't seem to be much of this sort of stuff out on the net.
It may also help someone else with a head start.


P.S. after thought. You probably don't need to use the getElementById to assist in the change of the display as you already have the details in the object. Doh!