コンテンツを1つの要素から次の要素に切り替えますか？

Question

言っておくと、ページ上に2つのdiv要素（div1とdiv2とする）があります。私はコンテンツを動的に取得しています。コンテンツはテキストで、div1にスペースがなくなりdiv2にコンテンツが表示されるように、2つのdiv要素をいっぱいにするようにします。類推のために、ノートブックで作業するようなもので、ノートブックの全面がdiv1とdiv2がそれぞれ左右のページです。ページの1辺が終了すると、次のように移動します。

テキストを分割し、各divの単語数に制限を設定すると、div1から2に進むなどの方法があります。

私はページネーションを見ましたが、それは私が探しているものではありません。

これを行うにはより良い方法がありますか？おそらくdiv要素のheight属性を使ってイベントなどをトリガするのと同じですか？それとも他の提案ですか？

Answer 1

P、側 - 表示by-side（CSS参照）、最初のテキストはすべてdivです。コードは、オーバーフローを回避するために、必要に応じて（s）は次のdivにテキストを再配布します。この質問に関連していることをどのように

$(function() { 
 
    // Take all words from first div and let them overflow into any next div 
 
    var allwords = $('div.box').text().split(/\s+/); 
 
    $('div.box').each(function (index, div) { 
 
     var text = ''; 
 
     var $div = $(div); 
 
     var height = Math.round($div.height()); 
 
     allwords.slice().some(function (part, i) { 
 
      $div.text(text + (i ? ' ': '') + part); // try, and see what we get 
 
      // Detect overflow: when so, exit loop 
 
      if ($div.prop('scrollHeight') > height) return true; 
 
      text = $div.text(); 
 
      allwords.shift(); 
 
     }); 
 
     // Restore text to last non-overflowing text 
 
     $div.text(text); 
 
    }); 
 
});

.box { width:100px; height:100px; border: 1px solid; display: inline-block; float: left }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque dui ut nisl iaculis faucibus. 
 
Mauris non diam consectetur metus accumsan sollicitudin. Quisque ornare euismod mi. 
 
</div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

Answer 2

また、あなたは50は、任意の数に置き換えることができ、この<textarea maxlength="50">

ようtextareaのテキスト制限を修正することができます。動的な長さが必要な場合でも、それを行うにはJSを使用できます。

JSを使用して文字数をカウントし、制限に達するとfocusを他のtextareaに切り替えます。

AngularJSまたはこのようなMVCは、これを簡単に解決するのに役立ちます。

Answer 3

あなたはdiv要素は、このような関数であふれている場合を検出することができます

if (
    element.offsetHeight < element.scrollHeight 
    || element.offsetWidth < element.scrollWidth 
) 
{ 
    // Overflow 
} 
else 
{ 
    // No overflow 
} 

オーバーフローがなくなるまであなたが二番目に最初のdivからコンテンツの累進部分を切り離す機能を作ることができます。

Answer 4

私はコールバック機能を試してみなければなら、あなたは最初のdivをフェードと第二を埋める関数を呼び出すよりもすることができます

  $(".div1").fadeOut(200,callbackFunction(){$(".div2").html("some text")}); 

Answer 5

奇妙なソリューションですが、それは動作します！私は、生産のウェブサイト上でそれを使用するためにそれをお勧めしません：あなたは固定サイズの4つのdivの要素を持っている。この例から、コードを使用することができます

$(function() { 
 
    
 
    function normalize() { 
 
    
 
     $('#div2').text(''); 
 
     
 
     while ($('#div1')[0].scrollHeight > $('#div1')[0].clientHeight) { 
 

 
     // get words of the text 
 
     var words = $('#div1').text().split(' '); 
 

 
     // get last word 
 
     var lastWord = words.slice(-1); 
 

 
     // pour it to div2 
 
     $('#div2').text($('#div2').text() + lastWord); 
 

 
     // remove it from the array 
 
     words.length = words.length - 1; 
 

 
     // and pour the rest back to div1 
 
     $('#div1').text(words.join(' ')); 
 

 
    } 
 
    } 
 
    
 
    $('button').click(normalize); 
 
    
 
    $('textarea').change(function() { 
 
    $('#div1').text($('textarea').val()); 
 
    }); 
 
    
 
});

#div1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: block; 
 
    word-break: break-all; 
 
} 
 

 
#div2 { 
 
    margin-top: 100px; 
 
    width: 100px; 
 
    height: 200px; 
 
    background-color: green; 
 
    display: block; 
 
    word-break: break-all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea> 
 
    aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc 
 
</textarea> 
 
<button>normalize</button> 
 
<hr> 
 
<div id="div1"> 
 
    aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc 
 
</div> 
 
<div id="div2"> 
 

 
</div>