PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

Close Pop Up Box after certain amount of time?

(14 posts) (4 voices)

Started 1 month ago by savio
Latest reply from paulw406

savio

offline
Member

Hello, I am trying to create an effect that I might be able to do with Pop Up Box Magic (another product might be better, maybe Panache?).

When the Website Page Loads, I need the company logo to appear full screen for a second or so, then fade out to the actual site.

My initial thought is to do a full screen Pop Box on Page load with the graphic in it, but I don't see a way to have it auto-close after a certain amount of time.

Is this possible with Pop Box Magic or another PVII tool?

thanks so much!
chris

Posted 1 month ago
Gerry

offline
PVII Team

Here's a quick code tweak to have the PBX auto close after a set amount of seconds:

1. Open the p7PBXscipts.js file and locate this block of code at line 303:

tA.pbxOpenTimer = setTimeout(P7_PBXcreateTMH(tA), t);
}

2. Make a new line in between those two lines and Paste this code into that new line:

setTimeout(function(){P7_PBXclose(tA);},5000);

so that it now look like this:

tA.pbxOpenTimer = setTimeout(P7_PBXcreateTMH(tA), t);
setTimeout(function(){P7_PBXclose(tA);},5000);
}

3. Save and close the file.

That's it! Now the PBXX system will automatically close after 5 seconds after page load.

You can adjust the amount of time by changing the 5000, 1000 = 1 second, 2000 = 2 seconds, etc.

Posted 1 month ago
savio

offline
Member

Thx so much! I will give it a try!!

Posted 1 month ago
savio

offline
Member

So this almost is working how I am trying to get it - but there are three issues:

1) instead of loading immediately (first thing shown) it loads after the page (so you see the page first), hoping the "splash box" will be first to be seen.
2) there is a margin/padding around the box so it isn't "full screen", even though I have "no padding" selecting. Is there a way to remove this? The h/w in the wizard is in pixels - is there a way to change it to 100% hw?
3) is there a way to only make the pop up show once per session? that way if they "refresh" the page, or go back to the home page it doesn't show/reload?

Here is my test link: https://test.saviodesigns.com/ovlive/

Thanks so much!

Posted 1 month ago
Gerry

offline
PVII Team

The margin you see is the browser default margin for the paragraph (<p>) tag. You have the image inside of a <p> tag, remove the <p> tag.

The opening of the PBX happens upon page load, with fade-in you you'll see the page content until the PBX runs and fades in. Add this <style> tag into the <head> section of your page (in the editable region):

<style type="text/css">
#p7PBXp_1 {
visibility: visible;
left: 0px;
top: 0px;
z-index: 9999900;
opacity: 1 !important;
}
</style>

This will make the PBX visible before the PBX kicks in, and disable the fade in.

Because we have a combination of static css and dynamic script control is to show the box on page load, basically a few hacks, it cannot be controlled or intervened by a session status. This would require a dedicated set of functionality designed for the purpose.

Posted 1 month ago
savio

offline
Member

Thanks so much! The session control is not something that is totally needed, so that isn't a problem.
I did remove the <p> tag and added in the new style. It does help a bit, but a frame is still visible on the right side in chrome and the top and right in Firefox (after browser cache is cleared).

Is there a setting to make sure the pop up is 100% wide and 100% tall by chance?

No prob with the fade in being gone - is it possible to leave the fade out though?

Thank you so much! This is almost exactly what I was hoping to do - being able to correct these would take it there!

Posted 4 weeks ago
Gerry

offline
PVII Team

Replace the rule I gave you with this revised one:

#p7PBXp_1 {
visibility: visible;
left: 0px !important;
top: 0px !important;
z-index: 9999900;
opacity: 1;
width: 100%;
position: absolute;
}

Next, add this style rule:

#p7PBXp_1 img {
width: 100% !important;
max-width: 200% !important;
}

Lastly, we'll need to make a small edit tot the scripts file in order to activate the fade out:

1. Open the p7PBXscripts.js file and locate this at line 442:

pN.style.opacity = 0;

2. Deactivate this line by placing two forward slashes at the beginning, like this:

//pN.style.opacity = 0;

3. Save and close the file.

Now the fade will work on close, and the top and right edge issues are also gone.

With the above rules the image will be 100% wide and resize accordingly. It cannot be both 100% wide and 100% tall without distorting the image. The usual approach in this case is to use a background image set to cover.

Posted 4 weeks ago
savio

offline
Member

Thank you SO much! It looks perfect in Chrome - In firefox, the underlying webpage still appears first though - is there something in the coding that Firefox wouldn't like?? (I did clear my cache).

Thank you SO much for all your help!

Posted 4 weeks ago
Gerry

offline
PVII Team

It's working fine for me in Firefox, although I did need to do a hard reload (Ctrl-F5. After that it renders perfectly.

One more thing you can do is to set background color for the root PBX and also set a height equal to the viewport to cover the entire browser window. Add this rule:

#p7PBXp_1 {
height: 100vh;
background-color: #fff;
}

Posted 4 weeks ago
savio

offline
Member

Thanks so much - CNTRL + F5 worked for Firefox :)
I did add that extra rule - it looks great!

I know that isn't what Pop Box Magic was designed for, but it really works well to create this effect!

Not sure if others would benefit by having the autoclose/etc. those might be options to add into the wizard in a future release??

Thanks so much for your help on this Gerry!

Posted 4 weeks ago
Gerry

offline
PVII Team

Good to hear that it's working for you!

In working on this with you I realized that a dedicated Page Load Popup system might be a good idea.

There were a lot of 'hacks' to get this working with PBX, a purpose built page load popup would do a much better job, with a complete set of options and session control as well. Sound interesting?

Posted 4 weeks ago
savio

offline
Member

Good to hear that it's working for you!
In working on this with you I realized that a dedicated Page Load Popup system might be a good idea.
There were a lot of 'hacks' to get this working with PBX, a purpose built page load popup would do a much better job, with a complete set of options and session control as well. Sound interesting?

That would be an AWESOME addition to the PVII family! I would definitely be on board with that! Lots of uses for something like that (especially if it is packed with the usual Project Seven customization options!).

Posted 4 weeks ago
Dave Buchholz

offline
Member

Good to hear that it's working for you!
In working on this with you I realized that a dedicated Page Load Popup system might be a good idea.
There were a lot of 'hacks' to get this working with PBX, a purpose built page load popup would do a much better job, with a complete set of options and session control as well. Sound interesting?

I would definitely be interested in that kind of widget

Posted 3 weeks ago
paulw406

offline
Member

Good to hear that it's working for you!
In working on this with you I realized that a dedicated Page Load Popup system might be a good idea.
There were a lot of 'hacks' to get this working with PBX, a purpose built page load popup would do a much better job, with a complete set of options and session control as well. Sound interesting?

Good, or bad, they are everywhere on the Internet. Seems like almost every website at times. If that is what I think you mean.

Mostly for advertising special deals, newsletter and website sign-ups, and other annoying things like that :-) But those are data driven.

-pw406

Posted 3 weeks ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.