| 
	
 | 
 Posted by Gιrard Talbot on 02/06/07 19:51 
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  
<base> is not making sense. 
 
> <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 
--  
Using Web Standards in your Web Pages (Updated Dec. 2006) 
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
 
[Back to original message] 
 |