jscroll pane in web application

Question

I want to use jscrollpane in my application. If I define the scrollpane as below

<div id="scroll-pane">
   <p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.</p>
  </div>

In script I have defined like

$('#scroll-pane').jScrollPane()
                         .bind('mousewheel', function (e) {
                             e.preventDefault();
                         }
                );

It is working fine. If I give iframe in side the div tag like

<div id="scroll-pane">
                <iframe id="scroll" src="//Home/GridColumnMenu"></iframe>
   </div>

it is not working.can any one tell me how to do this?

Answer 1

In order to use jscrollpane in iframes you need to prepare them with jscrollpane code as shown in the documentation (http://jscrollpane.kelvinluck.com/iframe.html).

For example,

http://jsfiddle.net/6CbwL/1/

parent div containing the iframes

js

$('#scroll-pane').jScrollPane()
                         .bind('mousewheel', function (e) {
                             e.preventDefault();
                         }
                );

html

<div id="scroll-pane">
    <b>An Iframe at the bottom</b>
   <p>This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
        which can be styled at will.This demonstration shows basic
....
<iframe id="scroll" src="http://jsfiddle.net/Rf26T/1/show"></iframe>
  </div>

css

#scroll-pane{
    height:100px;/*to demonstrate jscrollpane on the parent div containing the iframe*/
}
iframe {
width: 100%;
height: 200px;
border: 0;
}

code of the iframe

http://jsfiddle.net/Rf26T/1/

js

$(function () {
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.on(
        'resize',

    function () {
        if (!isResizing) {
            isResizing = true;
            var container = $('#content');
            // Temporarily make the container tiny so it doesn't influence the
            // calculation of the size of the document
            container.css({
                'width': 1,
                    'height': 1
            });
            // Now make it the size of the window...
            container.css({
                'width': win.width(),
                    'height': win.height()
            });
            isResizing = false;
            container.jScrollPane({
                'showArrows': true
            });
        }
    }).trigger('resize');

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if ($('#full-page-container').width() != win.width()) {
        win.trigger('resize');
    }
});

html

<div id="content">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique non urna sed vu...
</p>
</div>

css

body {
    background: #fff;
    overflow: auto;
    height: 100%;
}

EDIT - this is a response to the comments

If you create the iframe dynamically there are two cases,

*1.*You have placed jquery and jscrollpane libraries in the iframe's head element, as well as the code shown above in this answer. Then it will work directly, as shown in the following example

http://jsfiddle.net/EBz3s/show

http://jsfiddle.net/EBz3s/ - the code

The iframe used as you can see is the same as the one created for the 1st example above.

*2.*You have not placed the js libraries or the code and you don't plan on adding them. In this case the scenario is to create the iframe dynamically as in case 1 but also add the js code related to jquery,jscrollpane,custom code for iframe to function as shown above, the jscrollpane css. Since the iframe referenced in this case does not have any external libraries or js code etc loaded. This is not trivial and care must be taken. In this example,

http://jsfiddle.net/EBz3s/show (need to wait for 2-3 seconds for libs to load and thus jscrollpane to function, explanation provided below)

the solution provided presents a method of adding resources dynamically but does not have a robust approach of waiting for each resource to load before loading the next one (e.g. wait for jquery to load and then load jscrollpane and so on.). The approach used just to provide a working example is function setTimeout and 1-2seconds delay between loading the libs. If this is your case you will need to implement something better, possibly a recursive setTimeout that checks if jQuery has been loaded and then calls to getScript from within the iframe. Also, the importScript(iframe,jsFile,jsCode) presented is really helpful to achieve a more robust solution.

Finally the code in case the fiddle goes away,

js

$('input[type=button]').not('[value*="NOT"]').click(function(){
    var url = "http://jsfiddle.net/Rf26T/1/show";
    $("#scroll-pane1").html("<iframe src =" + url + " style='width:100%;border:none;'></iframe>");
});


$('input[type=button][value*="NOT"]').click(function(){
    var url = "http://jsfiddle.net/7Lc9V/show";

    var $iframe=$("<iframe src="+url+" style='width:100%;border:none;'></iframe>");
    $("#scroll-pane2").append($iframe);
    $iframe.load(function(){

        importCSS($iframe.get(0),"http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.min.css")

        importScript($iframe.get(0),"http://code.jquery.com/jquery-1.9.1.js");

        importScript($iframe.get(0),null,"function importScript(iframe,jsFile,jsCode){var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');var script = document.createElement('script');if(jsCode){try {script.appendChild(document.createTextNode(jsCode));} catch (e) {script.text = jsCode;}}else{script.setAttribute('src',jsFile);}script.setAttribute('type','text/javascript');heads[0].appendChild(script);}");

        importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,'http://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.14/jquery.jscrollpane.js');},1000);");

        importScript($iframe.get(0),null,"setTimeout(function(){importScript(null,null,\"$(document).ready(function(){$(function () {var win = $(window);var isResizing = false;win.on('resize',function () {if (!isResizing) {isResizing = true; var container = $('#content');container.css({'width': 1,'height': 1});container.css({'width': win.width(),'height': win.height()});isResizing = false;container.jScrollPane({'showArrows': true});}}).trigger('resize');$('body').css('overflow', 'hidden');if ($('#full-page-container').width() != win.width()) {win.trigger('resize');}});});\");},2000);");

    });

    function importCSS(iframe,cssFile){
        var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
        var css = document.createElement('link');
        css.setAttribute("rel", "stylesheet")
        css.setAttribute("type", "text/css")
        css.setAttribute("href", cssFile)
        heads[0].appendChild(css);
    }

    function importScript(iframe,jsFile,jsCode){
        var heads = iframe==null?document.getElementsByTagName('head'):iframe.contentWindow.document.getElementsByTagName('head');
        var script = document.createElement('script');
        if(jsCode){
             try {
              script.appendChild(document.createTextNode(jsCode));
             } catch (e) {
              script.text = jsCode;
             }
        }else{
            script.setAttribute("src",jsFile);
        }
        script.setAttribute('type','text/javascript');
        heads[0].appendChild(script);
    }

});

html

<input type="button" value="add iframe that includes jscrollpane" />
<div id="scroll-pane1">
</div>
<input type="button" value="add iframe that DOES NOT include jscrollpane" />
<div id="scroll-pane2">
</div>