PDA

View Full Version : Pop Up Window difficulty pleaaase help.



RylandT
02-14-2008, 02:47 AM
I no, this is a amateur problem one that is possibly worth a laugh for you vets, regardless I'm a graphics and flash guy not a coder (even html/dhtml)

heres my problem.
http://www.dynamicdrive.com/dynamicindex8/popwin.htm
I'm using this script.

I have a Splash (intro) page (located here http://www.kingstonpulse.com/Splash.html) I want my two images on this page to launch my portfolio (located at: http://www.kingstonpulse.com/Portfolio.html) in a pop up window with these specifications obtained by the code generator at the dynamicdrive website listed above (4th line):

<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(mypage,myname,settings);}
// -->
</script>


I want the splash page to have the two images "launchwithintro.jpg and launchwithoutintro.jpg" to launch the popup site and it wont. I even tried just with text at the top and it doesnt even work.

I suck at programming as previously mentioned.. please if some one could help that would be wonderful!!

jscheuer1
02-14-2008, 05:51 AM
It would help if you put the script on the page.

rangana
02-14-2008, 06:06 AM
Hi RylandT,
You could give this script a try:


<script language="javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 475;
w1 = 600;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("name of page you want to open","RylandT","status=0,location=0,menubar=0,toolbar=0,width=600,height=475,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script>


In your page, you could enable it during onLOAD or onClick. The choice is yours!. :D

RylandT
02-14-2008, 06:57 AM
hi. thank for the speedy reply guys.

I tried the code below I put it on both pages and tried it in the head section and the body area and it wouldn't work...


<script language="javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow =

window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,locatio

n=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script>



Here is the code to my Splash page where I am trying to link the images "EnterWithIntro.jpg and EnterWithoutIntro.jpg" to a load http://www.KingstonPulse.com/Portfolio.html in the pop up window.

http://www.KingstonPulse.com/Splash.html


<html>
<head>
<title>index</title>
<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.90">
</head>
<body bgcolor="#333332" link="#0000FF" vlink="#FF0000" text="#000000"

<div id="root" style="position:absolute;top:0;left:0;width:670px;height:461px">
<script>center();</script>
<div style="position:absolute;left:155;top:173;width:382;height:276;">
<table width=382 height=276 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><img height=276 width=382 src="http://www.geocities.com/infimanelite/SPLASHdesign.jpg" border=0 ></td>
</tr></table></div>
<div style="position:absolute;left:251;top:339;width:152;height:80;">
<table width=152 height=80 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=80 width=152 src="http://www.geocities.com/infimanelite/LAUNCHWITHOUTINTRO.jpg" border=0 ></a></td>
</tr></table></div>
<div style="position:absolute;left:410;top:291;width:104;height:71;">
<table width=104 height=71 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=71 width=104 src="http://www.geocities.com/infimanelite/LAUNCHWITHINTRO.jpg" border=0 ></a></td>
</tr></table></div>
</div>
</html>



And heres the code to:
http://www.KingstonPulse.com/Portfolio.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content="">
<meta name="generator" content="SWiSHmax http://www.swishzone.com">
<meta name="description" content="Portfolio">
<meta name="keywords" content="Web Design, Graphic Design, Showcase, Portfolio">
<param name="movie" value="Portfolio.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="1024" height="768"
name="Portfolio" src="Portfolio.swf"
bgcolor="#FFFFFF" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object>
</center>
</body>
</html>



does anyone no how to tell those 2 images to open the Portfolio.html page in a pop up window with the stipulations discussed above?

Thank again, for the help.

rangana
02-14-2008, 07:16 AM
Hi rylandT
What's this script: <script>center();</script>??...It causes errors
Try editing your splash.html page to:

<html>
<head>
<title>index</title>
<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.90">
<script language="javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script>
</head>


<body bgcolor="#333332" link="#0000FF" vlink="#FF0000" text="#000000">
<div id="root" style="position:absolute;top:0;left:0;width:670px;height:461px">
<div style="position:absolute;left:155;top:173;width:382;height:276;">
<table width=382 height=276 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><img height=276 width=382 src="http://www.geocities.com/infimanelite/SPLASHdesign.jpg" border=0 ></td>
</tr></table></div>
<div style="position:absolute;left:251;top:339;width:152;height:80;">
<table width=152 height=80 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=80 width=152 src="http://www.geocities.com/infimanelite/LAUNCHWITHOUTINTRO.jpg" border=0 ></a></td>
</tr></table></div>
<div style="position:absolute;left:410;top:291;width:104;height:71;">
<table width=104 height=71 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=71 width=104 src="http://www.geocities.com/infimanelite/LAUNCHWITHINTRO.jpg" border=0 ></a></td>
</tr></table></div>
</div>

</html>
See if it helps:D

jscheuer1
02-14-2008, 07:34 AM
Hi rylandT
What's this script: <script>center();</script>??...It causes errors
Try editing your splash.html page to:

<html>
<head>
<title>index</title>
<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.90">
<script language="javascript" type="text/javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script> . . .

Could work, the main thing I was saying is that the script:


<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(mypage,myname,settings);}
// -->
</script>

should be on the page if you expect the script to do anything.

Rangana is right about <script>center();</script> just messing things up. Rangana's script may work out better for you though, because its code is less confusing to look at.

However, the script tag requires the type attribute and the language attribute should be omitted, as should the 'hiding' strings. In both of the above scripts I have red highlighted what should be removed and added background highlight to what is missing that I added.

Also, I don't like:


mywindow.moveTo(w,h);

though. The top and left can be set in the specifications, and should be, as more browsers will accept them there, as opposed to a moveTo().

rangana
02-14-2008, 07:37 AM
Anyway, mywindow.moveTo(w,h); could be deleted :D

jscheuer1
02-14-2008, 08:07 AM
Anyway, mywindow.moveTo(w,h); could be deleted :D

Oh sure. But what I was saying, and I haven't gone over any of the code involved here (yours or the code from DD as posted) to see if it really all makes sense, is that if you want left and top coordinates for a new window, they can be specified here:



window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");

in what are know as the specifications. Another tip about these is that, once you specify anything in this section of the window.open() method, anything you leave out is the same as setting it to "no" or 0. So the above would be the same as:


window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","width=768,height=1024");

Although many browsers will ignore it no matter what you do when some of these things, like status and realizable are set to "no" or 0.

The top and left could be added:


window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","top="+h+",left="+w+",width=768,height=1024");

Looking at this, a width and height of 768 and 1024 would be too tall for many monitors (most browsers would then give a shorter window) and not wide enough for some if your goal is to go full screen.

rangana
02-14-2008, 08:14 AM
Okay! Thanks for the input jscheuer1, I never thought that top and left coordinates could be in! Anyway, the height and width is not my desire!, though target=_blank could do it!

I just specify the height and width to full screen as if it was a requirement as coded in post#4... :D

jscheuer1
02-14-2008, 08:18 AM
Yeah. I was just trying to give you some pointers, as you seem well on your way already. And I do understand how it can be difficult to know what parameters to use for things like width, height, etc. dealing with code somebody else posted when perhaps they didn't or really couldn't consider the ramifications of their choices.

rangana
02-14-2008, 08:21 AM
Yes you're right!...I did not use the code he used above because it will bring much confusion to him...and to help him understand..I created a very simple script. :D

My apologies for creating my own...g*..:D

RylandT
02-14-2008, 04:00 PM
you guys are awsum i feel like im in good hands here not only cause of your attention to this post but the fact that I have almost no idea whats being said..


heres what my splash page looks like now..


<html>
<head>
<title>index</title>
<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.90">
<script type="text/javascript">
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
</script>
</head>


<body bgcolor="#333332" link="#0000FF" vlink="#FF0000" text="#000000"

<div id="root" style="position:absolute;top:0;left:0;width:670px;height:461px">
<script>center();</script>
<div style="position:absolute;left:155;top:173;width:382;height:276;">
<table width=382 height=276 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><img height=276 width=382 src="http://www.geocities.com/infimanelite/SPLASHdesign.jpg" border=0 ></td>
</tr></table></div>
<div style="position:absolute;left:251;top:339;width:152;height:80;">
<table width=152 height=80 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=80 width=152 src="http://www.geocities.com/infimanelite/LAUNCHWITHOUTINTRO.jpg" border=0 ></a></td>
</tr></table></div>
<div style="position:absolute;left:410;top:291;width:104;height:71;">
<table width=104 height=71 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td><a href="http://www.kingstonpulse.com/Portfolio.html"><img height=71 width=104 src="http://www.geocities.com/infimanelite/LAUNCHWITHINTRO.jpg" border=0 ></a></td>
</tr></table></div>
</div>

</html>

my splash page isnt the one that i need to open as a pop up with no scroll bar etc though. So wouldn't the code you gave me be better suited to go into the "Portfolio.html" page? just a thought? or are is the script you gave me stipulations to the Portfolio.html - window that will be opened?

because at present my Portfolio.html script looks like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content="">
<meta name="generator" content="SWiSHmax http://www.swishzone.com">
<meta name="description" content="Portfolio">
<meta name="keywords" content="Web Design, Graphic Design, Showcase, Portfolio">
<param name="movie" value="Portfolio.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="1024" height="768"
name="Portfolio" src="Portfolio.swf"
bgcolor="#FFFFFF" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object>
</center>
</body>
</html>


And shouldn't I be drawing some sort of corelation between my two images that need to link to Portfolio.html into the "java script" command itself? So that the script knows that when either of the 2 .jpg links are physically clicked on, then the pop up window for Portfolio.html 'pops up' with the size/attribute stipulations set in the code?

thank for the feedback.

jscheuer1
02-14-2008, 05:33 PM
You cannot open a pop up for a page from that page. Your user could, but then you would have two of that page. The pop up should be opened from the page leading to the page you want to be in the pop up.

