createPopup()

[Jack McKalling]

This:

window.createPopup()

Is really, and I mean really cool!! :)But there isn't much explained about it though :(It is in the JavaScript tutorial, HTML DOM object reference, Window-object, the last example.Nothing more Only its syntax... Can it be more explained? I want to use it more efficiently, like opening a file in it. Or like as a tooltip Whatever, but how all?The specs for its location is not difficult. But the others do. Please

[Webworldx]

Hmm. Another IE proprietary thing... Have a look up on the MSDN article site for info on how to use it. I've never found it useful though.

[Jack McKalling]

Example:I want p=window.createPopup() and below it p.document.src="", so I can load a document in it instead of writing it right in this one. This comes in handy when I plan to use it as a Tooltip (like the attribute title="") on hovering one element, or clicking a button (like to show some help info).It also comes in handy when I want to activate the curent window and terminate the popup at the same time, by clicking in the window or popup. This is not possible when I use window.open() or the modelessdialogbox / modaldialogbox.

[Webworldx]

But is it supported in Mozilla? Or are you basing this just for yourself and IE users only?

[Jack McKalling]

IE only yes;)It would be nice if my site will be cross browser, but that is hard since I'm planning to do many things..

[Webworldx]

Apart from the "niceities" of some IE-looking functions, you should be able to make your whole site cross-browser, without too much trouble. After all, that's why you're at w3schools and not IEschools right?

[bradley.lee]

Try this, it is the example window from w3schools shows each atributehttp://www.w3schools.com/js/tryit.asp?file...s_openallwindow

[Jack McKalling]

No bradley.lee, you haven't read my explanation.window.open() is not what I want, window.createPopup() is.

[aaronjones3593]

No bradley.lee, you haven't read my explanation.window.open() is not what I want, window.createPopup() is.

<{POST_SNAPBACK}>

Only way i can think of is something like bradly.lee's approach.

var someWindow = window.open("somepage.htm", "_blank");someWindow.document.writeln("Hello"); // Would write "Hello" into the POPUP windowsomeWindow.alert("Hello"); // Would create an alert box in the POPUP window

I know this works before because I have used it in my JavaScript Login and Admin Management Software...

[Jack McKalling]

No.That is really not what I want.Take it I want to have a popup field with explaining text about the hovered element when hovering it :)Exactly when someone hoveres an IMG with a certain ALT specified. The person would get a tooltip there too, wouldn't he :)The popup would be just like another layer on the document, cascading everything that is behind it, not caring about characters that would be cut-off. Like a tooltip which is the text specified in ALT by an IMG, the popup would disappear when you click in the window or the tooltip.As I said before, and I shall say it again: the window.open() is not able to do that. You can't open a window that closes itself when the other window is clicked. Popups do

[Chocolate570]

You mean like what they have onhttp://siteflip.comWhen you highlight over the features links?

[Webworldx]

Was about to suggest floating DIV's....

[Jack McKalling]

Like that indeed, the function overlib() they use

[Chocolate570]

Well, i have no clue how they do that. I haven't checked their source yet. But you probably do now

[Chocolate570]

Ahh! It's a bit too complex if you ask me.http://www.siteflip.com/includes/home.js

[Jack McKalling]

I checked it right away, and indeed, in two years I would not have come cross the first pages :)Lets not care about their sollution, lets care about new lessons, about my way :)I read the example of the .createPopup(), and I understand most of it. But it is just a definition of a new document, defined inside the first document. How about an SRC to an external document I tried it, I am sure of 100%, that it is possible to apply a source to the popup. While the popup showed a blank document field above the window when a source, but nothing when invalid code had been applied.I mean, when I tried to give the popup a source, it did show the popup, but not the file inside. When I tried invalid code for that, then the popup did not show at all. So a source should be possible, I only didn't code it correct. I conclude that an external file for a popup should only be NOT possible when the popup does not show at all, just like when it wasn't valid at all.Before I dig up my test, knows anyone the correct syntax of a source Popup?

[Webworldx]

