Specifying Different Overlay Loading Speeds

[James]

You may feel that the default overlay speed is a little too slow or too fast to load for your liking. If this is the case, you can actually specify an overlay loading speed in the overlay HTML.

Take the Contact Us overlay for example, the HTML is:

<a href="http://xenforo.com/contact/" class="OverlayTrigger" data-overlayoptions="{&quot;fixed&quot;:false}">Contact Us</a>

You can probably read all that, except the data-overlayoptions which is what we will be looking at in this tip:

data-overlayoptions="{"fixed":false}"

What this actually does is allows us to specify custom options for our overlay, a full list of which can be found here. That code translates to {"fixed":false}, so we can add our own property to it using the same code.

I want the overlay to display in 5000 milliseconds (extreme, I know) as well as not being fixed, so I can do that like this:

data-overlayoptions="{"fixed":false, "speed":5000}

Which translates into: "fixed":false, "speed":5000.

Save and we're good to go. The overlay should now open in a duration of 5000 milliseconds.

If it doesn't, inspect the Contact Us element and check that you can see this line:

 

[Floris]

Ha! Do you have access to my todo list or something?

[ ] Write quick guide on how to customize OverlayTrigger data-overlayoptions="{}" speeds (handy for fast staff actions)

Guess I can check it off.

 

[Fuhrmann]

Thank you James.