PDA

View Full Version : DHTML Modal Window: how to refresh page?



jpayne04
03-05-2007, 06:03 AM
1) Script Title: DHTML Modal Window Script

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

3) Describe problem: I have the script running on a test page that loads an iframe within a div (per the example). This is because I have a flash movie trailer that you click to load in the window. But when I close the modal window the trailer still runs because it's now loaded into the page (of course the window is really just a div ON the page so the content is still active).

What I need to know is how can I use the close button to refresh the page and thus reset the div content and stop the movie from running? I can provide the url of the script if you want.

Thanks in advance

codeexploiter
03-05-2007, 06:37 AM
You can add whatever code you wish (or even it could be function calls) inside a function which is available in the main JS file of the mentioned application


close:function(t)

jpayne04
03-05-2007, 04:36 PM
Thanks, but I'm totally without a clue of the where, whats and whys of modifying the script. I'm basically a designer that can implement the scripts but would not know (in this script) where and what to place to refresh the page on the div's close function (or even where that function needs to be accessed).....

So if you can explain I'd truly appreciate it!

Thanks

jscheuer1
03-05-2007, 05:33 PM
You don't even need to refresh the page, just change the iframe source attribute.

OK, you initialize the script for a modal window something like so (from the demo in the distribution):


var agreewin=dhtmlmodal.open("agreebox", "iframe", "modalfiles/agreement.htm", "This Page's Terms of service", "width=590px,height=450px,center=1,resize=1,scrolling=0", "recal")

agreewin or whatever made up variable name you use now holds this instance of the modal window.

So, after that you can have:


agreewin.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}


The only tricky part here is that the number 0 refers to the first iframe on the page. If you have no other iframes and even if you do, this may be the correct number. However, if you have other iframes on the page that come before the iframe for the modal window, this number would need to be increased until it corresponds to the iframe in question.

So, putting it all together:


<script type="text/javascript">
var agreewin=dhtmlmodal.open("agreebox", "iframe", "modalfiles/agreement.htm", "This Page's Terms of service", "width=590px,height=450px,center=1,resize=1,scrolling=0", "recal")

agreewin.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}
</script>

jpayne04
03-05-2007, 06:24 PM
Thanks again, but that doesn't work either. I used the code you gave me exactly as given but the page does not reload (in the example it is the only iframe). Plus I'm using the div so the iframe does NOT autoload. I don't know how to launch the iframe (rather than the autoload) as there is no example code to use.

The examples are here:

With the div; www.questable.com/window_test.html
With the iframe; www.questable.com/test2.html

Thanks again, I appreciate the help!

jpayne04
03-05-2007, 06:39 PM
I should clarify... sorry. It works in FF BOTH ways, but doesn't reload or refres (thus continuing to play the .swf file) in IE 7.0. Since everyone is upgrading to IE 7.0 (or purchasing machines with Vista/IE already installed) I need it to work there as well. I haven't tested on 98 or XP/IE 6.0 since I didn't get past the problems in IE 7.0.....

Thanks for your patience!

jscheuer1
03-05-2007, 06:57 PM
I tried this out. It worked in FF and should work in IE but, I cannot tell for sure because there was some sort of cross domain security problem in that browser. Opera, I cannot be sure either as cross domain scripting of iframe could be the trouble there as well:


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test2</title>
<link rel="stylesheet" href="dhtmlwindow/windowfiles/dhtmlwindow.css" type="text/css" />

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

<link rel="stylesheet" href="dhtmlwindow/modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="dhtmlwindow/modalfiles/modal.js"></script>
</head>

<body>

<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0", "recal")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].src='about:blank';
return true;
}
}
opentrailer()
</script>
<a href="#" onclick="opentrailer(); return false">View Trailer</a>

</body>
</html>


Testing seems to indicate that it will be fine once it is live.

Added:

However, more testing shows that the onclose function doesn't seem to be firing at all so, I cannot be sure what the trouble is. This is different than the behavior described on the demo page. I will need to do a full install of the scripts to see what is causing that. I have other things to do for now so, try the above, it may work once it is live.