Going back to a point that was brought up a while back...isn't the whole idea of w3schools to promote cross-browser coding methods....? Why pick a "solution" to your problem that relies on a method that not everyone will be able to take advantage of? I can't see any good reason why you wouldn't wish to invest your time looking into a floating DIV which would provide much better access to your page, and increase your knowledge of coding.For someone who prefers sticking to strict XHTML rules, it seems, why not try something w3c valid?

[Jack McKalling]

Oh, forgot that part. Sorry :)Nevermind then

[Webworldx]

If you still insist on writing a createPopup though, you could always use the_Popup.document.body.innerHTML = "<iframe....?

[Jack McKalling]

Lol! :)Yes indeed... I should have thought about that before..Anyway, try to read this little bit complicated code

function ShowPopup(){var p = window.createPopup()var pbody = p.document.bodypbody.style.verticalAlign="middle"pbody.style.border="4px outset #ffa500"pbody.style.backgroundColor="#eeffaa"pbody.innerHTML = '<ul style="float:left; width:100%; padding:0; margin:0; list-style-type:none">'  + '<li style="display:inline; cursor:default">'  + '<span style="float:left; width:90%; color:black; padding:0.4em 5px">'  + 'Your content</span></li>'  + '<li style="display:inline; cursor:pointer">'  + '<span style="float:right; width:20px; color:navy; padding:0px; border:1px double; border-color:white white black black; '  + 'background-color:#cc6666; font-family:verdana; font-weight:bold; font-size:14px; text-align:center" '  + 'onmouseover="this.style.backgroundColor=\"#ff66cc\";this.style.borderColor=\"black black white white\"" '  + 'onmouseout="this.style.backgroundColor=\"#cc6666\";this.style.borderColor=\"white white black black\"">X</span></li></ul>'pbody.childNodes[0].childNodes[1].onclick = function () { p.show(0,0,0,0,document.body) }p.show(hposition,vposition,width,height,document.body)}

Edited October 18, 2005 by Dan The Prof

[Chocolate570]

Zomgwthbbq?

[aaronjones3593]

Going back to a point that was brought up a while back...isn't the whole idea of w3schools to promote cross-browser coding methods....? Why pick a "solution" to your problem that relies on a method that not everyone will be able to take advantage of?  I can't see any good reason why you wouldn't wish to invest your time looking into a floating DIV which would provide much better access to your page, and increase your knowledge of coding.For someone who prefers sticking to strict XHTML rules, it seems, why not try something w3c valid?

<{POST_SNAPBACK}>

He could try this, I found it on a open source website (i think it was dhtmlcentral) where you mouseover an object and it displays a moving floating div, that moves with the mouse. u can download the source code js file from the website belowDHTML Centralthen click download sourcecode and imagesIt does say it only works for links, but you can use it for anything that supports the onMouseover event, which means it should be cross-browser.

[aaronjones3593]

No.That is really not what I want.Take it I want to have a popup field with explaining text about the hovered element when hovering it :)Exactly when someone hoveres an IMG with a certain ALT specified. The person would get a tooltip there too, wouldn't he :)The popup would be just like another layer on the document, cascading everything that is behind it, not caring about characters that would be cut-off. Like a tooltip which is the text specified in ALT by an IMG, the popup would disappear when you click in the window or the tooltip.As I said before, and I shall say it again: the window.open() is not able to do that. You can't open a window that closes itself when the other window is clicked. Popups do

<{POST_SNAPBACK}>

you CAN close a popup window from another window when it is clicked using the following:

function doPopup(){windowOne = window.open("somepage.htm", "windowOne", define_dimensions_and_sizes_here, "_blank");openedPopup = true;}windowOne = "";openedPopup = false;

Then:

In Main window:<body onfocus="if(openedPopup){windowOne.window.close();}">In popup window:<body onclick="self.opener.openedPopup=false; window.close();">

With the object:

<input type="button" value="Testing" onmouseover="doPopup()">Or<input type="button" value="Testing" onclick="doPopup()">

[Jack McKalling]

You forget that an opened window always has a titlebar, unlike a popup :)But, you're right This way one can

[Chocolate570]

Zomgwthbbq?

<{POST_SNAPBACK}>

What is the node thing? What are parent nodes? Do i need to open a new topic about this? Does anyone have a link to a tut on them? I'm so confused!