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/

编辑：

主页.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 容器中单击一个 textarea 时。该列中在单击的 LI 之后的所有其他 LI 需要通过单击的文本区域的高度差来增加它们的“顶部”...

所以......让我们假设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 回答