jpayne04
03-05-2007, 08:41 PM
Does the same thing as the other iframe test.... really strange as FF works with it fine, but it worked fine with the other solutions you gave me. I truly appreciate this help. I'm not a newbie by any means but this IE 7.0 bug is driving me to distraction.

I can use a regular pop-up I know (and may have to) but this script is definitely a great one! It provides my site with a great look-n-feel and would be useful for audio/video functions as it focuses your attention on what's playing by darkening the background - awesome!

But to make it work, well.........

Thanks again, you rock man!

jscheuer1
03-05-2007, 11:56 PM
It turns out that this business of skipping the onclose event is a feature so that folks can dismiss the window without doing anything if they hit the x.

Just by adding this (red) to modal.js file near the bottom:


forceclose:function(t){ //function attached to default "close" icon of window to bypass "onclose" event, and just close window

dhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closing
t.style.display="none"
this.veilstack--
if (this.veilstack==0) //if this is the only modal window visible on the screen, and being closed
this.interVeil.style.display="none"
if(t.onclose)
t.onclose();
},

Took care of it in IE 7 for the demo I already gave you. However, Opera would only 'fall for that' once. So, I had to add to the demo .htm file for opera:


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
opentrailer()
</script>

I change src= to setAttribute but, that made no difference, it works either way.

So, after changing modal.js, I came up with this page that worked in all three browsers:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<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>

<link rel="stylesheet" href="modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="modalfiles/modal.js"></script>

</head>

<body>


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
opentrailer()
</script>
<a href="#" onclick="opentrailer(); return false">View Trailer</a>

</body>
</html>

jpayne04
03-06-2007, 12:41 AM
Wow! Thanks... it works! Don't shoot me, but how do I keep the window from loading automatically and only on clicking the link?

BTW.... again, very much, thanks!

jscheuer1
03-06-2007, 04:41 AM
That's the easy part. Just remove the red call:


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/ftg.html", "Facing The Giants", "width=460px,height=360px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
opentrailer()
</script>

jpayne04
03-06-2007, 07:38 AM
Thank you.... it works absolutely perfectly! You can see it here at www.questable.com (note: site is being built as we speak).

Thanks so much!

jscheuer1
03-06-2007, 08:08 AM
You made a change as to how the trailer gets loaded, loading it directly instead of having an intermediate page load into the modal window. That's fine but, it makes the workaround I had devised for Opera not work properly. That can be fixed by changing (red):


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "http://www.questable.com/mmedia/FTGtrailer.swf", "Facing The Giants", "width=384px,height=304px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
ftg=dhtmlmodal.open("movietrailer", "iframe", "about:blank", "Facing The Giants", "width=384px,height=304px,center=1,resize=1,scrolling=0")
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
//opentrailer()
</script>

jpayne04
03-06-2007, 05:29 PM
Ah, and thank you... didn't know that changing the first load page would kill off Opera. I decided to lose a step (fewer links is always better) since you showed me how to bypass the autoloading of the iframe. The extra page was to keep the .swf file from starting with the pageload.

Thanks again!

jscheuer1
03-07-2007, 04:44 AM
You still have a problem with Opera. You didn't follow my instructions (they could have been clearer). Here is what you have now, get rid of the red part:


<script type="text/javascript">
var ftg;
function opentrailer(){
ftg=dhtmlmodal.open("movietrailer", "iframe", "mmedia/FTGtrailer.swf", "Facing The Giants", "width=384px,height=304px,center=1,resize=1,scrolling=0")

ftg.onclose=function(){ //Define custom code to run when window is closed
document.getElementsByTagName('iframe')[0].setAttribute('src', 'about:blank', 0);
if(window.opera&&!ftg.cv){
ftg.cv=1
ftg=dhtmlmodal.open("movietrailer", "iframe", "about:blank", "Facing The Giants", "width=384px,height=304px,center=1,resize=1,scrolling=0")
opentrailer()
dhtmlmodal.close(ftg);
setTimeout("ftg.cv=0", 1000);
}
return true;
}
}
//opentrailer()
</script>

jpayne04
03-07-2007, 05:34 AM
Done!