CODEWITHSUNDEEP
jqueryhtml
anjel
anjel

Reputation: 1382

mCustomScrollbar plugin not working with dynamic loaded content

I am trying to load content from another page and place it inside a div but mCustomScrollbar doesnt seem to wrap the content inside its custom scrollbar. the content(images) is loaded inside the div but displayed inside the browser's default long scrollbar Anybody knows how to fix this ?

$('ul li a.collections').click(function(){
    $(".content").html('');
    $(".content").load("restart.html",function(){
        $(".content").mCustomScrollbar({horizontalScroll:true,theme:"dark"});   
    });
});

the html page which is loaded:

<div class="content">
    <div style="width:7600px;" >
        <a href="creative-destructon-womenswear-2009/1.jpg"><img src="creative-destructon-womenswear-2009/1.jpg" width="602" height="400"></a>
        <a href="creative-destructon-womenswear-2009/2.jpg"><img src="creative-destructon-womenswear-2009/2.jpg" width="284" height="400"></a>
        <a href="creative-destructon-womenswear-2009/3.jpg"><img src="creative-destructon-womenswear-2009/3.jpg" width="600" height="256"></a>
        <a href="creative-destructon-womenswear-2009/4.jpg"><img src="creative-destructon-womenswear-2009/4.jpg" width="283" height="400"></a>
        <a href="creative-destructon-womenswear-2009/5.jpg"><img src="creative-destructon-womenswear-2009/5.jpg" width="602" height="400"></a>
        <a href="creative-destructon-womenswear-2009/6.jpg"><img src="creative-destructon-womenswear-2009/6.jpg" width="1260" height="400"></a>
        <a href="creative-destructon-womenswear-2009/7.jpg"><img src="creative-destructon-womenswear-2009/7.jpg" width="332" height="400"></a>
        <a href="creative-destructon-womenswear-2009/8.jpg"><img src="creative-destructon-womenswear-2009/8.jpg" width="287" height="400"></a>
        <a href="creative-destructon-womenswear-2009/9.jpg"><img src="creative-destructon-womenswear-2009/9.jpg" width="316" height="400"></a>
        <a href="creative-destructon-womenswear-2009/10.jpg"><img src="creative-destructon-womenswear-2009/10.jpg" width="800" height="400"></a>
        <a href="creative-destructon-womenswear-2009/11.jpg"><img src="creative-destructon-womenswear-2009/11.jpg" width="283" height="400"></a>
        <a href="creative-destructon-womenswear-2009/12.jpg"><img src="creative-destructon-womenswear-2009/12.jpg" width="800" height="400"></a>
        <a href="creative-destructon-womenswear-2009/13.jpg"><img src="creative-destructon-womenswear-2009/13.jpg" width="564" height="400"></a>
        <a href="creative-destructon-womenswear-2009/14.jpg"><img src="creative-destructon-womenswear-2009/14.jpg" width="114" height="400"></a>
        <a href="creative-destructon-womenswear-2009/15.jpg"><img src="creative-destructon-womenswear-2009/15.jpg" width="266" height="400"></a>
    </div>
</div>

Upvotes: 0

Views: 7774

Answers (1)

anjel
anjel

Reputation: 1382

I found the solution to my problem by placing the javascript code inside the requested file called "restart.html" and wrapping the images inside the div class "content". It works !

            <div class="content">
            <div style="width:7600px;" >
       <a href="creative-destructon-womenswear-2009/1.jpg"><img src="creative-destructon-womenswear-2009/1.jpg" width="602" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/2.jpg"><img src="creative-destructon-womenswear-2009/2.jpg" width="284" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/3.jpg"><img src="creative-destructon-womenswear-2009/3.jpg" width="600" height="256">
       </a>
       <a href="creative-destructon-womenswear-2009/4.jpg"><img src="creative-destructon-womenswear-2009/4.jpg" width="283" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/5.jpg"><img src="creative-destructon-womenswear-2009/5.jpg" width="602" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/6.jpg"><img src="creative-destructon-womenswear-2009/6.jpg" width="1260" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/7.jpg"><img src="creative-destructon-womenswear-2009/7.jpg" width="332" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/8.jpg"><img src="creative-destructon-womenswear-2009/8.jpg" width="287" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/9.jpg"><img src="creative-destructon-womenswear-2009/9.jpg" width="316" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/10.jpg"><img src="creative-destructon-womenswear-2009/10.jpg" width="800" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/11.jpg"><img src="creative-destructon-womenswear-2009/11.jpg" width="283" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/12.jpg"><img src="creative-destructon-womenswear-2009/12.jpg" width="800" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/13.jpg"><img src="creative-destructon-womenswear-2009/13.jpg" width="564" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/14.jpg"><img src="creative-destructon-womenswear-2009/14.jpg" width="114" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/15.jpg"><img src="creative-destructon-womenswear-2009/15.jpg" width="266" height="400">
       </a>
       </div>
       </div>
       <script type="text/javascript">
    (function($){
                    $(".content").mCustomScrollbar({horizontalScroll:true,theme:"dark"});   
                    })(jQuery);
    </script>

Upvotes: 4

Related Questions