p2p.wrox.com Forums

Need to download code?

View our list of code downloads.


  Return to Index  

beginning_php thread: Creating a Popup without toolbars in Php/MySql using Javascript. - a solution


Message #1 by Jefferis Peterson <jefferis@p...> on Wed, 02 Oct 2002 12:25:09 -0400
My Goal: To create an offset, popup window of a large, variable, picture of
jewelry for a site in development with a black background,  no toolbars and
a variable image.
[To view the page now working in progress:
http://www.yellow-diamonds.com/ViewALL.php  - and click on large view. ]


Problems:
In JavaScript you can create a popup, but passing a variable image from
MySql to the page turned out to be a problem. Since the record set contains
a repeating table of rows of items, the "large imageURL" variable of the
chosen row has to be passed to the popup page as a distinct variable. The
popup could display the image, but you couldn't set the background color.

Opening an existing page ["show_image.php"] with a black background with PHP
via  a link works, but it does not allow you to remove toolbar or set the
window size or placement. And, using onLoad behaviors like a simple
"self.resize" command in javascript causes variable image data to be lost to
the redrawn page.  



Environment: an MySql database [jodenonline] with an inventory and
description of jewelry. Two fields contains links to images in separate
folders [thumbnails and images]. The link information is relative not
absolute; i.e., thumbnails/image1.gif, images/image1.gif, etc.

The record set is created by a query called "viewall" for the entire catalog
sorted by item type [bracelets, rings, brooches, etc.]

Solution:
Opening an existing page {show_image.php} with a black background setting
the parameters for the page with an "onClick" behavior. Turning the variable
image $query data into a new variable called $img and passing that variable
to the page. 
Results: a popup with a set size, no toolbar, somewhat centered on the
monitor. 

Thanks to All for the help, and please check the pages for browser
consistency.  Relevant $query page and popup page code follows.

Jeff
~~~~~~~~~~~~~~~~~~~~~
Query Page: ViewALL.PHP

  <?php require_once('Connection.php'); ?>
<?php
$currentPage = $HTTP_SERVER_VARS["PHP_SELF"];

$maxRows_viewall = 10;
$pageNum_viewall = 0;
if (isset($HTTP_GET_VARS['pageNum_viewall'])) {
  $pageNum_viewall = $HTTP_GET_VARS['pageNum_viewall'];
}
$startRow_viewall = $pageNum_viewall * $maxRows_viewall;

mysql_select_db($database_jodenonline, $jodenonline);
$query_viewall = "SELECT * FROM `Catalog` WHERE `Catalog`.img_status = '1'
ORDER BY `Catalog`.item_type";
$query_limit_viewall = sprintf("%s LIMIT %d, %d", $query_viewall,
$startRow_viewall, $maxRows_viewall);
$viewall = mysql_query($query_limit_viewall, $jodenonline) or
die(mysql_error());
$row_viewall = mysql_fetch_assoc($viewall);

if (isset($HTTP_GET_VARS['totalRows_viewall'])) {
  $totalRows_viewall = $HTTP_GET_VARS['totalRows_viewall'];
} else {
  $all_viewall = mysql_query($query_viewall);
  $totalRows_viewall = mysql_num_rows($all_viewall);
}
$totalPages_viewall = ceil($totalRows_viewall/$maxRows_viewall)-1;

$queryString_viewall = "";
if (!empty($HTTP_SERVER_VARS['QUERY_STRING'])) {
  $params = explode("&", $HTTP_SERVER_VARS['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
    if (stristr($param, "pageNum_viewall") == false &&
        stristr($param, "totalRows_viewall") == false) {
      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) {
    $queryString_viewall = "&" . implode("&", $newParams);
  }
}
$queryString_viewall = sprintf("&totalRows_viewall=%d%s",
$totalRows_viewall, $queryString_viewall);
?>
<html>
<head>
<title>Joden World Resouces Online Catalog www.Joden.com</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</HEAD>
<BODY>

<a href="#"  onclick="MM_openBrWindow('<?php echo
"show_image.php?img={$row_viewall['pictures']}"; $img 
$row_viewall['pictures'];?>','','resizable=yes,width=550,height=400,toolbar
0, left=200, top=150');return false">LargePicturesClick</a>
</BODY>
</HTML>
~~~~~~~~~~~~~~~
PopUpPage.php [show_image.php]

<HTML>
<HEAD> <TITLE>Large View of <?php echo $img; ?></TITLE> </HEAD>
<body   bgcolor="black" text="#FFFFFF" link="#FFFFCC" vlink="#FFFFCC"
alink="#FFFF99"  >
<DIV align="center">
  <IMG src="/<?php echo $img; ?>"><br>
   </DIV>
</BODY>
</HTML>
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year

Message #2 by "Gellings, C.O." <gellingsco@p...> on Wed, 2 Oct 2002 19:07:24 +0200
MSIE 5.0 came up with an error . The line it occurs in:

<!-- enlarge = window.open(largepict,'LargePicture', 'width=400, height=400,
scrollbars=no,resizable=yes,toolbar=0,location=0,directories=0,status=0,'); 
 -->
//newWindow.document.write(" <html> <head> <title>Enlarge
View<\/title><\/head><body bgcolor = black><img src
'images/1-giuliano.gif'></body><\/html> ");
<!-- <!--
 --> -->
<!--
 -->

Somewhat many <!-- and -->
do you have a scriptdebugger installed and activated the debugger in your
browser. I use MSIE 5.0 and Netscape 4.7

Regards Carl

-----Original Message-----
From: Jefferis Peterson [mailto:jefferis@p...]
Sent: 02 October 2002 18:25
To: beginning php
Subject: [beginning_php] Creating a Popup without toolbars in Php/MySql
using Javascript. - a solution


My Goal: To create an offset, popup window of a large, variable, picture of
jewelry for a site in development with a black background,  no toolbars and
a variable image.
[To view the page now working in progress:
http://www.yellow-diamonds.com/ViewALL.php  - and click on large view. ]


Problems:
In JavaScript you can create a popup, but passing a variable image from
MySql to the page turned out to be a problem. Since the record set contains
a repeating table of rows of items, the "large imageURL" variable of the
chosen row has to be passed to the popup page as a distinct variable. The
popup could display the image, but you couldn't set the background color.

Opening an existing page ["show_image.php"] with a black background with PHP
via  a link works, but it does not allow you to remove toolbar or set the
window size or placement. And, using onLoad behaviors like a simple
"self.resize" command in javascript causes variable image data to be lost to
the redrawn page.



Environment: an MySql database [jodenonline] with an inventory and
description of jewelry. Two fields contains links to images in separate
folders [thumbnails and images]. The link information is relative not
absolute; i.e., thumbnails/image1.gif, images/image1.gif, etc.

The record set is created by a query called "viewall" for the entire catalog
sorted by item type [bracelets, rings, brooches, etc.]

Solution:
Opening an existing page {show_image.php} with a black background setting
the parameters for the page with an "onClick" behavior. Turning the variable
image $query data into a new variable called $img and passing that variable
to the page.
Results: a popup with a set size, no toolbar, somewhat centered on the
monitor.

Thanks to All for the help, and please check the pages for browser
consistency.  Relevant $query page and popup page code follows.

Jeff
~~~~~~~~~~~~~~~~~~~~~
Query Page: ViewALL.PHP

  <?php require_once('Connection.php'); ?>
<?php
$currentPage = $HTTP_SERVER_VARS["PHP_SELF"];

$maxRows_viewall = 10;
$pageNum_viewall = 0;
if (isset($HTTP_GET_VARS['pageNum_viewall'])) {
  $pageNum_viewall = $HTTP_GET_VARS['pageNum_viewall'];
}
$startRow_viewall = $pageNum_viewall * $maxRows_viewall;

mysql_select_db($database_jodenonline, $jodenonline);
$query_viewall = "SELECT * FROM `Catalog` WHERE `Catalog`.img_status = '1'
ORDER BY `Catalog`.item_type";
$query_limit_viewall = sprintf("%s LIMIT %d, %d", $query_viewall,
$startRow_viewall, $maxRows_viewall);
$viewall = mysql_query($query_limit_viewall, $jodenonline) or
die(mysql_error());
$row_viewall = mysql_fetch_assoc($viewall);

if (isset($HTTP_GET_VARS['totalRows_viewall'])) {
  $totalRows_viewall = $HTTP_GET_VARS['totalRows_viewall'];
} else {
  $all_viewall = mysql_query($query_viewall);
  $totalRows_viewall = mysql_num_rows($all_viewall);
}
$totalPages_viewall = ceil($totalRows_viewall/$maxRows_viewall)-1;

$queryString_viewall = "";
if (!empty($HTTP_SERVER_VARS['QUERY_STRING'])) {
  $params = explode("&", $HTTP_SERVER_VARS['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
    if (stristr($param, "pageNum_viewall") == false &&
        stristr($param, "totalRows_viewall") == false) {
      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) {
    $queryString_viewall = "&" . implode("&", $newParams);
  }
}
$queryString_viewall = sprintf("&totalRows_viewall=%d%s",
$totalRows_viewall, $queryString_viewall);
?>
<html>
<head>
<title>Joden World Resouces Online Catalog www.Joden.com</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</HEAD>
<BODY>

<a href="#"  onclick="MM_openBrWindow('<?php echo
"show_image.php?img={$row_viewall['pictures']}"; $img 
$row_viewall['pictures'];?>','','resizable=yes,width=550,height=400,toolbar
0, left=200, top=150');return false">LargePicturesClick</a>
</BODY>
</HTML>
~~~~~~~~~~~~~~~
PopUpPage.php [show_image.php]

<HTML>
<HEAD> <TITLE>Large View of <?php echo $img; ?></TITLE> </HEAD>
<body   bgcolor="black" text="#FFFFFF" link="#FFFFCC" vlink="#FFFFCC"
alink="#FFFF99"  >
<DIV align="center">
  <IMG src="/<?php echo $img; ?>"><br>
   </DIV>
</BODY>
</HTML>
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year



Message #3 by Jefferis Peterson <jefferis@p...> on Wed, 02 Oct 2002 14:41:03 -0400
Hi Carl, can you test it again?  I had a bunch of stuff that was supposed to
be commented out, which apparently ran through and was visible anyway. I got
rid of the extraneous code.   I turned on error detection in MS IE 5.2.2...
Thanks.
Jeff 

http://www.yellow-diamonds.com/ViewALL.php
On 10/2/02 1:07 PM, "Gellings, C.O." <gellingsco@p...> wrote:

> MSIE 5.0 came up with an error . The line it occurs in:
> 
> <!-- enlarge = window.open(largepict,'LargePicture', 'width=400, height=400,
> scrollbars=no,resizable=yes,toolbar=0,location=0,directories=0,status=0,');
> -->
> //newWindow.document.write(" <html> <head> <title>Enlarge
> View<\/title><\/head><body bgcolor = black><img src
> 'images/1-giuliano.gif'></body><\/html> ");
> <!-- <!--
> --> -->
> <!--
> -->
> 
> Somewhat many <!-- and -->
> do you have a scriptdebugger installed and activated the debugger in your
> browser. I use MSIE 5.0 and Netscape 4.7
> 
> Regards Carl

~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year

Message #4 by "Nikolai Devereaux" <yomama@u...> on Wed, 2 Oct 2002 12:04:58 -0700
Hi Jefferis,

I guess I really don't see why things were failing.  Javascript on the client
side controls how the new window should appear (no scrolling, resizeable,
etc..), and PHP on the server side controls how the HTML is generated.

> In JavaScript you can create a popup, but passing a variable image from
> MySql to the page turned out to be a problem. Since the record set contains
> a repeating table of rows of items, the "large imageURL" variable of the
> chosen row has to be passed to the popup page as a distinct variable. The
> popup could display the image, but you couldn't set the background color.

Well, the background color is a property of the HTML that's generated in
show_image.php.  I think that the popup you're talking about was a direct link
to the image itself, not an HTML page that contains the image.

> Opening an existing page ["show_image.php"] with a black background with PHP
> via  a link works, but it does not allow you to remove toolbar or set the
> window size or placement. And, using onLoad behaviors like a simple
> "self.resize" command in javascript causes variable image data to be lost to
> the redrawn page.

Again, these should be parameters you pass to the Javascript function,
window.open().  PHP has no control over these.


I think that the solution you came to is really what we've been leading you to
the whole time -- you can't manipulate the browser window without Javascript
(or some other client-side language), and you need PHP to generate the HTML
behind in the popped-up page.  Pretty standard stuff.

My only suggestion now would be to make each image in the viewALL page a link
to the same popup window that you have the "Large View" text a link to.


take care,

nik

Message #5 by Jefferis Peterson <jefferis@p...> on Wed, 02 Oct 2002 15:21:30 -0400
On 10/2/02 3:04 PM, "Nikolai Devereaux" <yomama@u...> wrote:

> My only suggestion now would be to make each image in the viewALL page a link
> to the same popup window that you have the "Large View" text a link to.
> 
> 
> take care,
> 
> nik


Thanks especially for your help Nik.  I cannot see why this window isn't
replaced. I would expect, since it is a link to show_page.php, an existing
page, it would be replaced. Any suggestions...

Jeff 
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year

Message #6 by "Nikolai Devereaux" <yomama@u...> on Wed, 2 Oct 2002 12:55:43 -0700
> Thanks especially for your help Nik.  I cannot see why this window isn't
> replaced. I would expect, since it is a link to show_page.php, an existing
> page, it would be replaced. Any suggestions...

From the HTML source of ViewALL.php (reformatted by me)

<td width="43%">
  <div align="center">
    <font face="...">
      <a href="images/1-giuliano.gif" target="new">
        <img src='thumbnails/1-giuliano.gif'
             alt="Giuliano  Giuliano Enamel Bracelet"
             border="0">
      </a><br>
    </font>
    <font size="-2" face="...">Giuliano</font>
    <font face="..."><br>
      <font size="-2">1-giuliano</font>
    </font>
  </div>
</td>
<td width="22%">
  <div align="center">
    <font face="..." ></font>
      <a href="#" onclick="MM_openBrWindow(...);return false">
        <font size="-2">Large View</font>
      </a>
    </font>
  </div>
</td>


I'm talking about the first link -- notice that the href is
"images/1-giuliano.gif", not to show_image.php.  This link should be identical
to the link tag surrounding "Large View".


hth,

nik

Message #7 by Jefferis Peterson <jefferis@p...> on Wed, 02 Oct 2002 16:11:01 -0400
Oh... :-)   I'm planing to take out the text link and replace the onclick
behavior with the image. I just hadn't removed it yet.  I was talking about
the pop ups. If the user doesn't close the window, the next Large view he
clicks on will open another pop window and leave the other pop on screen.

Jeff 


On 10/2/02 3:55 PM, "Nikolai Devereaux" <yomama@u...> wrote:

> I'm talking about the first link -- notice that the href is
> "images/1-giuliano.gif", not to show_image.php.  This link should be identical
> to the link tag surrounding "Large View".
> 
> 
> hth,
> 
> nik
> 
> 
> ---

~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year

Message #8 by "Nikolai Devereaux" <yomama@u...> on Wed, 2 Oct 2002 13:25:18 -0700
Two solutions:  onBlur() is a javascript event that happens when a window loses
focus.

You can have the window close itself onBlur(), or when the user brings the
original window (or any other window) back to focus.

The other solution would be to give the popup window a name.  Naming the window
gives you a handle in javascript to manipulate the contents of that window.

You could, using this method, have all the popups appear in the same window.
The window will be created if it doesn't already exist.


take care,

nik

Message #9 by "Gellings, C.O." <gellingsco@p...> on Thu, 3 Oct 2002 01:08:57 +0200
Yip Jeff,
That's done the trick. The popup shows the image aswell, but not larger(?)
If you want it enlarged, set the width or the height of the image to a
specific value, i.e. height="400 px". Do not set height AND width together.

Carl

-----Original Message-----
From: Jefferis Peterson [mailto:jefferis@p...]
Sent: 02 October 2002 20:41
To: beginning php
Subject: [beginning_php] RE: Creating a Popup without toolbars in
Php/MySql using Javascript. - a solution



Message #10 by "Gellings, C.O." <gellingsco@p...> on Thu, 3 Oct 2002 01:13:54 +0200
Jeff,

When I click the 'Jewelry' I get a new window - full size - with the image
at it's normal size on a white back ground (IE 5.0 & Netscape 4.7). Is that
what you wanted aswell???

Carl

Message #11 by Jefferis Peterson <jefferis@p...> on Wed, 02 Oct 2002 19:29:55 -0400
On 10/2/02 7:13 PM, "Gellings, C.O." <gellingsco@p...> wrote:

> Jeff,
> 
> When I click the 'Jewelry' I get a new window - full size - with the image
> at it's normal size on a white back ground (IE 5.0 & Netscape 4.7). Is that
> what you wanted aswell???
> 
> That's done the trick. The popup shows the image aswell, but not larger(?)
> If you want it enlarged, set the width or the height of the image to a
> specific value, i.e. height="400 px". Do not set height AND width together.

> Carl

Hi Carl. 

I am eventually going to place the code for the pop up on the jewelry image
itself, the old code was a popup of the large image. The small image you see
with the first image in the database is a problem because it is just not a
full size photo to begin with. I've got to replace the actual image since
I'm not scaling the small images. Just try the 3rd image and you'll see how
they will look.

I'm  working on a multiword  search engine right now

Jeff 

~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year

Message #12 by "Gellings, C.O." <gellingsco@p...> on Thu, 3 Oct 2002 14:40:52 +0200
Ok Jeff,
Searching a MySQL db??
Carl

-----Original Message-----
From: Jefferis Peterson [mailto:jefferis@p...]
Sent: 03 October 2002 01:30
To: beginning php
Subject: [beginning_php] RE: Creating a Popup without toolbars in
Php/MySql using Javascript. - a solution


On 10/2/02 7:13 PM, "Gellings, C.O." <gellingsco@p...> wrote:

> Jeff,
>
> When I click the 'Jewelry' I get a new window - full size - with the image
> at it's normal size on a white back ground (IE 5.0 & Netscape 4.7). Is
that
> what you wanted aswell???
>
> That's done the trick. The popup shows the image aswell, but not larger(?)
> If you want it enlarged, set the width or the height of the image to a
> specific value, i.e. height="400 px". Do not set height AND width
together.

> Carl

Hi Carl.

I am eventually going to place the code for the pop up on the jewelry image
itself, the old code was a popup of the large image. The small image you see
with the first image in the database is a problem because it is just not a
full size photo to begin with. I've got to replace the actual image since
I'm not scaling the small images. Just try the 3rd image and you'll see how
they will look.

I'm  working on a multiword  search engine right now

Jeff

~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year



Message #13 by Jefferis Peterson <jefferis@p...> on Thu, 03 Oct 2002 09:02:53 -0400
On 10/3/02 8:40 AM, "Gellings, C.O." <gellingsco@p...> wrote:

> Ok Jeff,
> Searching a MySQL db??
> Carl


Right.

Jeff
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.net
Tel .  xxx-xxx-xxxx
ICQ 19112253

http://www.Slippery-Rock.com - 7,000 hits per year


  Return to Index