Question

I have this webpeage…

http://grabbers.maddoggmedia.com/

When a visitor clicks on the text input inside the chat area, I want the chat to open up, which it does. However I cannot seem to figure out how to move the content below up and down as it opens and closes. As of now it just goes underneath the other content.

I really need this completed soon, I would appreciate any help. I have spent 6 hours today trying to find the right answer to no avail.

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();
 });

Answer 1

The following block of code was found on your site:

    // 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);

So call it each time you update the list..

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: DEMO | SOURCE

Fiddle to work with: http://jsfiddle.net/apAAG/

Edit:

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();
    });
});