Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Configure a new window

Status
Not open for further replies.

bgreen39

Technical User
Oct 29, 2009
59
US
I want to be able to click on a link and have it display a small window containing some instructions. (Or even using onMouseOver= would be nice). But, I can't use window.open() because most browsers block pop-ups. Is there another way?

I was thinking of just using an anchor element <A> with a TARGET=_blank attribute but it doesn't seem I can configure the new window to be smaller without the menu bar, sliders, etc.

Any suggestions?
 
The only way to open a new window and control its features is using Javascript's window.open, however if you don't need an actual window, perhaps a hidden div would work.

It won;t be block by popup blockers since it isn't a window and you can display anything you want in it without requiring an entirely new file.

CSS:
.hiddenDiv{
position:absolute;
display:none;
width:300px;
height:300px;
border:2px solid black;
background-color:#FFFFFF;
}

HTML:
<a href="" onclick="document.getElementById('hiddenDiv').style.display='block'; return false;">Click Me </a><div id="hiddenDiv" class="hiddenDiv" onmouseout="this.style.display='none';">Instructions go here</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Thanks for the tip. I was not aware of the div element.

I tried the code and a small tip box does appear but there is no text inside, just blank. If I click a few times inside the box the text appears but not reliably. Sometimes I get just part of it. Sometimes nothing. (onmouseout works).

Any idea why this is happening?
 
Do you have any other CSS that may be interfering?
Since the background is set to white make sure the text is set to something that contrasts like black.

Code:
.hiddenDiv{
position:absolute;
display:none;
width:300px;
height:300px;
border:2px solid black;
background-color:#FFFFFF;
[red]color:#000000;[/red]
}

Other than that there's no reason it would not be shown. Its just straightforward html.

By the way, divs are the building blocks of websites. it would be a good thing to familiarize yourself with them.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown. 

[url=http://behindtheweb.blogspot.com/] Web & Tech [/url]
 
The problem is a bug in IE9. I read that lots of people are having problems with IE9 so I tried it with IE8 and it works fine.

Thanks Phil.
 
Glad you sorted it out, and i guess I'll have to look into that IE9 bug.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
I'm using window.open and to date I have yet to come across a browser that doesn't open it. The popup blockers generally only block spontaneous popups, not clicked ones. And if a clicked one is blocked, there will appear a message that it was blocked, with the option to have it let through.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
 
I did some more testing with window.open() and I'm getting different results with IE8 and IE9. IE8 works like you say, I allow popups and a new window is opened. However, with IE9, I allow popups but it won't open the window. Same code used to test both IE8 and IE9. One difference is that IE9 is running on a
Win 7 machine, and IE8 is running on an XP machine although I doubt this has anything to do with the different performance.
 
Bugs in IE9 should not be fixed in IE8. Doesn't work that way.

If it's programmed to standards it will AT LEAST display in IE9. Positioning and other small details MIGHT be off. But problems don't get solved by going to an older software.

Darryn Cooke
| Marketing and Creative Services
 
My tests indicate, and other posts I've read claim that bugs have been introduced into IE9. Things that worked in IE8 no longer work in IE9.
 
IE9 doesn't open them? My IE9 (on Win Vista) does on my website, be it not in a popup window but in a new tab. However, I now wonder whether there are sub versions of IE9. Could you try to open the bottom link (recommended forums) on and let me know?

Thanks in advance.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS:
 
I can't seem to find any links that use the javascript function window.open. You use the target property of the links. Which of course is not what the OP wants since he can't then control the size and features of the pop-up window and which of course is not prevented by pop-up blockers.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Frank: The bottom link is "these web design forums". I assume you mean this link.

On my XP IE8 machine when I click on this link a new window comes up, not a new tab. (Note: popup blockers turn on).

On my Win 7 IE9 machine a new window does not come up. All I get is a beep. (Note: on this machine popup blockers are turn off).

I also noted as did vacunita, that in a search of the code on your page, I found no window.open.
 
The code is as follows:
Code:
For free help with your personal case, post your question on one of
<a href="javascript:void(0);" onclick="PopupCenter('forums-overview.html','Poppert',550,550);">these web design forums</a>

(...)

script type="text/javascript" src="x-files/showOverview.js"></script>

with PopupCenter being the following function in showOverview.js:
Code:
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

This is a Javascript that is at least 10 years old, uses normal techniques as you can see for yourself, and has always worked. So I am stumped that it doesn't work in your IE9 with the popup blocker off ! Could you give me the first three digits of your IE9's version number (e.g. 9.0.8)? And how about FF on Win 7?
 
Addendum: with one setting change I even made my IE9 open a real popup rather than a new tab. See here: The setting I changed was: Internet Options > Tabs > Settings > 'Always open pop-ups in a new window'. And I have the popup blocker ON....
 
My IE9 rev is 9.0.8112.16421. I'm not sure what "FF on Win 7" means. I'm not sure what my problem is but I ran out of time and changed my implementation and moved on.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top