Add scrollbar to popup window in OS Commerce

S

Schoolie

I'm running OS Commerce and I've pasted the script below that is used
to "popup" an enlarged image when a user clicks on the image. I need to
add a scrollbar to the popup but don't know how to.

Can anyone help?

<?php
/*
$Id: popup_image.php,v 1.18 2003/06/05 23:26:23 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Modified : 2006-03-09 by Henry Smith <[email protected]>
Changes : Minor enahncement provides proper popup window resizing
based on image, also adds a close window [x] option.

Released under the GNU General Public License
*/

require('includes/application_top.php');
$navigation->remove_current_page();

$products_query = tep_db_query("select pd.products_name,
p.products_image from " . TABLE_PRODUCTS . " p left join " .
TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id
where p.products_status = '1' and p.products_id = '" .
(int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '" .
(int)$languages_id . "'");
$products = tep_db_fetch_array($products_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<link type="text/css" rel="stylesheet" href="/css/stylesheet.css">
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER :
HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<script language="javascript"><!--
var i=0;
function resize() {
if (navigator.appName == 'Netscape') i=40;
if (document.images[0]) window.resizeTo(document.images[0].width +40,
document.images[0].height+120-i);
self.focus();
}
//--></script>
</head>
<body onLoad="resize();">
<p class="smallText" align="center">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>
<a href="javascript:window.close()"><br><u>Close Window</u>
[x]</a></p></p>
</body>
</html>
<?php require('includes/application_bottom.php'); ?>
 
R

Rik

I'm running OS Commerce and I've pasted the script below that is used
to "popup" an enlarged image when a user clicks on the image. I need to
add a scrollbar to the popup but don't know how to.

Can anyone help?

You've pasted the code of the pop-up. Allowing scrollbars (or actually
forbidding scrollbars) is done by javascript on the opening page itself.
Look for a window.open
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Schoolie wrote :
I'm running OS Commerce and I've pasted the script below that is used
to "popup" an enlarged image when a user clicks on the image. I need to
add a scrollbar to the popup but don't know how to.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

Several parts of doctype declaration must NOT be lowercase:

Common Validation Problems:
Using all lowercase letters in a DOCTYPE
http://www.htmlhelp.com/tools/validator/problems.html.en#doctype-case

Recommended DTDs to use in your Web document.
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Also, using a strict DTD for new webpages makes more sense.
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<link type="text/css" rel="stylesheet" href="/css/stylesheet.css">
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER :
HTTP_SERVER) . DIR_WS_CATALOG; ?>">

If this isn't going to be a frame within a frameset, then defining a
<script language="javascript"><!--

language is deprecated while type is both backward and forward-compatible.
So here,

<script type="text/javascript">

is perfect
var i=0;
function resize() {
if (navigator.appName == 'Netscape') i=40;

Relying on userAgent string detection is often unreliable, difficult to
manage and wrong. Here, your detection does not even try to detect more
popular browser like Firefox, Mozilla, Seamonkey (Gecko-family) and
others like Safari.

See
Using Web Standards in your Web Pages
4 Developing Cross Browser/Cross Platform Pages
4.1 Browser identification approach (aka "browser sniffing"): not
best, not reliable approach
4.2 Using Object/Feature support detection approach: best and overall
most reliable

http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

Also

A Strategy That Works: Object/Feature Detecting by comp.lang.javascript
newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html
if (document.images[0]) window.resizeTo(document.images[0].width +40,
document.images[0].height+120-i);
self.focus();

The window already has focus; it's useless and unneeded to set its focus
again. The focus() command has been abused before and many Gecko-based
users turn such js-command off in their user preferences setting.

}
//--></script>
</head>
<body onLoad="resize();">

Everything you need is described in
DOM:window.open
http://developer.mozilla.org/en/docs/DOM:window.open
<p class="smallText" align="center">
<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'],
$products['products_name']); ?>
<a href="javascript:window.close()"><br><u>Close Window</u>

Please do not create a javascript link to close the window: it's
useless, bad javascript usage, wrong, etc.

4.24 I have <a href="javascript:somefunction()"> ... ?
http://jibbering.com/faq/#FAQ4_24

Top Ten Web-Design Mistakes of 2002
6. JavaScript in Links
http://www.useit.com/alertbox/20021223.html

HTML Techniques for Web Content Accessibility Guidelines 1.0
Avoid creating links that use "javascript" as the URI. If a user is not
using scripts, then they won't be able to link since the browser can't
create the link content.
http://www.w3.org/TR/WCAG10-HTML-TECHS/#scripts-gt

See also section 7.2.1
Never use this form of code for links:
<a href="javascript:window.open(...)" ...>
at
http://developer.mozilla.org/en/docs/DOM:window.open

Alternatively, you can try

Open a sub-window and dynamically DOM-insert an image
http://www.gtalbot.org/DHTMLSection/DynamicInsertionDOMImageInPopup.html

Opening enlarged images of different sizes into a single window
http://www.gtalbot.org/DHTMLSection/EnlargeThumbnail.html

Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top