简体   繁体   中英

How to add jquery slimScroll on infowindow google maps

This is my script:

// InfoWindow content
var content = '<div id="iw-container">' +
             '<div class="iw-title">Porcelain Factory of Vista Alegre</div>' +
                    '<div class="iw-content">' +
                      '<div class="iw-subTitle">History</div>' +
                      '<img src="images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">' +
                      '<p>Founded in 1824, the Porcelain Factory of Vista Alegre was the first industrial unit dedicated to porcelain production in Portugal. For the foundation and success of this risky industrial development was crucial the spirit of persistence of its founder, José Ferreira Pinto Basto. Leading figure in Portuguese society of the nineteenth century farm owner, daring dealer, wisely incorporated the liberal ideas of the century, having become "the first example of free enterprise" in Portugal.</p>' +
                      '<div class="iw-subTitle">Contacts</div>' +
                      '<p>VISTA ALEGRE ATLANTIS, SA<br>3830-292 Ílhavo - Portugal<br>'+
                      '<br>Phone. +351 234 320 600<br>e-mail: geral@vaa.pt<br>www: www.myvistaalegre.com</p>'+
                    '</div>' +
                    '<div class="iw-bottom-gradient"></div>' +
                  '</div>';
// A new Info Window is created and set content
var infowindow = new google.maps.InfoWindow({
    content: content
});
...
google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
});

This is my slimScroll script ( http://rocha.la/jQuery-slimScroll )

$(function(){
    $('#iw-container').slimScroll({
        allowPageScroll: true, 
        height: '100px',
        disableFadeOut: true
     });
});

But result not work, how to fix it?

错误SlimScroll

At least that the plugin has a timeout looking for new elements (looks not), you will have to call the plugin when the infowindow html is appended to the DOM.

Also, as @Starscream1984 said, care with the element are you choosing.

See a working example (jsfiddle) .

google.maps.event.addListener(infowindow, 'domready', function(){
    $('.target_element').slimScroll({
        allowPageScroll: true, 
        height: '50px',
        disableFadeOut: true
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM