DHTML Window widget (v1.1)

DHTML Window widget (v1.1)

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/


Hi
is it possible to make the scrolling and the resize be hidden on the iframe window, as it does on the div window.

Thanks

To disable the scrollbars that show up within the IFRAME window, you would need to edit the <IFRAME> tag generated by the script directly for this. Inside the .js file:

Code:

---

t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" scrolling="no" name="_iframe-'+t.id+'"></iframe>'

---

The part in red is new, and would accomplish that.

To disable resizing of the DHTML window, you would simply do this by setting resize=0 when calling dhtmlwindow.open():

Code:

---

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

---

hi
thanks for that but what i would idealy like is for there to be the scrowling and the resize on the frame when it first opens, then when the user clicks a link bellow it takes them to another page (preferably) and the frame does not have the scrowling or resize but is still positioned in the same place, can i do this with this? and how?
Thanks

That's possible as well. Firstly, reverse the changes I had mentioned above then. Then, inside the first page opened by the DHTML window, add the function disablescroll() that should get called when a link is clicked on within that page that goes to another. For example, here is the full contents of what the 1st page may look like:

Code:

---

<script type="text/javascript">
function disablescroll(){
parent.googlewin.getElementsByTagName('iframe')[0].scrolling='no'
parent.googlewin.isResize(false)
}
</script>

<a href="test2.htm" onClick="disablescroll()">Go to another page</a>

<div style="height: 800px"></div>

---

When the user clicks the link to go to "test2.htm", the DHTML window will have its scrolling/resize disabled.

Important: "googlewin" should match the variable you assigned when calling dhtmlwindow.open() on your main page, for example:

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 i click the link it goes says no file exists, i have another idea but i don't know if it is possible so when the user has positioned the frame and resized it they click a link bellow and the positioning and the size are then saved in a users account and so that they can be opened again. Is this possible? and how would i do this? i think it would involve mysql is there another way?
Thanks

Well, the link inside test.htm points to test2.htm, so make sure both pages are defined:

Code:

---

<a href="test2.htm" onClick="disablescroll()">Go to another page</a>

---

hi
thanks for your help that now works, also is my other suggestion about saving it above possible? and how?

Thanks

Quote:

---

Originally Posted by ojsimon

hi
i have another idea but i don't know if it is possible so when the user has positioned the frame and resized it they click a link bellow and the positioning and the size are then saved in a users account and so that they can be opened again. Is this possible? and how would i do this? i think it would involve mysql is there another way?
Thanks

---

In general there are two ways to do this, either by using JavaScript cookies, or saving the info on the server end, whether inside a text file or database. If you're talking about an existing database that stores your users account info, then it requires extending those scripts to store this additional info. Either way though, it's highly dependent on how things are set up on your site, and there's no plug and play solution I can offer.

Thanks for that, also how would i output the settings and position if possible as a string.


Thanks

Please can someone help me output the settings as a string so that they can be saved

Thanks

You can capture the attributes settings of a DHTML window by doing something like the below in the .js file:

Code:

---

t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
t.attr=attr

---

The line in red is new, and captures the "attr" parameter's value. So lets say you've opened a DHTML window:

Code:

---

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

---

To get its attribute settings as a string, you would do:

Code:

---

alert(googlewin.attr)

---

To get the left and top position of the DHTML window relative to the upper left corner of the document, you'd just use standard DHTML:

Code:

---

alert(googlewin.style.left+" "+googlewin.style.top)

---

Hi
sorry but what is the string that this will save the settings as? once i have the string for the settings and positionings, how do i recreate one with the same settings.
Thanks

Well the string for the settings would be:

googlewin.attr and googlewin.style.left and googlewin.style.top

What you're asking in terms of saving and recreating a DHTML window ith the same settings though was already discussed earlier. That is, it depends on how the rest of your code that uses the DHTML window is made up, whether you'll be saving this info to a database etc. It's probably complex enough you're talking about hiring a competent programmer to do.

Hi
I know its been a while since i responded to this thread, but i have been busy and only have time now. The original test where it would show the window in another page without the scowling and the resize. I have two problems with this firstly it seems to frame the first one and neither the scrawlers or the resize has been disabled. Secondly it doesnt stay the same size or keep the same position, is this possible?

Here is the code i am running in demo.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://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")

</script>

<script type="text/javascript">
function disablescroll(){
parent.googlewin.getElementsByTagName('iframe')[0].scrolling='no'
parent.googlewin.isResize(false)
}
</script>

<a href="test2.htm" onClick="disablescroll()">Go to another page</a>

<div style="height: 800px"></div>

---

and test2.html

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", "demo.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
</script>

---

Please can you tell me why i am having these problems?


thanks for all your help