jqueryのハイライトは、私はdiv要素の内容全体を強調するために、この機能を持っている全体のdiv

Question

をカバーしていない：

jQuery.fn.highlight = function() { 
    $(this).each(function() { 
     var el = $(this); 
     $("<div/>") 
     .width(el.width()) 
     .height(el.height()) 
     .css({ 
      "position": "absolute", 
      "left": el.offset().left, 
      "top": el.offset().top, 
      "background-color": "#ffff99", 
      "opacity": ".7", 
      "z-index": "9999999" 
     }).appendTo('body').fadeOut(1000).queue(function() { $(this).remove(); }); 
    }); 
} 

問題は、いくつかのAJAX呼び出しによってロードされたコンテンツであり、それが唯一の強調表示されます非常に言いますdivの先頭私はそれが当時の内容がどれくらいの大きさであるかを知らないために仮定します。

私は、プレビューには、このような何かを行う可能性があります：

$('#preview_text_button').click(function() 
{ 
    var text = $('.texarea').val(); 
    $('#preview').load('page address', {'text':text}); 
    $('.preview').show(); 
    $('.preview').highlight(); 
}); 

私が求めているどのようなものです：どのように私は、全体の事をカバーするためにハイライトを得るのですか？私は最後にそれを含めると考えましたが、そうではありません。

Answer 1

jQuery.load()を使用すると、非同期呼び出しが行われるという問題があります。これは、残りのスクリプトをブロックせずにデータがロードされていることを意味します。直後にそれを実行するのではなく、あなたは、このような.load関数にコールバックを渡す必要があります：

$('#preview_text_button').click(function() 
{ 
    var text = $('.texarea').val(); 
    $('#preview').load('page address', {'text':text}, function() { 
     $('.preview').show(); 
     $('.preview').highlight(); 
    }); 
}); 

はここ​​の続きを読む：http://api.jquery.com/load/

を私も何AJAXになりますし、それがどのように働きますか。私は通常、回答のためにMDNを信じている：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started。

Answer 2

いくつかのこと：

1. あなたが特定されてきたように、あなたはは、テキストを追加する前にdivのサイズを設定しています。あなたの現実的なアプローチでは、テキストがロードされた後に（loadの完了コールバックを使用して）それを設定（または更新）する必要があります。
2. おそらくouterWidthとouterHeightが必要です。
3. ユーザーがブラウザウィンドウのサイズを変更した場合、ハイライトの位置がずれることがあります。
4. thisのjQueryプラグインはです。すでにのjQueryオブジェクトです。それに$()を使用する必要はありません。
5. jQueryプラグインは、理由がない限り、常にthisを返します。

代わりに、position: absoluteとleft、top、right、及び0からbottomセットと、コンテンツ（ないbody）でdivを挿入考えます。その要素がposition: relative（または別の方法で配置されている）であることを確認してください。テキストが実際にロードされるターゲット領域に2番目のdivがあります。

例を示します。あなたが最後の2行のため.prefixではなく#previewを使用し、なぜ私は確認されませんでしたので、私はそれを変更：

jQuery.fn.highlight = function() { 
 
    // Added return, removed $() 
 
    return this.each(function() { 
 
     $("<div/>") 
 
     .css({ 
 
      position: "absolute", 
 
      left: 0, 
 
      top: 0, 
 
      right: 0, 
 
      bottom: 0, 
 
      "background-color": "#ffff99", 
 
      opacity: .7, 
 
      "z-index": 9999999 
 
     }).prependTo(this).fadeOut(1000).queue(function() { $(this).remove(); }); 
 
    }); 
 
}; 
 

 
// Just to emulate `load` 
 
jQuery.fn.fakeLoad = function(url, data, callback) { 
 
    return this.each(function() { 
 
    var $this = $(this); 
 
    setTimeout(function() { 
 
     $this.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."); 
 
     callback.call(this); 
 
    }, Math.random() * 1000); 
 
    }); 
 
}; 
 

 
$('#preview_text_button').click(function() 
 
{ 
 
    var text = $('.texarea').val(); 
 
    // The div to contain the content 
 
    var div = $("<div/>"); 
 
    // Clear previous #preview contents, just have our contents div 
 
    $('#preview').html(div); 
 
    // Do the load 
 
    div.fakeLoad('page address', {'text':text}, function() { 
 
     // We have the text, show it and do the highlight thing 
 
     $('#preview').show().highlight(); 
 
    }); 
 
});

#preview { 
 
    position: relative; 
 
}

<div>When you click the button, after a random delay some text is loaded and highlighted (briefly)</div> 
 
<input type="button" id="preview_text_button" value="Click Me"> 
 
<div>Some text before the preview</div> 
 
<div id="preview"></div> 
 
<div>Some text after the preview</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

男、あなたはそれを最後の事をしません。あなたはAJAXリクエストを行い、次に.show（）と.highlight（）を呼び出すと、AJAXリクエストはDOM の後ににコンテンツを実際に撮影して入れます。あなたのshow（）と.highlightは、.load（）呼び出しのコールバックになければなりません。

PS私はまた、あなたがCSSやpseudoelementsでそれをやることができたときに、そのような難しいJSの方法を使っているのかどうか確信していません。