Close lightbox
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Close lightbox
I have a page that opens in a lightbox that I want to automatically close after a period of time (5 secs)
is there a parameter I can add to the code below to make that happen or is there something in page properties that I need to action.
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650
Cheers
is there a parameter I can add to the code below to make that happen or is there something in page properties that I need to action.
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650
Cheers
- BaconFries
-
- Posts: 5620
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Close lightbox
What lightbox are you using? Have you tried using a event timer? The following url describes how to implement if using fanybox.
https://stackoverflow.com/questions/944 ... -x-seconds
https://stackoverflow.com/questions/944 ... -x-seconds
Re: Close lightbox
Thanks BF, I am using Fancybox.
Do I use the timer and set an event within the timer and if so which one, or set an event in page properties and again which event would close the page after a certain time
Cheers
Do I use the timer and set an event within the timer and if so which one, or set an event in page properties and again which event would close the page after a certain time
Cheers
Re: Close lightbox
Anybody out there have a solution ?
Let me explain what I'm trying to achieve. On my main paige I have a link to a basic survey form that opens in a lightbox, when a visitor completes the survey either a succes or failure page opens within that lightbox if it is the success page then I would like that to close the lightbox/page after a certain amount of time but each event I have tried doesn't do this. I tried placing a timer on the success page with an event that closes the window through the javascript option window.close()., but no luck.
Is there something I can do within web builder that will close the lightbox from the success page.
Cheers
Let me explain what I'm trying to achieve. On my main paige I have a link to a basic survey form that opens in a lightbox, when a visitor completes the survey either a succes or failure page opens within that lightbox if it is the success page then I would like that to close the lightbox/page after a certain amount of time but each event I have tried doesn't do this. I tried placing a timer on the success page with an event that closes the window through the javascript option window.close()., but no luck.
Is there something I can do within web builder that will close the lightbox from the success page.
Cheers
Re: Close lightbox
Maybe this will be helpful?
https://stackoverflow.com/questions/182 ... n-fancybox
https://stackoverflow.com/questions/182 ... n-fancybox
Re: Close lightbox
Thanks Pablo, it looks like those are all click functions and I want it to close the success page when it opens on a set time of 4 seconds.
Also coding and its placement are not any of my strong points and thought there may be a solution within web builder.
On edit:- I tried this javascript within the timer event, no luck. window.setTimeout(function(){$.fancybox.close()},10);
Cheers
Also coding and its placement are not any of my strong points and thought there may be a solution within web builder.
On edit:- I tried this javascript within the timer event, no luck. window.setTimeout(function(){$.fancybox.close()},10);
Cheers
Re: Close lightbox
In that case, I also do not know how to do this.
Re: Close lightbox
If you are using the built in fancybox then just putting your settings in the "lightbox", "fancybox", settings button should suffice then add the last bit. As far as I can see BaconFries has already given you direction, you just need to apply in a way that works, which is often the problem. No I haven't tested it but experimentation gets results especially with fancybox.
Code: Select all
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650,
'onComplete': function(){
setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
}
Re: Close lightbox
Also just looking at that code, the placement of the single quotes I would query. I helped someone last year on something similar and after much experimentation that is what made the difference to the option commands working.
Re: Close lightbox
BillyWiz
The code posted by Rogerl that incorporates the following to your Fancybox settings should close the Lightbox after 4 seconds. You can adjust the timing to suit your requirements.
I tested the code setting up a Slideshow with a picture, changed options to "Lightbox Gallery" and type was "Fancybox". Clicked "Settings" button and entered the code. When previewed and clicking the picture to display, it worked exactly the way you wanted closing automatically after 4 seconds.
Hopefully, all you need to add is that last piece of code that is bold highlighted.
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650,
'onComplete': function(){
setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
}
Regards,
Leo
The code posted by Rogerl that incorporates the following to your Fancybox settings should close the Lightbox after 4 seconds. You can adjust the timing to suit your requirements.
I tested the code setting up a Slideshow with a picture, changed options to "Lightbox Gallery" and type was "Fancybox". Clicked "Settings" button and entered the code. When previewed and clicking the picture to display, it worked exactly the way you wanted closing automatically after 4 seconds.
Hopefully, all you need to add is that last piece of code that is bold highlighted.
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650,
'onComplete': function(){
setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
}
Regards,
Leo
Re: Close lightbox
Thank you Leo and Roger for your replies.
In my original message I stated that I wanted to close the lightbox but was not totally clear on what I wanted to happen.
On my index page I have a link for visitors to click that opens a form in a lighytbox, when they fill in the form and send it an error or success page opens within the lightbox. If the success page opens then I want that page within the lightbox to close after a period of time thereby closing the the success page and the lightbox then the visitor will just see the index page. I hope this has made my query clearer.
The website in question is my signature below and the link to click is near the bottom of the page.
Cheers
In my original message I stated that I wanted to close the lightbox but was not totally clear on what I wanted to happen.
On my index page I have a link for visitors to click that opens a form in a lighytbox, when they fill in the form and send it an error or success page opens within the lightbox. If the success page opens then I want that page within the lightbox to close after a period of time thereby closing the the success page and the lightbox then the visitor will just see the index page. I hope this has made my query clearer.
The website in question is my signature below and the link to click is near the bottom of the page.
Cheers
Re: Close lightbox
you could use the afterClose function. Not sure if this works with early versions of fancybox
or something similar to load up the page of your choice.
Code: Select all
afterClose: function(){
parent.location.href = "page.name"; // i.e. Index.html
},
Re: Close lightbox
Not sure this would work in your setup since you are using a lightbox pop-up for your form but you could use a timer set for a number of seconds on your success page. I have set up a form page in the past with a success and failure page, each one having a timer to re-display the form page when completed. This isn't just closing the lightbox but re-displaying the main page again.
Timer
type: timeout
interval: 5000
Events
Event: ontimer
Action: link
Link to: Page in this project
Page: "your main page to be displayed"
Regards,
Leo
Timer
type: timeout
interval: 5000
Events
Event: ontimer
Action: link
Link to: Page in this project
Page: "your main page to be displayed"
Regards,
Leo
Re: Close lightbox
Thanks for trying guys but neither work for me.
Leo, that code you gave me just opens the index page within the lightbox, I want the lightbox to close.
I think I will leave it to the visitor to click the "X" at the top to close the lightbox window
Leo, that code you gave me just opens the index page within the lightbox, I want the lightbox to close.
I think I will leave it to the visitor to click the "X" at the top to close the lightbox window
Re: Close lightbox
Following up on my earlier hint you could play with the quotes and try:
These things have been tried, just need to find the right combination.
Code: Select all
'afterClose': function(){
parent.location.href = "page.name"; // i.e. Index.html
},
Re: Close lightbox
Thanks Roger,
Let me run through what I have done and you can tell me if its correct.
On the success page that opens in the lightbox I have added a timer set to 4 seconds, in events within the timer I have selected "On timer" run javascript and placed the code you gave me but it doesnt close the lightbox.
If you go to https://www.summitcarhire.com/test and click the link at the bottom of the page "Can we improve, let us know" a lightbox pops up, just tick the recaptcha and a success page comes up thanking the visitor for the feedback, I then want that lightbox to close after 4 seconds so that all the visitor sees is the original index page that they clicked the link on.
Thanks for your input.
Cheers
Let me run through what I have done and you can tell me if its correct.
On the success page that opens in the lightbox I have added a timer set to 4 seconds, in events within the timer I have selected "On timer" run javascript and placed the code you gave me but it doesnt close the lightbox.
If you go to https://www.summitcarhire.com/test and click the link at the bottom of the page "Can we improve, let us know" a lightbox pops up, just tick the recaptcha and a success page comes up thanking the visitor for the feedback, I then want that lightbox to close after 4 seconds so that all the visitor sees is the original index page that they clicked the link on.
Thanks for your input.
Cheers
Re: Close lightbox
The lightbox you open for success has a settings button.
Try this code in there:
and remove the event / timer stuff then preview and see what happens. You could upload your test project (.wbs file) and give me alink to it so I can have a play. It's one step at a time till it all comes right.
Try this code in there:
Code: Select all
'onComplete': function(){
setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
}
Re: Close lightbox
Hi Roger, I think there may be some confusion here, there is only 1 lightbox and that opens from the link on ther index page, all other pages open in that lightbox, not seperate lightboxes. If I alter any settings then I can only do it in the link on the index page by choosing the "open in a lightbox"
Cheers
Cheers
Re: Close lightbox
Yes, do it there then. If I could see your project file I would know better how to help.
Re: Close lightbox
Hi Roger, I have done the project with only the problem elements remaining.
You can see the altered website at https://www.summitcarhire.com/testing
You can download the zip at https://www.summitcarhire.com/wbs/june2020.zip
When the page with "Thankyou for your feedback" appears I want that to close after 4 seconds so that all that's visible is the index page.
Cheers
You can see the altered website at https://www.summitcarhire.com/testing
You can download the zip at https://www.summitcarhire.com/wbs/june2020.zip
When the page with "Thankyou for your feedback" appears I want that to close after 4 seconds so that all that's visible is the index page.
Cheers
Re: Close lightbox
Far easier to see what's happening with the project file, thanks for that. I think this is best handled in the "success" page that could execute a script after page load in the light box. Will have a play later today.
Re: Close lightbox
Guys,
This seems to be harder than expected to resolve. From all the searches I looked at over the weekend regarding closing pop-ups, parent processes from a main page that kick off child processes such as opening a lightbox which open another page (e.g. success page) is another child process. Trying to do windows.close(), windows.parent.close() functions and similar haven't worked in my testing.
From what I read in an article or two "Scripts may not close windows that were not opened by script" (https://medium.com/javascript-in-plain- ... eec56344bb) and (https://developer.mozilla.org/en-US/doc ... ndow/close).
In testing using a timer in the Success page to run javascript to do say a windows.close() function, pressing F12 in the browser would give the results: "Scripts may close only the windows that were opened by them".
I would guess that knowing the parent and child process ID's and being able to do a close function on the desired one would work. For example, the main page with the survey link would be the parent, the child would be the lighbox, and another child would be the success page.
I'm sure closing the lightbox automatically can be done but may require some additional javascript coding to make it functional. Unfortunately, I don't have javascript experience to help in this matter.
If you find a solution, I would love to see how it was done.
Regards,
Leo
This seems to be harder than expected to resolve. From all the searches I looked at over the weekend regarding closing pop-ups, parent processes from a main page that kick off child processes such as opening a lightbox which open another page (e.g. success page) is another child process. Trying to do windows.close(), windows.parent.close() functions and similar haven't worked in my testing.
From what I read in an article or two "Scripts may not close windows that were not opened by script" (https://medium.com/javascript-in-plain- ... eec56344bb) and (https://developer.mozilla.org/en-US/doc ... ndow/close).
In testing using a timer in the Success page to run javascript to do say a windows.close() function, pressing F12 in the browser would give the results: "Scripts may close only the windows that were opened by them".
I would guess that knowing the parent and child process ID's and being able to do a close function on the desired one would work. For example, the main page with the survey link would be the parent, the child would be the lighbox, and another child would be the success page.
I'm sure closing the lightbox automatically can be done but may require some additional javascript coding to make it functional. Unfortunately, I don't have javascript experience to help in this matter.
If you find a solution, I would love to see how it was done.
Regards,
Leo
Re: Close lightbox
Hi Guys,
I believe I have had success!
Couple of things to start:
In page properties for "Survey.php" the default lightbox is not fancybox
In error and success pages it does not have access to jquery or fancybox scripts and there is the complication of child verses parent as outlined above.
I found a script which appears to do the job and this should be inserted in page html, Between <head> and </head> tags on the "error" and "success" pages. Have timeout set to 2 seconds here:
On my test site I have set up for the success page only. Please see:
-- Link removed --
What do you think?
Regards
Roger
I believe I have had success!
Couple of things to start:
In page properties for "Survey.php" the default lightbox is not fancybox
In error and success pages it does not have access to jquery or fancybox scripts and there is the complication of child verses parent as outlined above.
I found a script which appears to do the job and this should be inserted in page html, Between <head> and </head> tags on the "error" and "success" pages. Have timeout set to 2 seconds here:
Code: Select all
<script>
(function(){
// Your URL
var url = 'index.html';
// Delay before the redirect takes place, in seconds
var delay = 2;
window.setTimeout(function() {
window.open(url, '_parent');
}, delay * 1000);
})();
</script>
-- Link removed --
What do you think?
Regards
Roger
Last edited by rogerl on Tue Jun 30, 2020 11:51 pm, edited 2 times in total.
Re: Close lightbox
Hi Guys,
Leo, Roger has cracked it, Happy Days !!
Roger, thank you for your hard work figuring out this task, it works like a dream. I tweaked the code on the error page so that the visitor is taken back to the survey within the lightbox by changing _parent to _self.
Thanks again, it has saved me from opening the survey in a popup which I was reluctant to do.
Cheers
Leo, Roger has cracked it, Happy Days !!
Roger, thank you for your hard work figuring out this task, it works like a dream. I tweaked the code on the error page so that the visitor is taken back to the survey within the lightbox by changing _parent to _self.
Thanks again, it has saved me from opening the survey in a popup which I was reluctant to do.
Cheers
Re: Close lightbox
Enjoyed the challenge, not the frustration!
Thanks for the other update for the error page, that will be useful for something I'm working on as well.
Thanks for the other update for the error page, that will be useful for something I'm working on as well.
Re: Close lightbox
Hi Guys,
A further to as I had a play the other night knowing this would be useful for my site.
I have a common error page called from multiple forms so needed to adapt the script to accommodate that and use your "_self" amendment. So ended up with this:
Works great!
A further to as I had a play the other night knowing this would be useful for my site.
I have a common error page called from multiple forms so needed to adapt the script to accommodate that and use your "_self" amendment. So ended up with this:
Code: Select all
<script>
(function(){
// Your URL
var url = document.referrer;
// Delay before the redirect takes place, in seconds
var delay = 4;
window.setTimeout(function() {
window.open(url, '_self');
}, delay * 1000);
})();
</script>