popup page open problem

**jbostrom** · 07-06-2012, 04:23 PM

1) Script Title: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

3) Describe problem: I'm using the Ajax version, attempting to load a local copy of "external.htm" from my own drive. The big problem is that either nothing at all loads (if I use <a href="#") or (if I use <a href="external.htm" a full page loads the same browser window - no border, no title, no sizing or positioning.

Code:
header: (the only files I'm using are dhtmlwindow.css and dhtmlwindow.js. I moved them out of dhtmlwindow folder right into the same root folder as my index.html which is the one that has the popup script.

Code:

<link rel="stylesheet" href="dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

body text versions:
1.

Code:

<a href="#" onClick="ajaxwin=dhtmlwindow.open('Prop1Window', 'ajax', 'external.htm', 'Prop1Title', 'width=650px, height=400px, left=300px, top=100px, resize=0, scrolling=1'); return false">
<img src="prop1/bay view.jpg" width=175px border=1>
</a>

Result: nothing happens on click.
2.

Code:

<a href="external.htm" onClick="ajaxwin=dhtmlwindow.open('Prop1Window', 'ajax', 'external.htm', 'Prop1Title', 'width=650px, height=400px, left=300px, top=100px, resize=0, scrolling=1'); return false">
<img src="prop1/bay view.jpg" width=175px border=1>
</a>

Result: as described above - full window opens, no border, no sizing or position, just the external.htm content

**ajfmrf** · 07-06-2012, 05:10 PM

jbostrom ,please post a url of the problem webpage.

**jbostrom** · 07-06-2012, 05:43 PM

Bud - Thank you for responding so quickly. This is driving me up a wall. The effect I'm going for is like the pages on zillow.com - for example go to http://www.zillow.com/homes/bay-ridge-brooklyn_rb/ and click on one of the dots on the map and then hold your mouse over the first image in the popup to see the window expand. Clicking it also gives a new page. This is what I want, only much simpler - just one popup for each of the four pics on the home page. Each popup will have both little expanding pics and a link to a new page about each location. Dynamic Drive has always been the best source for everything, and I figure this is what I should be using. If there's some other script that would work better please point me to it.

Sorry, though, I can't post a URL - there's too much proprietary info. However the full html for the developer version my page is below, with the proprietary info deleted - and almost every div outlined with a border. If you need anything more specific re: the code, please just ask.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>deleted</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.text {font-family: Helvetica; font-size: 0.8em;}
<link rel="stylesheet" href="dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</style>
</head>

<body>
  <!--LEFT COLUMN -->
  <div id="Left" style="position: absolute; top:20px; left:40px; width:200px; height:600px; border:2px solid red;"> 
	<div id=XNY style="width:200px; margin-top:65px; font:bold 22px Papyrus; text-align:center;
		border:1px solid yellow">
		BIG<br>TAG
	</div><!--XNY-->
   <div id="leftmenu" style="margin: 10px 10px 0 10px; width:180px; height:475px; border:2px solid brown; text-align:center">
   <p class=text style="font:14px Helvetica">
    <BR><BR><BR><BR>
    CLICK ON ANY<BR>
    IMAGE TO GENERATE<br>
    A POPUP WITH  <BR>
    FURTHER DETAILS<BR>
   <BR>
		<div id=call style="margin:180px 10px 0 10px; font:italic 16px Helvetica; border:0px solid brown">
		CONTACT
	</p>
	</div>

   </div><!--leftmenu-->
  </div><!--Left-->
  
  <!--RIGHT COLUMN-->
   <div id="Right" style="position: absolute; top:20px; left: 250px; width:630px; height:760px; border:2px solid red">
     <div id=header style="width:470px; height:90px; border:1px solid yellow; margin-left:0px">
		<a href="index.htm">
	 	<img src="images/name29.png" alt="HEADER" align=left border=1 style="margin-left:3px">
		</a>  
	 </div><!--header--> 
	  <!--MAIN-->
 	 <div id="prop1" 
			style="width:452px; height:133px; margin:8px 10px auto 0; border:3px solid #FFF; padding:0px;">
		<div class=pic style="float:right; width:175px; height:133px; margin:3px 7px auto 0; border:1px solid red;">
			<!--POPUP-->
			<a href="#" onClick="ajaxwin=dhtmlwindow.open('Prop1Window', 'ajax', 'external.htm', 
			'Prop1Title', 'width=50px,height=20px,left=6px,top=5px,resize=0,scrolling=1'); return false">
			<img src="prop1/bay view.jpg" width=175px border=1 alt=deleted title="click!">
			</a>
			<!--POPUP -->
			<!--POPUP2 --
			<script type="text/javascript">
			var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,
			resize=1,scrolling=1,center=1", "recal")
			</script>
			<img src="prop1/bay view.jpg" width=175px border=1 title="click!">
			<!--POPUP2-->
			<!-- POPUP 3
			<script type="text/javascript">
			function openmypage(){ //Define arbitrary function to run desired DHTML Window widget codes
			ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "windowfiles/external.htm", "#3: Ajax Win Title", "width=450px,height=300px,
			left=300px,top=100px,resize=1,scrolling=1")
			ajaxwin.onclose=function(){return window.confirm("Close window 3?")} //Run custom code when window is about to be closed
			}
			</script>
			<a href="#" onClick="openmypage(); return false">
			<img src="prop1/bay view.jpg" width=175px border=1>
			</a>
			--><!--POPUP3-->

		</div>
		<div id=blurbtext class="blurb" 
			style="width:238px; height:90px; margin:15px 10px auto 0; padding:10px; text-align:left; border:1px solid green">
		  <strong>The pic at right is the one I'm trying to generate the popup from. On click, it should load a pop window, which I want to place at right and into which I want to place infor and a more pictures about this location.  Zillow.com has </strong>
		</div>
	 </div>
	 <div id="prop2"
			style="width:452px; height:140px; margin:5px 10px auto 0; border:3px solid #FFF; padding:0px;">
		<div class=pic style="float:right; width:175px; height:135px; margin:3px 7px auto 0; border:1px solid red;">
			<img src="prop2/entrance.jpg" alt=deleted width=175px border=1>
		</div>	
		<div id=blurbtext class="blurb" 
			style="width:238px; height:90px; margin:16px 10px auto 0; padding:10px; text-align:left; border:1px solid green">
		  <strong>deleted</strong>
	</div>
	 <div id="prop3" 
	 	style="width:452px; height:147px; margin:18px 10px auto 0; border:3px solid #FFF; padding:0px;">
		<div class=pic style="float:right; width:175px; margin:auto 7px auto 0; border:1px solid red;">
			<img src="prop3/backview.jpg" a;t=deleted width=175px height=140px border=1 align=right>
		</div>	
		<div id=blurbtext class="blurb" 
			style="width:238px; height:80px; margin:15px 10px auto 0; padding:10px; text-align:left; border:1px solid green">
		  <strong>deleted</strong>
		</div>
	</div>
	<div id="prop4" 
			style="width:452px; height:140px; margin:8px 10px auto 0; border:3px solid #FFF; padding:0px;">
		<div class=pic style="float:right; width:175px; height:135px; margin:auto 7px auto 0; border:1px solid red;">
			<img src="prop4/cabin.jpg" alt=deleted width=175px height=150px border=1 align=right>
		</div>	
		<div id=blurbtext class="blurb" 
			style="width:238px; height:80px; margin:15px 10px auto 0; padding:10px; text-align:left; border:1px solid green">
  		  <strong>deleted </strong>
		</div><!--prop4-->
   </div><!--Right-->
