Window widget Keep Position

**ojsimon** · 02-14-2008, 11:24 AM

1) Script Title:
DHTML Window widget (v1.1)

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

3) Describe problem:
Hi
I know i've asked a similar question but on my last one it didn't seem to work. How can i make it so that when i click on a button and have positioned the scrowling and resized it, the script takes me to a new page with the iframe at the same position and same size, but without the resize and scowling options on the frame, so it is fixed

Thanks and sorry for this being slightly repetitive, i have only just been able to start work on this again

Thanks

**ojsimon** · 02-16-2008, 12:07 AM

Hi
in order to try and position it i tried

Code:

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,left=200px,top=150px,resize=0,scrolling=0,center=1", "recal")

This did not work the position is the same, please could you explain?

Thanks

**ojsimon** · 02-17-2008, 12:07 AM

please help

**ddadmin** · 02-17-2008, 03:18 AM

Hi:
Continuing from the suggestions offered here already, I can show you how to store the position of a DHTML window using JavaScript cookies, so a DHTML window's position is remembered and persisted within a browser session.

Firstly, use the below modified dhtmlwindow.js file. It will automatically remember the coordinates of each DHTML window popped up on a page using JavaScript cookies. So lets say on page1.htm, you have:

Code:

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")

When this page unloads, googlewin's coordinates is remembered. Now, lets say on page2.htm, you wish to launch this window again (using the same variable name), plus use the persisted coordinates, you'd do something like:

Code:

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
if (dhtmlwindow.getCookie("googlebox")) //if persisted coordinates exist for this window
alert(dhtmlwindow.getCookie("googlebox"))

In the above case, all I'm doing is alert the persisted coordinates of this DHTML window, so you know it's working. When it comes to actual deployment, you'd instead have:

Code:

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
if (dhtmlwindow.getCookie("googlebox"))
googlewin.moveTo(dhtmlwindow.getCookie("googlebox").split(" ")[0], dhtmlwindow.getCookie("googlebox").split(" ")[1])

In other words, dhtmlwindow.getCookie(googlebox).split(" ")[0] is how you access the "left" coordinate value, and dhtmlwindow.getCookie(googlebox).split(" ")[0], the top coordinate value.

This just forms the premise of how persisting the DHTML window's coordinates would work. It may not be exactly what you're looking for though. The bottom line is, this is a very specific and personal feature set, and we can't do everything for you, only stir you in the right direction. You may need to hire a JavaScript developer if you're not familiar with JavaScript at all to complete the task.

**ojsimon** · 02-18-2008, 05:25 PM

Hi
Thanks for that but it isnt working here is what i am running, but it isn't remebering the positioning of the page in the window, or the size. Also should i put a link between page 1 and 2? How can i make this work?

On page1.htm:

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" lang="en" xml:lang="en">

<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/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>

<div id="somediv" style="display:none">
<p style="height: 400px">This is some content within a DIV, shown inside this window instead</p>
</div>

<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://www.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")




</script>

On page2.htm:

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" lang="en" xml:lang="en">

<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/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>

<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://www.google.com", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
if (dhtmlwindow.getCookie("googlebox"))
googlewin.moveTo(dhtmlwindow.getCookie(googlebox).split(" ")[0], dhtmlwindow.getCookie(googlebox).split(" ")[1])

</script>

Thanks for all your help, Please help me fix this up and sorry for being such a js novice.

Thanks

**ojsimon** · 02-19-2008, 10:20 PM

can anyone help with this?

Thanks

**ojsimon** · 02-20-2008, 10:00 PM

If possible could you attach the files that worked for you.

thanks

**ddadmin** · 02-21-2008, 05:32 AM

Sorry for the delay. The attached dhtmlwindow.js file above is correct. Try the below two HTML pages (page1.htm and page2.htm):

demo1.htm:

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" lang="en" xml:lang="en">

<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/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 type="text/css">

.iframe-googlebox{
overflow: hidden;
}

</style>

<body>

<div id="somediv" style="display:none">
<p style="height: 400px">This is some content within a DIV, shown inside this window instead</p>
</div>

<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")

googlewin.onclose=function(){ //Run custom code when window is being closed (return false to cancel action):
return window.confirm("Close window 1?")
}

</script>

<p>Play around with Window 1 (iframe content)</p>
<ul>
<li><a href="#" onClick="googlewin.show(); return false">Show Window 1</a></li>
<li><a href="#" onClick="googlewin.hide(); return false">Hide Window 1</a></li>
<li><a href="#" onClick="googlewin.load('iframe', 'http://www.cssdrive.com', 'CSS Drive'); return false">Change Window's URL to CSS Drive</a></li>
<li><a href="#" onClick="googlewin.setSize(800, 500); return false">Resize Window to 800px by 600px</a></li>
</ul>


<h3><a href="http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/">DHTML Window Widget- Download and documentation</a></h3>

<a href="demo2.htm">CLick here</a>

demo2.htm:

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" lang="en" xml:lang="en">

<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/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 type="text/css">

.iframe-googlebox{
overflow: hidden;
}

</style>

<body>

<div id="somediv" style="display:none">
<p style="height: 400px">This is some content within a DIV, shown inside this window instead</p>
</div>

<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
if (dhtmlwindow.getCookie("googlebox"))
googlewin.moveTo(dhtmlwindow.getCookie("googlebox").split(" ")[0], dhtmlwindow.getCookie("googlebox").split(" ")[1])
alert(dhtmlwindow.getCookie("googlebox"))
googlewin.onclose=function(){ //Run custom code when window is being closed (return false to cancel action):
return window.confirm("Close window 1?")
}

</script>

<p>Play around with Window 1 (iframe content)</p>
<ul>
<li><a href="#" onClick="googlewin.show(); return false">Show Window 1</a></li>
<li><a href="#" onClick="googlewin.hide(); return false">Hide Window 1</a></li>
<li><a href="#" onClick="googlewin.load('iframe', 'http://www.cssdrive.com', 'CSS Drive'); return false">Change Window's URL to CSS Drive</a></li>
<li><a href="#" onClick="googlewin.setSize(800, 500); return false">Resize Window to 800px by 600px</a></li>
</ul>

View demo1.htm first, drag the window, then click the link at the bottom to go to demo2.htm Notice how the position of the DHTML window on that page is persisted from the last.

**ojsimon** · 02-21-2008, 06:04 PM

Hi
Thanks for that, it works well but it is only the window that stays in position, the scrolling of the site does not stay the same, is there a way to make it so the scroll position on the page is the same on the second page?

thanks

**ddadmin** · 02-21-2008, 10:04 PM

is there a way to make it so the scroll position on the page is the same on the second page?

Do you mean the scroll position of the two pages contained inside the DHTML window, or the two pages page1.htm and page2.htm? If the former, do both these pages reside on your domain (ie: not an external page like http://www.google.com)?

Thread: Window widget Keep Position

Thread Tools

Search Thread

Window widget Keep Position

Bookmarks

Bookmarks

Posting Permissions