CODEWITHSUNDEEP
javascriptjquery
mstef
mstef

Reputation: 1194

jQuery scrollbar in a tooltip only loading properly on window resize, content is reloading every time activated

I'm using a custom jQuery scrollbar inside of a jQuery tooltip.

In firefox if you click twice to open, e.g. if it opens, then instead of closing it you activate the tooltip a second time.

In chrome it only shows up and functions ok when you resize the browser window.

I tried to duplicate this in a fiddle to show, but the fiddle works fine for non-dynamic content: http://jsfiddle.net/mstefanko/JdAmG/71/ the fiddle will still display what i'm working with.

HTML of the tooltip is actually using php inline:

<div class="grab-this">
<div id="tip-content" class="nano">
    <div class="scrollContent">
    <?php foreach ( $member_info as $member ) : ?>
        <div class="member">
            <div class="member-photo">
                <img class="photo" src="<?php echo $member->photo_url ?>"/></div>
            <div class="team-member-screen-name">                                       
            <a href="<?php echo $member->url ?>"><?php echo $member->screen_name ?></a>
        </div>
    </div>
    </div>
    <?php endforeach ?>
</div>
</div>

i'm grabbing that content for the tooltip using:

var team = $('.grab-this').html();

Activating the tooltip like:

$('.tooltip').tipTip({activation: 'click', content: team, enter: function(){
    $("#tip-content.nano", "#tiptip_content").nanoScroller();
});

I notice in Chrome more than anything else that the images as well as the list seem to get repopulated everytime I open the tooltip. Not sure how to fix that.

Also, I actually moved the enter callback in the library to support this at all, was previously before the content was loaded into the tooltip.

Any ideas at all would be appreciated. At this point even a hack to fake a window resize or a way to force the scrollbar to reset after the content is 100% loaded would be amazing. Thanks

Upvotes: 1

Views: 1068

Answers (1)

Rob Tyler
Rob Tyler

Reputation: 21

I had the same problem with the mCustomScrollbar plugin. I found that because I was dynamically setting the height of the div containing the content that I was applying the scrollbar too, nothing worked (but it did when I resized the window). So, in the style sheet I set the height of the div to 1px, and I set updateOnContentResize to true when the plugin was initialised, as follows:

$( '.mCustomScrollbar' ).mCustomScrollbar ( { advanced: { updateOnContentResize: true } } );

Upvotes: 2

Related Questions