PDA

View Full Version : pop-up widows won't work in IE


dolphdawg
07-29-2007, 09:34 PM
Hi All
I'm a newbie with dreamweaver and hope some one can help.
I'm more of a photoshop guy and I staterd working up a web page with some of my work. On this page I have a table with thumbnail images of my work.
when clicked on I want a new browser window to open.
I used the "open browser window" behavior.

It works fine in safari firefox But in IE explorer won't open the windowbecause of pop-up security. am I doing something wrong?
I've attached the code for the page.
the table with the pop-up windows is at the bottom

<div id="apDiv1">

is at the bottom

The second part is the actual popup window... I have pevious and next buttons that don't show up in IE but do show in other browsers.
Thanks for any help you can provide.

—DolphDawg

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>illustration</title>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: Stles2.css" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(../../bgtemps/bgdClouds1.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
position: absolute;
height: 650px;
width: 1000px;
clip: rect(0px,auto,auto,0px);
margin-top: 0px;
margin-left: 0px;
}
#divHead {
height: 141px;
width: 153px;
left: 88px;
top: 64px;
background-image: url(../../bgtemps/images/bgdClouds_03.jpg);
position: absolute;
visibility: visible;
}

#divName {
background-image: url(../../name.jpg);
position: absolute;
height: 114px;
width: 264px;
left: 552px;
top: 69px;
background-repeat: no-repeat;
visibility: visible;
}

-->
</style>
<link href="../../Navbar.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}
#PortNav {
position:absolute;
left:0px;
top:290px;
width:300px;
height:292px;
z-index:2;
background-color: #4492C0;
padding-top: 25px;
padding-right: 150px;
padding-bottom: 75px;
padding-left: 550px;
list-style-type: none;
visibility: visible;
}
#PortNav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#PortNav a {
padding: 4px;
margin-top: 15px;
display: block;
text-decoration: none;
height: 20px;
width: 120px;
margin-bottom: 12px;
text-align: center;
vertical-align: bottom;
background-color: #2E75A1;
list-style-type: none;
color: #A7C9E9;
}
#PortNav a:link {
color: #B3D2ED;
}
#PortNav a:hover {
font-weight: bold;
color: #EEEEEE;
}
#PortNav ul li.current a:link {
color: #EEEEEE;
background-color: #1D346C;
}
#apDiv1 {
position:absolute;
left:26px;
top:331px;
width:482px;
height:291px;
z-index:3;
vertical-align: middle;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #A5D2F5;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body>
<div id="divHead"></div>
<div id="divName"></div>
<div id="navigation">
<ul>
<li><a href="../../about.html">about</a></li>
<li><a href="../../services.html">services</a></li>
<li class="current"><a href="../../Portfolio.htm">portfolio</a></li>
<li><a href="../../contact.html">contact</a></li>
</ul>
<div id="apDiv2"> </div>
</div>
<div id="PortNav">
<ul>
<li><a href="../Advertising/index.html">Advertising</a></li>
<li><a href="../Cover/index.html">Cover Design</a></li>
<li><a href="Javascript:;">Illustration</a></li>
<li><a href="../logos/index.html"> Logo Design</a></li>
<li><a href="../Marketing/index.html">Marketing</a></li>
<li><a href="../photography/index.html">Photography</a></li>
<li><a href="../retouching/index.html">Re-touching</a></li>
</ul>
</div>

<div id="apDiv1">
<center>
<table cellspacing="10" cellpadding="0" border="0">
<tr>
<td width="153" align="center"><a href="Javascript:;" onclick="MM_openBrWindow('pages/01portpopup.htm','pop1','width=650,height=600')"><img src="thumbnails/swanspainTHmb.jpg" width="75" height="64" /></a></td>
<td width="144" align="center"><a href="Javascript:;"><img src="thumbnails/marcColor2.jpg" width="75" height="59" onclick="MM_openBrWindow('pages/02portpopup.htm','pop2','width=650,height=600')" /></a></td>
<td width="129" align="center"><a href="Javascript:;"><img src="thumbnails/Meat1.jpg" width="75" height="75" onclick="MM_openBrWindow('pages/03portpopup.htm','pop3','width=650,height=600')" /></a></td>
<td width="124" align="center"><a href="Javascript:;"><img src="thumbnails/ironTiger.jpg" width="75" height="64" onclick="MM_openBrWindow('pages/04portpopup.htm','pop4','width=650,height=600')" /></a></td>
</tr>
<tr>
<td align="center"><a href="Javascript:;"><img src="thumbnails/treesky1.jpg" width="57" height="75" onclick="MM_openBrWindow('pages/05portpopup.htm','pop5','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/greekColum.jpg" width="75" height="55" onclick="MM_openBrWindow('pages/06portpopup.htm','pop6','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/AntiqCarVect.jpg" width="75" height="48" onclick="MM_openBrWindow('pages/07portpopup.htm','pop7','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/finbarcut2.jpg" width="75" height="61" onclick="MM_openBrWindow('pages/08portpopup.htm','pop8','width=650,height=600')" /></a></td>
</tr>
<tr>
<td align="center"><a href="Javascript:;"><img src="thumbnails/sheet.jpg" width="75" height="56" onclick="MM_openBrWindow('pages/09portpopup.htm','pop9','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/eye.jpg" width="75" height="50" onclick="MM_openBrWindow('pages/10portpopup.htm','pop10','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/duckVector-copy.jpg" width="75" height="50" onclick="MM_openBrWindow('pages/11portpopup.htm','pop11','width=650,height=600')" /></a></td>
<td align="center"><a href="Javascript:;"><img src="thumbnails/BrandFIN.jpg" width="49" height="75" onclick="MM_openBrWindow('pages/12portpopup.htm','pop12','width=650,height=600')" /></a></td>
</tr>
</table>
</center>
<p>Illustration</p>
</div>
<h3>&nbsp;</h3>
</body>
</html>

