Showing a customized popup

**estado3** · 02-22-2007, 04:00 PM

I am having a look at Eric's popup generator,

<script language="javascript" type="text/javascript">

</script>

and I am wondering how I might be able to amend it so that the popup it shows contains some logos and text (or if there is a script that can allow you to have customised popups), i.e < img scr= http://www.example.com/logo height="200" width="200" > how would I able to amend the above to take note of this (as you can tell I am pretty new to javascript) any help will be appreciated

**jscheuer1** · 02-22-2007, 06:59 PM

The easiest method, is simply to make sure that the page referred to as mypage has those things on it.

**estado3** · 02-22-2007, 08:06 PM

something this:

<script language="javascript" type="text/javascript">

</script>

?

**jscheuer1** · 02-22-2007, 08:51 PM

If you really want to do it that way:

Code:

win=window.open(mypage.html,myname,settings);

It needs to be quoted:

Code:

win=window.open('mypage.html',myname,settings);

But you will still need to specify the parameters in the call.

The original version is only a script to pop up a window. It will be the width, height and in the position you specified in the call in the body of your page and the page will be the page you specified in that call. Example call:

HTML Code:

<a href="some.htm" onclick=NewWindow(this.href,'winpop',300,250,'yes','center');return false;">Some Page</a>

Using it that way, some.htm can have whatever logo or text on it that you like.

**estado3** · 02-22-2007, 09:45 PM

Originally Posted by jscheuer1

If you really want to do it that way:

Code:

win=window.open(mypage.html,myname,settings);

It needs to be quoted:

Code:

win=window.open('mypage.html',myname,settings);

But you will still need to specify the parameters in the call.

The original version is only a script to pop up a window. It will be the width, height and in the position you specified in the call in the body of your page and the page will be the page you specified in that call. Example call:

HTML Code:

<a href="some.htm" onclick=NewWindow(this.href,'winpop',300,250,'yes','center');return false;">Some Page</a>

Using it that way, some.htm can have whatever logo or text on it that you like.

It is a link I intend to open in a popup, hence I was thinking along the lines, that mypage.html is the popup template html, and some.htm would be the link, how would I amend the above to reflect this?

**jscheuer1** · 02-22-2007, 10:08 PM

What sort of template are you talking about? Are you using PHP or some other server side language?

Using just javascript, you can do something like so:

Code:

<script language="javascript" type="text/javascript">
<!--
/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,re sizable=no';
win=window.open("",myname,settings);}
win.document.write('<img src="logo.gif"><br>Some Text');
win.document.write('<br><iframe width="250" height="200" src="'+mypage+'"></iframe>');
win.document.close();
// -->
</script>

You can in fact get quite creative and extensive in designing a document 'on the fly' in this fashion but, some things might not work or may need a certain syntax that might not be obvious to a novice.

**estado3** · 02-23-2007, 10:57 AM

I am trying to follow your guideline suing document.write to include two local html files:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">

</script>
</head>

<body>

<a href="http://www.example.com/site" onclick="NewWindow(this.href,mypage,'400','300','no','center');return false" onfocus="this.blur()">Link</a>

</body>

</html>

I am getting an error on line 20 that win is not null

**jscheuer1** · 02-23-2007, 01:59 PM

There are several problems with that code. The error you are getting is due to th fact that you have the closing brace (red) for the function before the win.document.write statements:

Code:

win=window.open(mypage,myname,settings);}
win.document.write('<p align="right"><iframe width="100" height="100" src="'+top.html+'"></iframe></p>');
win.document.write('<p align="right"><iframe width="100" height="100" src="'+bottom.html+'"></iframe></p>');
win.document.close();

However, once that is fixed, there will be other errors. There is no real need to include those files in an iframe but, you can do it. If you do it that way, the filenames must be literals not variables, unless those variables have previously had their values set. You cannot open the URL represented by the mypage variable (blue) and then write to it without wiping it out. And in your call here:

Code:

<a href="http://www.example.com/site" onclick="NewWindow(this.href,mypage,'400','300','no','center');return false" onfocus="this.blur()">Link</a>

Whatever you use in the field for the page name/window target (red) must be a quoted literal or quoted empty string unless it is a previously defined string variable.

I may have missed something else but, I think those are the biggies. You should also make a better attempt at laying out and styling the contents of your new page/window. I have prepared two examples for you. The first uses the iframes to include local pages, the second just writes the content directly to the pop up window's page. Both do something else you have left out from your code - use an iframe to show the actual page that the pop up call has as its href attribute.

Demo 1:

http://home.comcast.net/~jscheuer1/side/pop_up_h.htm

Demo 2:

http://home.comcast.net/~jscheuer1/side/pop_up2_h.htm

**estado3** · 02-23-2007, 02:59 PM

Thanks a lot

However I am trying to get the content referred by mypage to show up in the centre all the way to the top, with the top.html on the right side of it at the top, and the bottom.html underneath to complete the rectangle

So far my amendments have pushed top.html to the right, but also pushed the content from mypage underneath it:

...
win.document.write('<body style="margin:0;padding:0;">')
win.document.write('<p style="margin:0;padding:0;" align="right"><iframe width="130" height="650" src="top.html" frameborder="0" scrolling="no"></iframe></p>');
win.document.write('<p style="margin:0;padding:0;" align="left"><iframe width="500" height="350" src="'+mypage+'" frameborder="0" scrolling="no"></iframe></p>');
win.document.write('<p style="margin:0;padding:0;"><iframe width="740" height="200" src="bottom.html" frameborder="0" scrolling="no"></iframe></p>');

win.document.close();
win.focus();
}
</script>
</head>

<body>

<a href="http://www.google.com/" onclick="NewWindow(this.href,'mypage','800','700','no','center');return false" onfocus="this.blur()">Link</a>

</body>

</html>

**jscheuer1** · 02-23-2007, 03:40 PM

Your intended layout as you describe it in your post seems slightly contradictory. It is hard for me to imagine both of these things being completely true at the same time:

content referred by mypage to show up in the centre all the way to the top

and:

top.html on the right side of it at the top

unless the centered content doesn't take up the entire width of the pop up but, then it wouldn't technically be centered - it would be able to be made to be in or at least close to the center. Designing our little 'on the fly' page is very much like designing an ordinary page though, it just uses document.write to get the content to the page held in the pop up. Technically there should be a DOCTYPE, html, head, title, etc. But, generally one can get away with only what is needed to get the layout and style one is after.

Something like so (untested) might be close:

Code:

win.document.write('<body style="margin:0;padding:0;">')
win.document.write('<iframe style="margin:0;padding:0;" width="130" height="350" src="top.html" frameborder="0" scrolling="no"></iframe>');
win.document.write('<iframe style="margin:0;padding:0;" width="500" height="350" src="'+mypage+'" frameborder="0" scrolling="no"></iframe>');
win.document.write('<p style="margin:0;padding:0;"><iframe width="740" height="200" src="bottom.html" frameborder="0" scrolling="no"></iframe></p>'

If you could layout an ordinary page to look the way that you want your pop up to look using whatever elements (like iframe, etc.) that you intend to have in the pop up, then that could be translated to the document.write statements. Just make sure that while you are designing this trial page, view it in a window with the same dimensions as the pop up will have so that you can see how things will or will not wrap, etc.

Notes: Using the <p> element will cause a line break but iframes do not unless they are too wide for their containing elements. Floats may also be employed, in which case the line breaking characteristics of <p> and other block level elements like <div> can be altered. The display property can also do this.

Thread: Showing a customized popup

Thread Tools

Search Thread

Showing a customized popup

Bookmarks

Bookmarks

Posting Permissions