And, yes there should be something on your splash page so that when the links are clicked, it opens the portfolio page in the pop up, try changing:


<a href="http://www.kingstonpulse.com/Portfolio.html">

to:


<a onclick="popupwindow();return false;" href="http://www.kingstonpulse.com/Portfolio.html">

Now this doesn't solve the problem of which version of Portfolio.html to open, the one with or the one without the intro, though. If they are two separate pages, you could pass the href to the function:


<a onclick="popupwindow(this.href);return false;" href="http://www.kingstonpulse.com/Portfolio.html">

and change the popupwindow() function to:


function popupwindow(url){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open(url,"RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}

RylandT
02-19-2008, 07:12 PM
john thank you, but I don't think I'm gettin across how much of a newb I am at this.. which page should

<HTML>
function popupwindow(url){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open(url,"RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
</HTML>

be in?

rangana
02-20-2008, 12:08 AM
Since john is not yet around, I could help you out with this.
First, the code is not an HTML file, but a javascript. You could place a javascript either as inline or external.
Just place the code inside your HTML page where you want the pop-up to appear...and in placing, it should be inside a <script type="text/javascript"> </script> tag.

It would appear:


<html>
<head>
<title>MY title</title>
<script type="text/javascript">
function popupwindow(url){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open(url,"RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
</script>
</head>
<body>
YOur contents here
</body></html>


See if it helps :D

jscheuer1
02-20-2008, 04:40 AM
john thank you, but I don't think I'm gettin across how much of a newb I am at this.. which page

I just looked at your Splash.html file and it goes there, and you have it there. However, remove the dots (highlighted):


<html>
<head>
<title>index</title>
<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.90">
<script language="javascript" type="text/javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script> . . .
</head>

And get rid of this (highlighted):


<body bgcolor="#333332" link="#0000FF" vlink="#FF0000" text="#000000"

<div id="root" style="position:absolute;top:0;left:0;width:670px;height:461px">
<script>center();</script>
<div style="position:absolute;left:155;top:173;width:382;height:276;">
<table width=382 height=2

And where you have:


<a href="http://www.kingstonpulse.com/Portfolio.html">

Make it:


<a href="http://www.kingstonpulse.com/Portfolio.html" onclick="popupwindow();return false;">

There could still be other problems, but once you take care of these things, it will be clear if there are or not, and if there are any, what they are will be clearer as well.

RylandT
02-20-2008, 11:24 PM
HOLLY MACRO JOHN, you guys it worked!! thats bloody sexy! the scale is off but ill tinker around with that right now.. and hopefully this will be the last you guys have to hear from me :) thank so much guys!!

RylandT
02-20-2008, 11:34 PM
okay, your right there are new problems... I need to have the portfolio to have a 0 margin around it so it hugs all 4 walls of the browser (no white space around the flash file).

Also as you can see I declared in the html and script that I need the window to be 1024-768 in size and it doesnt seem to want to listen...

heres my current Portfolio.html code.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title>index</title>
<meta name="generator" content="Ryland Thiel Showcase">
<script language="javascript" type="text/javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 1024;
w1 = 768;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=768,height=1024,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<center>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="Portfolio" width="1024" height="768">
<param name="movie" value="Portfolio.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="1024" height="768"
name="Portfolio" src="Portfolio.swf"
bgcolor="#FFFFFF" quality="high"
swLiveConnect="true" allowScriptAccess="samedomain"
></embed>
</object>
</center>
</body>
</html>


any ideas?

RylandT
02-21-2008, 02:25 AM
okay i fixed the scalling part i realized i mixed my width and height up...

but i can't remove the white space yet.. it's driving me nutso

jscheuer1
02-21-2008, 02:29 AM
We can and should get rid of this line:


mywindow.moveTo(w,h);

And this one can and should be simplified:


mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=1024,height=768,resizable=0");

to:


mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","top=0,left=0,width=1024,height=768");

That should get the window totally into view and at, or at least as close to full width and height as the monitor and screen will allow.

As for getting rid of margins on the Portfolio.html page. Put this in the head of the Portfolio.html page:


<style type="text/css">
body {
margin:0;
padding:0;
}
</style>

Oh, and get rid of this from the Portfolio.html page:


<script language="javascript" type="text/javascript">
<!--
function popupwindow(){
var mywindow;
var h;
var w;
var h1;
var w1;
h1 = 768;
w1 = 1024;
h = screen.height;
w = screen.width;
h = ((h/2) - (h1/2));
w = ((w/2) - (w1/2));
mywindow = window.open("http://www.kingstonpulse.com/Portfolio.html","RylandT","status=0,location=0,menubar=0,toolbar=0,width=1024,height=768,resizable=0");
mywindow.moveTo(w,h);
}
//-->
</script>

Now, you really should consider making the Flash smaller, and making it so it fills 100% of the window, rather than requiring the window to be of specific dimensions.