</body>
</html>

**molendijk** · 07-06-2012, 09:08 PM

That sounds as if either your download failed or your files are not in the right folder.
I copied your code, downloaded the required files and everything worked great.
Then I removed dhtmlwindow.js and dhtmlwindow.css, which exactly produced the problematic situation you describe.
I would suggest to create a new folder named 'test', in which you put dhtmlwindow.js and dhtmlwindow.css. Then in your main page:

Code:

<head>
<link rel="stylesheet" href="test/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="test/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>

That should work.
===
Arie.

**jbostrom** · 07-09-2012, 02:51 AM

Thanks - that seemed to be the problem area. I also had a misplaced </style>. Somehow I've now got it working. I even got it to work On Mouseover, but how do I get it to close On Mouseout? I'd also like to get rid of the red title bar at the top of the popupor at least change its color and font. Then I need something that will load more images into the window, making its size expand when someone mouses over an image inside the window - like Zillow. Any ideas?

**bernie1227** · 07-09-2012, 07:37 AM

Well it looks to me like the styles for the title bar are in the css under: .drag-handle
If i understand what you're saying to make it expand when you called the mouseover, you would also put some javascript to expand the size of the window.

**jbostrom** · 07-09-2012, 06:57 PM

Thanks!
Please tell me the code to add in the popup section to get the popup to close OnMouseOut,
Also, I'm now loading the document "../prop1/popup1.htm," which includes the file ../prop1/fireplace-th.jpg. This file loads just fine into browser window, but in the popup, the image is missing.
Here's the code:
Popup Code:

Code:

<a href="#" onMouseover="ajaxwin=dhtmlwindow.open('Prop1Window', 'ajax', 'prop1/popup1.htm', 'Waterfront View of New York City Skyline', 		'width=350px,height=105px,left=670px,top=130px,resize=0,scrolling=0'); return false">
  <img src="prop1/bay view.jpg" width=175px border=1>
</a>

File Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Waterfront View of New York City Skyline</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="width:341px; height:103px; border:1px solid black">
<img src="fireplace-th.jpg" width=150px height=90px align=left style="margin:4px">
A cozy fireplace
</div>
</body>
</html>

Thanks again - this Forum is very helpful.

**bernie1227** · 07-10-2012, 12:06 AM

well I've found this link which may help you, which closes the window using jquery.
here

Thread: popup page open problem

Thread Tools

Search Thread

popup page open problem

Thanks - a few more questions now

Bookmarks

Bookmarks

Posting Permissions