[左は右と同じページです。右だけが、TinyMCEの初期化後にFancyboxの上部から飛び出すすべての要素を示しています]
私の現在のセットアップでは、AJAXを使用してPHPページをロードするFancyboxがあります。ページのタブ移動(上記参照)は、DIVをスタックし、左側のナビゲーションのLIの1つに対するonclickイベント時に要求されたものを前方に移動することによって実現されます。すべての内部要素は絶対位置にあり、上/下および左/右が定義されています。TinyMCEが見えない場合、この設定は正常に機能します。
TinyMCEを初期化すると、すべての地獄が解き放たれます。(複数のブラウザで)正しくロードされることがありますが、ほとんどの場合、右上の画像のように動作します。私は運がないまま何時間もグーグルしてきました。どこから始めればいいのかわからない。どんな提案も素晴らしいでしょう!
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("content_0");"><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プラグインの初期化:
$(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
});
}
});
});
関係のないコードをできるだけ削除しようとしましたが、問題がわからないため、何を残す必要があるかを知ることは困難です。