kate
07-30-2007, 11:37 AM
Did you define your site first?

Is your image in your defined site?

I did this and it works in i.e.

http://www.katesdreamweavercentre.com/dreamwimages/openbrowserwindow.gif

:mrgreen:

the code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body onload="MM_openBrWindow('','','width=280,height=201');MM_o penBrWindow('../millie/milliefrise.jpg','','width=280,height=201')">
</body>
</html>

davidj
07-30-2007, 01:49 PM
you dont need all that shite

function popup(){

window.open("mypage.htm","mypopup","width=400, height=200, toolbar=yes,
location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, copyhistory=yes, resizable=yes");

}

mypage.htm = page you want to popup.
mypopup = name of the window used for targeting if needed later

change attributes to suit

you can use yes, no, 1, 0 to turn options on or off or just omit them all together.

kate
07-30-2007, 01:55 PM
you dont need all that shite



:( I am surprised at you David!

Apart from that I was soon to have my lunch so DW was the quickest route and the poster was new to DW too.

K

davidj
07-30-2007, 02:09 PM
a dreamweaver function !!

im suprised at you!!

window.open() is all you need.

simile alert...

when you break down in a car and you take your motor to a one of those cowboy mechanics who tell you you need a new radiator and injectors and plugs and new pump and new leads and a new engine!... Thats what dreamweaver does when writing JS

all i would do is advise you to clean your points!.... dj's javavascript

davidj
07-30-2007, 02:21 PM
kate my georgous petal... Im sorry for stepping on your toes

i will keep my beak out of this stuff because im more likely to over complicate it

oh... how the hell did you catch that cloud (above)

dolphdawg
07-30-2007, 02:49 PM
Thanks for the replies Kate and David.
It's working now.
I still have part II of my problem:
Once the popup window opens up; at the top I have a table with "previous" and "next" arrows and a link that says "Back" which closes the pop up window.
Again it works fine in Safari, Firefox, aol browsers but NG for IE
here is the link to my test site:

http://homepage.mac.com/whelanart/Sites/ShawnSite/Portfolio.htm


Click on any of the thumbnails from the categories and you can see the problem
If you could give me some insight why this won't work in IE and how to fix I would appreciate it.

The table in question is at the bottom of the code

<div id="PortPix">

Thank you!

<HTML>
<HEAD>
<TITLE>pop7</TITLE>
<META name="generator" content="Adobe Photoshop(R) CS Web Photo Gallery">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#PortPix {
text-align: center;
position: absolute;
left: 0px;
top: 0px;
height: 600px;
width: 650px;
margin: 0px;
padding: 0px;
background-color: #4492C0;
}
body {
position: absolute;
left: 0px;
top: 0px;
}
#PortPix TABLE {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #EEEEEE;
text-align: center;
padding: 0px;
height: 50px;
width: 600px;
position: absolute;
top: 0px;
display: block;
bottom: 10px;
font-weight: bold;
margin: 0px;
float: left;
left: 25px;
right: 25px;
}
#PortP TD {
text-align: center;
background-color: #1D346C;
clear: both;
float: left;
}
#PortPix table TR {
text-align: center;
width: 600px;
display: block;
height: 200px;
}
#apDiv1 {
position:absolute;
width:610px;
height:507px;
z-index:1;
text-align: center;
vertical-align: middle;
top: 60px;
background-color: #DDDDDD;
left: 20px;
right: 0px;
display: block;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #1D346C;
border-right-color: #83BFE0;
border-bottom-color: #83BFE0;
border-left-color: #1D346C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #444444;
}
#apDiv1 img {
text-align: center;
vertical-align: bottom;
}
-->
</style>
<script type="text/javascript">
<!--
function close_window() {
window.close();
}
//-->
</script>
</HEAD>
<BODY bgcolor=#FFFFFF text=#000000 link=#0000FF vlink=#800080 alink=#FF0000>
<div id="PortPix">
<TABLE width= 600 border="0" cellpadding="0" cellspacing="2">
<TR>
<TD align="center" width= 200><A href="06portpopup.htm"><IMG src="../../L_Arrow.gif" height="50" width="80" border="0" alt="Previous"></A></TD>
<TD width= 200 align="center" bgcolor="#1D346C" onClick="close_window()">BACK</TD>
<TD align="center" width= 200><A href="08portpopup.htm"><IMG src="../../R-Arrow.gif" height="50" width="80" border="0" alt="Next"></A></TD>
</TR>
</TABLE></div>
<div id="apDiv1">
<p>&nbsp;</p>
<p><img src="../images/AntiqCarVect.jpg" width="485" height="310"></p>
</div>
&nbsp;
</BODY>
</HTML>

davidj
07-30-2007, 02:59 PM
you have your window.close() function assigned to your BACK button

dolphdawg
07-30-2007, 03:16 PM
Yeah
But I do want it to close.
Back means "back" to the main browser window (by closing the pop up)

If you open it up in IE you don't see the text or images (arrows)
but it works fine in other browsers

davidj
07-30-2007, 03:28 PM
oh right

yeah i noticed that

i would have the text as close rather than back

Mmm not sure why it would be hidden though. Lets wait til one of these CSS showoffs turn up

dolphdawg
07-30-2007, 03:38 PM
Thanks David

Is it OK to re-post in the css/ html forum?

davidj
07-30-2007, 03:40 PM
yes just reword it so it points to your current CSS problem

kate
07-30-2007, 07:23 PM
Im sorry for stepping on your toes

You did'nt and its your show..lmaoooooooooo I am just here making up the numbers..heheehehe

I like the idea of the 'close' on the image so I may steal