Question

[Left is the same page as the right, only the right shows all the elements flying out the top of the Fancybox after init of TinyMCE]

SEE LIVE EXAMPLE

My current setup has Fancybox using AJAX to load a PHP page. The page tabbing (seen above) is achieved by stacking DIVs and bringing the requested one forward when onclick event for one of the LIs in the left navigation. All internal elements are absolute-positioned with top/bottom and left/right defined. This setup works fine when TinyMCE is out of the picture.

When I initialize TinyMCE, all hell breaks loose. I have occasionally gotten it to load properly (on multiple browsers), but for the most part it does something like the image in the top right. I’ve been Googling for hours with no luck. I don’t even know where to start with this. Any suggestions would be great!

HTML:

<div id="popup">
  <header>
    <a id="admin-link" class="fancybox" href="/dev/sbir/inc/login.php">[login]</a>
    <h1 id="head">Promote Value of SBIR</h1>
  </header>

  <ul id="nav">
    <li onclick="javascript:shiftUpContent(&quot;content_0&quot;);"><a href="#">Provide Success Stories</a></li>
    <li id="last"></li>
</ul>

  <div id="content">
    <div class="content" id="start">
      <h1>Directions</h1>
      <p>To view information on Promote Value of SBIR, select one of the sub-categories to the left.</p>
  </div>

  <div id="content_0" class="content">
    <h1>Provide Success Stories</h1>
    <p>Give Overview Presentation</p>
<ul>
  <li>It is a typical government contract</li>
  <li>It is competitive and I have to "beat someone else out"</li>
  <li>I don't have a chance against the big government contractors</li>
</ul>
<p>Other promotional strategies could include:</p>
<ul>
  <li>Conversations with current/past award winners</li>
  <li>Dr. Google assignments or in vivo browsing with client</li>
</ul>
<h2>Training Classes</h2>
<p>Search "SBIR Training", "SBIR Conferences", "SBIR Calendar" or "SBIR and name of an agency i.e. USDA, Navy, Army, etc" Some SBIR consultants give training classes from time to time as a way to solicit clients.</p>
<h2>External Content</h2>
<p><span style="text-decoration: underline;"><a href="/dev/sbir/www.zyn.com" target="_blank">www.zyn.</a>com</span><br> <a href="/dev/sbir/www.sbir.gov" target="_blank">www.sbir.guv</a></p>
</div>
</div>

JavaScript:

/* navigate through tabs of pop-up */
function shiftUpContent(id){
    topContent.style.zIndex = '5';
    if((topContent = document.getElementById(id)) === null){ return; }

    topContent.style.zIndex = '9998';
}

jQuery Plugin Init:

$(document).ready(function() {
    $(".fancybox").fancybox({
        fitToView       : true,
        nextClick       : false,
        closeClick      : false,
        arrows          : false,
        mouseWheel      : false,
        width           : '773px',
        height          : '630px',
        type            : 'ajax',
        beforeShow      : function(){ 
            topContent  = document.getElementById("start");
            document.title  = titleRoot;
            $("#popup .fancybox").fancybox({
                fitToView       : true,
                autoSize        : true,
                nextClick       : false,
                closeClick      : false,
                arrows          : false,
                mouseWheel      : false,
                type            : 'iframe',
                ajax            : {
                                    type    : 'POST',
                                    cache   : false,
                                    success : function(data){
                                        $.fancybox(data);
                                    }
                                  }
            });
            tinyMCE.init({
                mode        : "textareas",
                relative_urls   : false,
                constrain_menus : true
            });
        }
    });
});

I’ve tried to strip out as much irrelevant code as I can, but not knowing the problem, it’s difficult to know what needs to be left in.

Answer 1

Well, after about 7 hours total of debugging I still have nothing. Sometimes the setup works, sometimes not.

My fix ended up being to return to iframe instead of AJAX to load the fancyboxes. Having the TinyMCE instances completely isolated from the parent page means that they completely die each time a fancybox is closed ( and everything works like a dream. I’m going to have to go with that.

Using this code:

var i, t = tinyMCE.editors;
for (i in t){
    if (t.hasOwnProperty(i)){
        t[i].remove();
    }
}

I was able to remove all instances beforeClose on the fancybox, but it didn’t seem to make a difference in solving my problem.