Search jQuery

jQuery Forum

Delay auto close overlay

in Using jQuery • 12 years ago

Dear

(excused for my english, I'm dutch)

I'm creating an overlay with multiple effects and clicks. To setup the overlay and the general effects (slide, fade, duration,...) there's no problem. As for some actions there's need an automated close after a few seconds.

Here is my jQeury code for the total animation.

jQuery.noConflict();
jQuery(document).ready(function() {
// START DOCUMENT READY

    // Start welkombox overlay
        jQuery(function() {
            jQuery("#welkombox div[rel]").overlay();
        });
    // End welkombox overlay

    // Start slide overlay content
        jQuery('#verhuiskeuze1-wachten').click(function() {
            jQuery('#verhuis-algemeen, #verhuis-wachten').animate(
                { left: "+=100%" }, // what we are animating
                {
                    duration: 1000,
                    easing: 'easeOutQuad',
                }
            );
        });
    // End slide overlay content

// END DOCUMENT READY
});

Here is a simple version of the body.

<div id="content-inner">
    <div id="welkombox">
        <div id="box1" rel="#related1">Some content...</div>
        <div id="box2" rel="#related2">Some content...</div>
        <div id="box3" rel="#related3">Some content...</div>
    </div>
</div>


<div id="related1" class="overlay">
    <div id="Inside-part1">Some text (button to slide, defind in the Jquery script)</div>
    <div id="Inside-part2">Some text</div>
</div>

<div id="related2" class="overlay">Some content...</div>
<div id="related3" class="overlay">Some content...</div>

Now for what I want exactly to do:

Create overlay if clicked on div in the body content. (DONE)
Open the refering overlay of witch div container was clicked. (DONE)
In my project there are 2 div's (as clickable items) with actions. For one of them the content with in the overlay moves to the right side and showes some other content. (DONE)
If that last is done (click and move tot right) the overlay is suposed to close automaticly after a few seconds.

The last thing is something what seems to be impossible.
Is there someone how can help me?

Thanks

Replies(3)

kbwood.au

Re: Delay auto close overlay

12 years ago

Use the setTimeout function to schedule an event for the future. If you capture the result of the call you can cancel it with a call to clearTimeout(timer).

var timer = null;
...
jQuery('#verhuiskeuze1-wachten').click(function() {
jQuery('#verhuis-algemeen, #verhuis-wachten').animate(...);
timer = setTimeout(function() {
// Close overlay...
}, 2000); // Two seconds
});

wubbes

Re: Delay auto close overlay

12 years ago

Thanks for your assistance. It works fine for the timeout delay part. To call the close function I found it on another forum.

This is the final solution for my issue.

jQuery(document).ready(function() {
// START DOCUMENT READY
// Start welkombox overlay
jQuery("#welkombox div[rel]").overlay();
var thisOverlay = jQuery('#welkombox div[rel]').data('overlay');
// End welkombox overlay
// Start slide overlay content
jQuery('#verhuiskeuze1-wachten').click(function() {
jQuery('#verhuis-algemeen, #verhuis-wachten').animate(
{ left: "+=100%" }, // what we are animating
{
duration: 1000,
easing: 'easeOutQuad',
complete:
timer = setTimeout(function(){thisOverlay.close();},3000)
}
);
});
// End slide overlay content
// END DOCUMENT READY
});

wubbes

Re: Delay auto close overlay

12 years ago

Thx.

I do have an other question consurning this issue.

I've setup the functen like I displayed in my previous post with the "var thisOverlay..." to be able to call a jQuery api (close). It works fine, but...

When I'm using it several times, it workst only on one item.

for example:
I set ip 3 overlay DIV's with an related DIV (witch act as an opening button) in the content.
I also create 3 times (one for each overlay) an DIV to close the relater (opened) overlay on click.

This is a simple version of my code.

<code>

    <script>
        jQuery(document).ready(function() {

            jQuery("#content div[rel]").overlay();
            var thisOverlay = jQuery('#welkombox div[rel]').data('overlay');

            jQuery("#button-to-close-1").click(function(){
                thisOverlay.close();
                });

            jQuery("#button-to-close-2").click(function(){
                thisOverlay.close();
                });

            jQuery("#button-to-close-3").click(function(){
                thisOverlay.close();
                });

        });
    </script>


    <div id="content">
        <div id="contentbutton-1" rel="#overlay-1">Some content...</div>
        <div id="contentbutton-2" rel="#overlay-2">Some content...</div>
        <div id="contentbutton-3" rel="#overlay-3">Some content...</div>
    </div>


    <div id="overlay-1">
        <div id="button-to-close-1">Click here to close this overlay</div>
    </div>
    <div id="overlay-2">
        <div id="button-to-close-2">Click here to close this overlay</div>
    </div>
    <div id="overlay-3">
        <div id="button-to-close-3">Click here to close this overlay</div>
    </div>
</code>

The close action works only for the first overlay.
I also tried to copy the VAR as many as there is a close function, mut that doesn't work.

I also tried to create the witch fadeIn and fadeOut. It works, but it doesn't reconise the REL atribute and therefor I'll have to write the function to every opening and closing action for every overlay. That is time-consuming.

Any help with that?

Top Reply

Response title

Attachments

jQuery Forum

Delay auto close overlay

Replies(3)

Re: Delay auto close overlay

Re: Delay auto close overlay

Re: Delay auto close overlay

Statistics

Tags

Actions