CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Moncho Chavez
Moncho Chavez

Reputation: 694

Add a function to slidetoggle just when open

Hi I just make a div that shows a Map on Google, where you set cordinates etc, anyway first problem was when animating height, the map inside have this problem on size :

how to deal with google map inside of a hidden div (Updated picture)

I fix it just like the first answer calling initialize(); in my slideToggle this fix the size issue.. The problem is that initialize(); takes the same time as the slideToggle so i lose the height animation, it just dissapear,

IS there anyway to tigger initialize(); just when slidetoggle Open the div? 

<script>
$('.dropdownmap').click(function(){
    $('#mapDisplayWrap').slideToggle();
    initialize();
})
</script>

Upvotes: 1

Views: 676

Answers (3)

Sergio
Sergio

Reputation: 28845

Yes, slideToggle accept a function callback when the animation is complete.

.slideToggle( [duration ] [, complete ] )

Try this:

$('.dropdownmap').click(function(){
    $('#mapDisplayWrap').slideToggle(400,function(){initialize();});

})

if you want it to run just when toggle is open use this:

$('.dropdownmap').click(function () {
    $('#mapDisplayWrap').slideToggle(400, function () {
        if ($(this).is(":visible")) {
            initialize();
        }
    });
});

Upvotes: 4

Kyle
Kyle

Reputation: 22278

IS there anyway to tigger initialize(); just when slidetoggle Open the div?

You'll want to use an animation callback that checks to see if the element is visible (just opened) and execute initialize if so.

$('.dropdownmap').click(function(){
  $('#mapDisplayWrap').slideToggle(function(){
    if($(this).is(':visible'))
      initialize();
  });
});

Upvotes: 3

maximkou
maximkou

Reputation: 5332

Add initialize as slideToggle callback: 

$('#mapDisplayWrap').slideToggle(initialize);

Upvotes: 1

Related Questions