createPopup() can only create one popup

  • Thread starter Thread starter Alex Rau
  • Start date Start date
A

Alex Rau

When using the createPopup() function I can not use it to
make more than one visible popup on the screen at a time.
For example, the following will not show two popup
windows.
<script>
/* popup1 */
var menuPopup = window.createPopup();
menuPopup.document.body.innerHTML="pop2";
menuPopup.document.body.style.backgroundcolor="blue";
menuPopup.show(200, 200, 200, 200);

/*popup 2 */
var submenuPopup = window.createPopup();
submenuPopup.document.body.innerHTML='pop1';
submenuPopup.document.body.style.color="red";
submenuPopup.show(100, 100, 20, 20);
</script>

does anyone know how to get around this?
 
When using the createPopup() function I can not use it to
make more than one visible popup on the screen at a time.
For example, the following will not show two popup
windows.
<script>
/* popup1 */
var menuPopup = window.createPopup();
menuPopup.document.body.innerHTML="pop2";
menuPopup.document.body.style.backgroundcolor="blue";
menuPopup.show(200, 200, 200, 200);

/*popup 2 */
var submenuPopup = window.createPopup();
submenuPopup.document.body.innerHTML='pop1';
submenuPopup.document.body.style.color="red";
submenuPopup.show(100, 100, 20, 20);
</script>

does anyone know how to get around this?
Click to expand...

Not sure if this of any use to you, have a look at the source of this URL, might
help - BIG popup generating URL...

http://www.mediaboy.net/1010100-1100001-1111010/gahk/ [Warning - Popups]

HTH


--
siljaline

"Arguing with anonymous strangers on the Internet is a sucker's game
because they almost always turn out to be -- or to be indistinguishable from
-- self-righteous sixteen-year-olds possessing infinite amounts of free time."
- Neil Stephenson, _Cryptonomicon_
 
Hi Alex,

Thank you for the posting.

First, the effect of createpopup() method can be displayed only in IE 5.5
and higher version IE.

Second, The pop-up window is initially in a hidden state. When an element
has focus and creates a popup to appear, the element does not lose focus.
Because of this, an onblur event associated with an element that creates a
popup will not occur when the popup is displayed. Pop-up window can only
have one focus at a time, therefore, if the next pop-up window get the
focus, the previous one will disappear. We can only have one focus at a
time. If the pop-up window lose focus, it cannot display.

By the way, the method in Javascript is case sensitive. Therefore the
letter ¡®C¡¯ in the ¡°backgroundColor¡± should be capitalized. In this way
, you can see the blue background.

To get two windows display correctly, you can use windows.open or other
methods. There are a number of alternatives that you can use to achieve
this functionality:

- Window.open
You can use the window.open method to open a new instance of the browser
with a specific URL, size, and feature set.

- HTML dialogs
You can use the window.showModalDialog and window.showModelessDialog
methods to open dialog boxes that display an HTML page.

- DHTML pop-up Windows
You can use DHTML and scripting to programmatically hide/show DIV tags to
simulate pop-up windows.

- Pop-up object
Beginning with Internet Explorer 5.5, you can use the window.createPopup
method to dynamically create pop-up windows. You can then manipulate the
HTML content and visibility of these windows through script.

For more detailed information, please refer to the following web pages.

open Method
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/open_0.asp

showModalDialog Method
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/showmodald
ialog.asp

showModelessDialog Method
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/showmodele
ssdialog.asp

Build a Pop-up Menu Using Dynamic HTML and JavaScript
http://msdn.microsoft.com/workshop/author/dhtml/popupmenu.asp

popup Object
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp

Hope the above information and suggestion helps and answers your question.
If anything is unclear, please let me know.

Sincerely,

Cherry Qian
MCSE2000, MCSA2000, MCDBA2000
Microsoft Partner Online Support


Get Secure! - www.microsoft.com/security

====================================================
When responding to posts, please Reply to Group via your newsreader so
that others may learn and benefit from your issue.
====================================================
This posting is provided AS IS with no warranties, and confers no rights.
 
Hi Alex,

Thank you for the posting again. As you indicated you want to create a
drop menu that works like the one in IE.

For your convenience and information. I performed further research and
testing on this issue and I am providing you with the following sample code
to create a drop menu.


<HTML>

<HEAD>

<TITLE>Drop Menu</TITLE>

</HEAD>

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>


<p>
<p> <SCRIPT LANGUAGE="JavaScript" >

var IsDroped =false;

function mouseout()

{

window.event.srcElement.style.color = 'white';//when the mouse moves
out,it turns white

}

function mouseover()

{

window.event.srcElement.style.color = 'red';//when the mouse moves
over,it turns red

}

function doMenu(MenuID)

