search

vitch / jScrollPane

Pretty, customisable, cross browser replacement scrollbars
http://jscrollpane.kelvinluck.com/
GNU General Public License v2.0
2.16k stars 630 forks source link

jScrollPane and TinyMCE dont play nice #137

Closed WilliamStam closed 12 years ago

WilliamStam commented 12 years ago

ive tried including a tinyMCE editor inside a pane with jscrollpane

either the editor doesnt load the second time... or jscroll doesnt work. im not 100% sure which 1 is causing the problems tho

http://meetpad.org/demo_scroll_editor.html

it works fine on page laod... but as soon as you click reload the vertical slider disapears.

$("#t").tinymce();
$("#wrapper > div").jScrollPane();
vitch commented 12 years ago

There are a couple of things that I notice from a quick look at your document:

You may also be interested in the getContentPane API call as illustrated in this example: http://jscrollpane.kelvinluck.com/ajax.html

WilliamStam commented 12 years ago

seems to do the exact same thing as - http://code.google.com/p/jscrollpane/issues/detail?id=167

head etc wont make any difference surely? fixed in the demo in anycase

vitch commented 12 years ago

head probably wouldn't make any difference but invalid HTML can cause all sorts of hard to debug problems so it's always good to make sure your HTML validates when trying to track down a bug...

It looks like the issue you found describes exactly what might be going on... If TinyMCE breaks the jQuery append signature then that's pretty weird though (the multiple arguments for jQuery.append is now documented btw). Are you using the latest versions of everything?

What happens if you reinitialise the scrollpane using the API rather than recalling the plugin method?

WilliamStam commented 12 years ago

true dat on the valid part

anyways.. im sorta agreeing with the other guy that tinymce is doing something funny.. but for the life of me i cant find it. even with the api.reinitialise(); thing doesnt work.. what makes it even stranger...

if i call the jScrollPane(); after setting up tinyMCE it works fine on page load... but after that not again...

it seems... like..

jscollpane creates its markup.. then when tinymce loads.. it erases all jscollpanes markup. even if i put the textarea into another div (so any .after() etc wont effect the scrollpanes markup) it still doesnt work

var pane = $('#wrapper > div');
    pane.jScrollPane();
    var api = pane.data('jsp');

    $(document).ready(function(){
    content();

    //$("#wrapper > div").jScrollPane();
    $("button").click(function(){
        content();
    });
});
    function content(){
        var data = {
            description:"<p>test</p><p>" + Math.random() + "</p>"
        };
        console.log(api);
        $("#area").html('<div><textarea name="t" id="t" cols="30" rows="10">'+data['description']+'</textarea></div>');
        $("#t").tinymce(tinyMCEOpts);
        api.reinitialise();
    }

the markup is as follows

<div id="wrapper" style="position: absolute; height: 150px; width: 550px; top: 50px;  ">
    <div style="overflow: hidden; padding: 0px; width: 548px;" id="area">
        <div>

            <textarea rows="10" cols="30" id="t" name="t" style="display: none;" aria-hidden="true">&lt;p&gt;test&lt;/p&gt;&lt;p&gt;0.9339201117254513&lt;/p&gt;</textarea>

            <span role="application" aria-labelledby="t_voice" id="t_parent" class="mceEditor awsSkin">
                <span class="mceVoiceLabel" style="display:none;" id="t_voice">Rich Text Area</span>
                editor goes here
            </span>

        </div>
    </div>
</div>
WilliamStam commented 12 years ago

if i go back to 

function content(){
        var data = {
            description:"<p>test</p><p>" + Math.random() + "</p>"
        };

        $("#area").html('<div><textarea name="t" id="t" cols="30" rows="10">'+data['description']+'</textarea></div>');
        $("#t").tinymce(tinyMCEOpts);
        $('#wrapper > div').jScrollPane();
    }

then the markup on first page laod is 

<div id="wrapper" style="position: absolute; height: 150px; width: 550px; top: 50px;  ">
    <div style="overflow: hidden; padding: 0px; width: 548px;" id="area" class="jspScrollable" tabindex="0">
        <div class="jspContainer" style="width: 548px; height: 148px;">
            <div class="jspPane" style="padding: 0px; width: 534px; top: 0px;">
                <div>

                    <textarea rows="10" cols="30" id="t" name="t" style="display: none;" aria-hidden="true">&lt;p&gt;test&lt;/p&gt;&lt;p&gt;0.35379421860662874&lt;/p&gt;</textarea>

                    <span role="application" aria-labelledby="t_voice" id="t_parent" class="mceEditor awsSkin">
                        <span class="mceVoiceLabel" style="display:none;" id="t_voice">Rich Text Area</span>
                        editor goes here
                    </span>

                </div>
            </div>
            <div class="jspVerticalBar">
                <div class="jspCap jspCapTop"></div>
                <div class="jspTrack" style="height: 148px;">
                    <div class="jspDrag" style="height: 126px; top: 0px;">
                        <div class="jspDragTop"></div>
                        <div class="jspDragBottom"></div>
                    </div>
                </div>
                <div class="jspCap jspCapBottom"></div>
            </div>
        </div>
    </div>
</div>

if i click reload the markup is

<div id="wrapper" style="position: absolute; height: 150px; width: 550px; top: 50px;  ">
    <div style="overflow: hidden; padding: 0px; width: 548px;" id="area" class="">
        <div>

            <textarea rows="10" cols="30" id="t" name="t" style="display: none;" aria-hidden="true">&lt;p&gt;test&lt;/p&gt;&lt;p&gt;0.5592001125631555&lt;/p&gt;</textarea>
            <span role="application" aria-labelledby="t_voice" id="t_parent" class="mceEditor awsSkin">
                <span class="mceVoiceLabel" style="display:none;" id="t_voice">Rich Text Area</span>
                editor goes here
            </span>

        </div>
    </div>
</div>
WilliamStam commented 12 years ago

i just tried adding similer markup to the div.. lol... um... it stays.. it only deletes it if the div has a class of jspVerticalBar etc.. so it must be jscrollpane not playing nice?

just had a thought.. isnt it maybe caused by jscrollpane not being able to calculate the height? gonna do some tests now

WilliamStam commented 12 years ago

http://meetpad.org/demo_scroll_editor.html

seems nothing changes re the height... jscrollpane is JUST not showing the scrollbars

(look in console, when you click on "just scrollbar" it shows the height aswell at the time)

PS. yeah to latest everything..

jquery 1.7.1 jScrollPane - v2.0.0beta11 - 2011-07-04 tinymce 3.5b2

WilliamStam commented 12 years ago

ok... so a few more tests... im pretty sure it must be jscrollpane not working.

http://www.press-store.co.za/store/25/63/jscrollpan.zip

heres the demo i setup. if i had to report it to tinymce they would just laugh at me.. since its jscrollpane not working.. not their plugin :P

WilliamStam commented 12 years ago

this issue isnt "closed"