0

私はこのウェブピージを持っています...

http://grabbers.maddoggmedia.com/

訪問者がチャットエリア内の入力されたテキストをクリックすると、チャットが開きます。ただし、コンテンツを開いたり閉じたりするときに、コンテンツを上下に移動する方法がわからないようです。今のところ、それは他のコンテンツの下にあります。

私は本当にこれをすぐに完了する必要があります、私は助けをいただければ幸いです。私は今日6時間かけて、役に立たない正しい答えを見つけようとしました。

http://jsfiddle.net/maddoggmedia/6LK4p/

 $(document).ready(function() {

 $('#chat-box-chats').hide();

 $(".chat-box-textinput").click(function(){
 $("#chat-box-chats").show();
 });

 $(".chat-box-textinput").click(function(){
 $(".chat-box-banner").show();
 });
4

2 に答える 2

1

次のコードブロックがサイトで見つかりました：

    // Prepare layout options.
    var options = {
        autoResize: true,
        // This will auto-update the layout when the browser window is resized.
        container: $('#main'),
        // Optional, used for some extra CSS styling
        offset: 40,
        // Optional, the distance between grid items
        itemWidth: 264 // Optional, the width of a grid item
    };

    // Get a reference to your grid items.
    var handler = $('#tiles li');

    // Call the layout function.
    handler.wookmark(options);

したがって、リストを更新するたびに呼び出します。

Js：

   function updateTable() {
    var options = {
        autoResize: true,
        container: $('#main'),
        offset: 40,
        itemWidth: 264
    };
    var handler = $('#tiles li');
    handler.wookmark(options);
}
$(document).ready(function() {
    $('div[id*="chat-box-chats"]').hide();
    updateTable();

    $(".chat-box-textinput textarea").focus(function() {
        $(this).parent().parent().find("#chat-box-chats").show();
         updateTable();
    });

    $(".chat-box-textinput textarea").blur(function() {
        $(this).parent().parent().find("#chat-box-chats").hide();
         updateTable();
    });

    $(".chat-box-textinput").click(function() {
        $(".chat-box-banner").show();
    });
});

JsFiddle：デモ| ソース

使用するフィドル：http：//jsfiddle.net/apAAG/

編集：

Home.js：

 function updateTable() {
    var options = {
        autoResize: true,
        container: $('#main'),
        offset: 40,
        itemWidth: 264
    };
    var handler = $('#tiles li');
    handler.wookmark(options);
}

// bookmark stars
 $(document).ready(function() {
 $('#chat-box-chats').hide();
 $('#nav-status-offline').hide();
 $('.chat-box-banner').hide();
 // hides the slickbox as soon as the DOM is ready

 $(".chat-box-textinput").click(function(){
  $("#chat-box-chats").show();
});
 $("#nav-status").click(function(){
  $("#nav-status-offline").show();
});
 $("#nav-status").click(function(){
  $("#nav-status").hide();
});
 $("#nav-status-offline").click(function(){
  $("#nav-status-offline").hide();
});
 $("#nav-status-offline").click(function(){
  $("#nav-status").show();
});
 $(".chat-box-textinput").click(function(){
  $(".chat-box-banner").show();
});

$('span.bookmark').click( function() {
$('span.bookmark').toggleClass("pushed");
$('span.bookmark img').toggleClass("noopacity");
});

$('textarea').each(function() {
// Stores the default value for each textarea within each textarea
$.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});
});

$(document).ready(function() {
    $('div[id*="chat-box-chats"]').hide();
    updateTable();

    $(".chat-box-textinput textarea").focus(function() {
        $(this).parent().parent().find("#chat-box-chats").show();
        $(this).parent().parent().find(".chat-box-banner").show();
        $(this).addClass("big-textarea");
         updateTable();
    });

    $(".chat-box-textinput textarea").blur(function() {
        $(this).parent().parent().find("#chat-box-chats").hide();
        $(this).parent().parent().find(".chat-box-banner").hide();
        $(this).removeClass("big-textarea");
         updateTable();
    });
});
于 2012-12-20T04:40:22.513 に答える
0

少し複雑ですが、構造を変更したくない場合は、ページの読み込み時に各LIにその列が属するクラスを割り当てる必要があります。したがって、各LIにはクラスc1、c2、c3があります。

次に、テキストエリアがそのLIコンテナでクリックされたとき。クリックされたLIの後にあるその列の他のすべてのLIは、クリックされたテキスト領域の高さの差だけ「上部」を増やす必要があります。

SO...textareaが100px増加すると仮定しましょう。

$('textarea').click({
    myLI = $(this).parent() //if its the direct parent

    var columnClass = myLI.attr('class') // returns c1, c2, c3 ... 

    myLIIndex = $('.'+columnClass ).index(myLI[0]); //gets the index of the LI(from the textarea) thats been clicked

    //selects each LI in this column and if it is after the clicked LI increase its top
    $('.'+columnClass).each(function(idx){
        if(idx >myLIIndex ){
            $(this).css({
                top:$(this).offset.top + 100
            })
       }
    })
})​

それが理にかなっていることを願っています...

于 2012-12-20T04:53:29.457 に答える