{

var CurMenu = document.all(MenuID);

//To avoid flashing, if the drop menu has been displayed,then cancel
redrawing.

if (IsDroped==true)

{

window.event.cancelBubble = true;

return false;

}

window.event.cancelBubble = true;

TempMenu = CurMenu;

//calculate the location of the drop menu

x = window.event.srcElement.offsetLeft +
window.event.srcElement.offsetParent.offsetLeft;

x2 = x + window.event.srcElement.offsetWidth;

y = pad.offsetHeight;

CurMenu.style.top = y;

CurMenu.style.left = x;

CurMenu.style.clip = "rect(0 0 0 0)";

CurMenu.style.display = "block";

//delay 2 ms and display the menu,in order to guarantee that the
"ToolbarMenu.offsetHeight" has its value
// ,avoiding the situation that when the mouse moves from the main
menu to the drop menu ,the drop menu disappears.

window.setTimeout("showMenu()", 2);

return true;

}

function showMenu()

{

y2 = y + TempMenu.offsetHeight;

TempMenu.style.clip = "rect(auto auto auto auto)";

IsDroped =true;//the drop menu has been displayed

}

function hideMenu()

{

//If the mouse moves in the range of drop menu area ,then the drop menu
won't hide

cY = event.clientY + document.body.scrollTop;

if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||

cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)

{ window.event.cancelBubble = true; return;}

//hide

TempMenu.style.display = "none";

window.event.cancelBubble = true;

IsDroped =false;

}

</SCRIPT>


<p> <DIV ID='menu'
STYLE='position:absolute;background-color:white;width:100%;top:0;left:0;'>

<DIV ID='pad' STYLE='position:relative;height:20;width:100%;font:bold
11pt ??;background-color:#007FFF;color:white;'>

<A TARGET='_top' TITLE='' ID='pad1'

onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad1');">

Menu1 </A>

<SPAN style="color:white"> </SPAN>

<A TARGET='_top' TITLE='' ID='pad2'

onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad2');"

onclick="window.event.returnValue=false;">

Menu2 </A>

</DIV>

</DIV>

<SPAN ID='idpad1'
STYLE='display:none;position:absolute;width:140;background-color:#007FFF;pad
ding-top:0;padding-left:0;padding-bottom:20;z-index:9;'

onmouseout='hideMenu();'>

<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>

<DIV STYLE='position:relative;left:0;top:8;'>

<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='11.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu1-1 </A><BR>

<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='12.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu1-2 </A><BR>

<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='13.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu1-3 </A>

</DIV>

</SPAN>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<SPAN ID='idpad2'
STYLE='display:none;position:absolute;width:140;background-color:#007FFF;pad
ding-top:0;padding-left:0;padding-bottom:20;z-index:9;'
onmouseout='hideMenu();'>

<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>

<DIV STYLE='position:relative;left:0;top:8;'>

<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='21.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu2-1</A><BR>

<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='22.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu2-2</A><BR>

<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

HREF='23.htm' TARGET='_top'

onmouseout="mouseout();" onmouseover="mouseover()">

SubMenu2-3</A><BR>

<HR STYLE='color:white' SIZE=1><!--???-->

<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt
??;color:white'

onclick="parent.close()"

onmouseout="mouseout();" onmouseover="mouseover()">

Exit</A>

</DIV>

</SPAN>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> <!--???????-->

</p>
</BODY>

</HTML>


Hope the above information and suggestion helps and answers your question.
If anything is unclear, please let me know.

Sincerely,

Cherry Qian
MCSE2000, MCSA2000, MCDBA2000
Microsoft Partner Online Support


Get Secure! - www.microsoft.com/security

====================================================
When responding to posts, please Reply to Group via your newsreader so
that others may learn and benefit from your issue.
====================================================
This posting is provided AS IS with no warranties, and confers no rights.
 
Hi Alex,

Thank you for the posting again.

It appears that this is a development-related request that would best be
best addressed in the developer newsgroups. The developer newsgroups are
located at:

http://msdn.microsoft.com/newsgroups/default.asp

If you still want to pursuit on this issue, it is the best you post the
whole code or send the code to us directly and clarify your requirement
clearly so that we can check for you from our side. If you would like to
do so, you can send to (e-mail address removed)

Meanwhile, as it is not actually a pure IE issue but more like a
development issue, to get it resolevd in a more efficient manner, it is the
best you post it in the developer newgroup.

Thank you for your understanding on this. If anything is unclear or if
there is anything further we can help you with from our side, please let me
know.

Sincerely,

Cherry Qian
MCSE2000, MCSA2000, MCDBA2000
Microsoft Partner Online Support


Get Secure! - www.microsoft.com/security

====================================================
When responding to posts, please Reply to Group via your newsreader so
that others may learn and benefit from your issue.
====================================================
This posting is provided AS IS with no warranties, and confers no rights.
 
Back
Top