drummer392
drummer392

Reputation: 473

Div Highlight on Fancybox Close - Jquery

I am trying to add a setTimeout function on the close of my Fancybox. When I try this, the code breaks. Can anyone tell me what I am doing incorrect?

<script type="text/javascript">
$(document).ready(function(){

$(".popFrame").fancybox({
'height'    : 600,
'autoScale' : false,
'transitionIn'    : 'elastic',
'transitionOut'   : 'elastic',
'speedIn'     :   600,
'speedOut'      :   200,
'type'  : 'iframe',
'scrolling' : 'no',
'autoDimensions'    :   false,
'width'   :   620,
'hideOnContentClick' : false, 
'onClosed':function(){
$('#hidden').load('file.php');
}
setTimeout(function(){
$("div.color").fadeOut("slow", function () {
$("div.color").remove();
});
}, 
4000);
);
;})
</script>

The Error I'm getting is:

missing } after property list
[Break On This Error] setTimeout(function(){

Upvotes: 0

Views: 342

Answers (4)

Muhd
Muhd

Reputation: 25556

You can use jsLint to debug stuff like this. Especially helpful when you have thousands of lines of JS. Here's what it says for your code (after turning on all the "tolerate" options):

Error:
Problem at line 18 character 1: Expected '}' to match '{' from line 3 and instead 
saw 'setTimeout'.

setTimeout(function(){

Problem at line 23 character 6: Expected ')' to match '(' from line 3 and instead saw ';'.

4000);

Problem at line 23 character 7: Expected ';' and instead saw ')'.

4000);

Problem at line 24 character 1: Expected an identifier and instead saw ')'.

);

Of course, you will want to have your JavaScript code open in an external editor with line numbers when you fix these errors.

Upvotes: 0

Joey
Joey

Reputation: 1676

You had some syntax errors in your code:

$(document).ready(function(){

    $(".popFrame").fancybox({
        'height'    : 600,
        'autoScale' : false,
        'transitionIn'    : 'elastic',
        'transitionOut'   : 'elastic',
        'speedIn'     :   600,
        'speedOut'      :   200,
        'type'  : 'iframe',
        'scrolling' : 'no',
        'autoDimensions'    :   false,
        'width'   :   620,
        'hideOnContentClick' : false, 
        'onClosed':function(){
            $('#hidden').load('file.php');  
            setTimeout(function(){
                $("div.color").fadeOut("slow", function () {
                    $("div.color").remove();
                });
            },4000);
        }
    });

});

I hope this helps.

Upvotes: 1

Clive
Clive

Reputation: 36957

You've already terminated the onClosed function immediately before calling setTimeout so you'll get a syntax error. Try moving your setTimeout code inside the function

Upvotes: 0

Ariel
Ariel

Reputation: 26753

Extra semicolon on this line:

});

Upvotes: 0

Related Questions