PDA

View Full Version : Javascript popup window help



choice43015
12-14-2008, 01:56 AM
Hello I am new here.
I am also new to JS
and I am trying to enlarge an image in it's own pop up window.

you can see in my gallery page here.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Collectible Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="books.js">
</script>
<script type="text/javascript" src="bookstore1.js">
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="index.html">the Collecter</a></h1>
<h2><a href="index5.html" title="Member Login">Member Login</a> | <a href="index7.html" title="Register">Register</a></h2>

</div>
<div id="menu">
<ul>
<li class="active"><a href="index.html"accesskey="1" title="">Collect</a></li>
<li><a href="index2.html" accesskey="2" title="">Figures</a></li>
<li><a href="index3.html" accesskey="3" title="">Fantasy</a></li>
<li><a href="index4.html" accesskey="4" title="">posters</a></li>
<li><a href="index5.html" accesskey="5" title="">Members</a></li>
</ul>
</div>
</div>
<hr />
<div id="page">
<div id="bg">
<div id="content">
<div class="post" style="padding-top: 57px;">
<h2 class="title">Collectible BUY AND SELL!</h2>
<script type="text/javascript">
document.write("<b>" + Date() + ".</b>")
</script>
<script type="text/javascript" src="Platform.js">
</script>
<div class="entry">
<p align="center">
<script type="text/javascript" src="bookstore2.js">
</script>
</p>
<a href="javascript:void%20window.open('window1.html','popup1','width=420,height=420,top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0');">

</div>
<!-- end page -->

<div id="footer">
<p>(c) 2008 the collecter.com. All rights reserved.</p>
</div>

</body>
</html>


here is my bookstore2.js code


// check for quantities
createBookDB();
if (total_ordered > 0)
{
document.writeln('<a href=index6.html>' + 'view shopping cart</a>');
}
else
{
document.writeln('Shopping cart is empty.');
}
document.writeln('<hr>');

// create the online catalog
for (var n = 0; n < bookDB.length; n ++ )
{
document.writeln('<table width="500">');
document.writeln('<td align="left" height="200" width="156">');
document.writeln('<a href="javascript:void%20window.open(\'' + bookDB[n].number + '\')">');
document.writeln('<img src="' + bookDB[n].imageSrc + '" border="0" ' +
'alt="' + bookDB[n].title + '"></td></a>');
document.writeln('<td><b>' + bookDB[n].title + '</b><br />');
document.writeln('ISBN Number: ' + bookDB[n].number + '<br />');
document.writeln('<i>' + 'Price CAN $' + bookDB[n].price + '</i><br />');
document.writeln('<a href="javascript:addBook(\'' +
bookDB[n].number + '\')">' + '<img src="images / buy.gif" alt="buy" width="50" border="0" height="50" /></a><br /></a></td>');
document.write('</td></tr></table>');
}

and my books.js code


// This file creates common functions for the shopcart.htm
// and bookstore.htm pages

// create two variables
var bookDB = new Array();
var total_ordered = 0;

// create the book object
function book(title, number, price, quantity, lgeImg)
{
this.title = title;
this.number = number;
this.price = price;
this.quantity = quantity;
this.imageSrc = "images/" + number + ".jpg";
this.lgeImageSrc = "images/" + lgeImg + ".jpg";
}

// assign the book information to the book database array
function createBookDB()
{
bookDB[0] = new book("", "01s", 54.99, 0, "01l");
bookDB[1] = new book("", "02s", 14.95, 0, "02l");
bookDB[2] = new book("", "03s", 38.99, 0, "03l");
bookDB[3] = new book("", "04s", 35.99, 0, "04l");
bookDB[4] = new book("", "05s", 32.99, 0, "05l");
bookDB[5] = new book("A ring to bring fortune ", "06s", 48.95, 0, "06l");
bookDB[6] = new book("A fountin in the forest ", "07s", 35.99, 0, "07l");
bookDB[7] = new book("Stones from lore", "08s", 62.95, 0, "08l");
bookDB[8] = new book("rings of old", "09s", 31.99, 0, "09l");
bookDB[9] = new book(" arcane designs", "10s", 63.00, 0, "10l");
checkQuantity();
}

// check quantity function
function checkQuantity()
{
var ordersCookie = findOrder("orders");
if ( ! ordersCookie)
{
return
}
var userOrders = ordersCookie.split("+");
for (var n = 0; n < userOrders.length; n ++ )
{
var orderNum = userOrders[n];
bookDB[n].quantity = orderNum;
if (orderNum > 0)
{
total_ordered ++ ;
}
}
}

// find order function
function findOrder(findName)
{
var entireCookie;
var cookieName;
var cookieValue;
var cookieArray = document.cookie.split("; ");
for (var n = 0; n < cookieArray.length; n ++ )
{
entireCookie = cookieArray[n].split("=");
cookieName = entireCookie[0];
cookieValue = entireCookie[1];
if (cookieName == findName)
{
return unescape(cookieValue);
}
}
return null;
}

I have everything working on this site except the image enlarged through JS code.
any advice would be appreciated.

Thanks

jscheuer1
12-14-2008, 02:09 AM
href="javascript:void%20window.open('window1.html','popup1','width=420,height=420,top=10,left=10,screenX=10,screenY=10,resizable=1,scrollbars=1,menubar=0');"

probably will not work. To have a decent chance, it should be:


href="javascript:void(window.open('window1.html','popup1','width=420,height=420,top=10,left=10,resizable=1,scrollbars=1'));"

However, using href="javascript: . . . is generally a poor idea. But for most cases it should work if written properly as indicated.

There could also be other problems.

choice43015
12-16-2008, 10:53 AM
Well thanks anyways will continue to try on my own
thanks for the idea though.

cheers

jscheuer1
12-16-2008, 03:26 PM
Well, I did say that there could be other problems. To troubleshoot such extensive code, it would be much easier to have a live demo of the problem:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Also, a pop up window is generally not the best method for displaying anything in today's web environment where pop up windows are routinely blocked or modified by the browser without regard to how you code them.

diltony
12-16-2008, 10:23 PM
Analyze this:
<script>
function enlarge(img) {img.style.width="400";}
</script>
<img src="avatar.gif" width=200 onclick="enlarge(this)">