jQuery cannot make content below element move up and down when open and closed

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

Oh.. at quick look the whole structure needs to change. currently it looks like you have positioning horizontally ... like table -> row -> cell. you need to make it so its table -> column -> cell — deach, Dec 20 '12 at 03:48
in jsfiddle the LIs (each content area) is relative and so it pushes down when the one above (above as in html hierarchy) increases in height. On the site the LIs are absolute also the LI below the chat LI is not the next LI (in html hierarchy). — deach, Dec 20 '12 at 04:04
So I will need to reformat the entire html and css? Also, can anyone explain what jquery commands i am missing to make the below

extramaster · Accepted Answer · 2012-12-20T05:58:26.427

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

The demo works perfect thank you. I cant seem to get it to work on the site though. Did you only edit the js? — user1917562, Dec 20 '12 at 04:50
Does it work at all? Re-run the code [see edit], it may be a bug from JsFiddle that's causing it.. http://stackoverflow.com/a/5733398/1756941 — extramaster, Dec 20 '12 at 04:54
So I should just be able to copy and paste the above code into which js file? I tried to paste it into the home.js file. Or do i need to replace the code I had in there with the above code? Sorry, I feel like a dummy on this lol. I really appreciate the help. — user1917562, Dec 20 '12 at 05:08
You should be able to just copy-and-paste the code to the end of either home.js or toggle.js.. — extramaster, Dec 20 '12 at 05:20
Awesome got it to work, one thing though, if you view the page, the ad at the bottom still doesnt show as it goes under the next one. Is there a way i can change the height so it goes far enough down to show the small ad too? — user1917562, Dec 20 '12 at 05:38
just that and the ad should disapear when clicked away aswell. Thank you so much mate youre a real life saver — user1917562, Dec 20 '12 at 05:41

score 0 · Answer 2 · answered Dec 20 '12 at 04:53

Its a bit complex but what needs to happen, if you don't want to change the structure, is to assign each LI a class to which column it belongs to when page loads. So each LI has a class c1, c2, c3...

Then when a textarea is clicked in its LI container. All other LIs in that column that are after the clicked LI need increase their 'top' by the height difference of the clicked textarea...

SO... lets assume the textarea increases by 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
            })
       }
    })
})

Hope that makes sense ...

jQuery cannot make content below element move up and down when open and closed

2 Answers2

Edit: