Question

I’ve been working on this jquery system where multiple div’s nth-child position changes or “shifts” based on browser width. It’s almost complete but I’ve ran into one issue that I can’t manage to wrap my head around at this point, I’ll explain..

I have 4 divs by default with their own nth-child positions, then when your browser width or window size changes into one of my specified ranges, the divs nth-child position changes. I’m using the .empty technique to make this all work, and that is where my problem lies. So say I have four divs all with text within them.. when the browser width changes, the text inside the divs dissapears or “empties”. And when I do not use empty, the text within these divs stays, but the nth-child shifter doesn’t work correctly… here is the jsFiddle without empty.

http://jsfiddle.net/H5REk/8/
When you resize the HTML window the text colors red, blue etc. from the other divs still remain.. so I fix this by using .empty. like so:

http://jsfiddle.net/H5REk/7/

But again, when .empty is used and you’re not in the specified window size / browser width.. the text within the divs dissapear or get “emptied”.

So, the problem with one method is all my text within the divs get emptied. And then with the other method, divs or text is being recreated and not removed.. So how would I get it to work so the browser width nth-child changer works correctly while also making the text within my divs still stay?

Answer 1

Based on your comments I have a couple different solutions.

I did not know whether you wanted the special colored boxes to temporarily replace the existing ones (current behavior) or if you wanted them to be appended after the nth-child box you specified (based on your comments).

In both of these the removeSpecialBoxes method is called at the beginning of checkWidth

Replacement Method (jsfiddle)

This approach is a bit more complicated as you need to keep track of the items you remove and then reinsert the same exact item later. In addition to the below JS, there were some CSS changes as well, namely I made the special boxes have IDs and each have the class test.

First, I created a new object to hold the stored boxes.

var theStored = {};

Then I created a couple methods to handle the creation and removal of special boxes.

function makeSpecialBox(id, content) {
    // Create a new special box with the class name and the content
    var specialBox = $("<div />", {
        "id": id,
        "class": "test"
    }).html(content);
    // Return the special box
    return specialBox;
}

function removeSpecialBoxes() {
    // Get the special boxes
    var specialBoxes = $("#wrapper div").filter(".test");
    // For each special box
    specialBoxes.each(function(index, specialBox) {
        // Get the special box's ID
        var specialBoxId = $(specialBox).attr("id");
        // Get the associated stored box
        var storedBox = theStored[specialBoxId];
        // Replace the special box with the stored box
        $(specialBox).replaceWith(storedBox);
    });
}

Then I modified your setNthPosition method to handle the storing and replacing of the existing box with the special box.

function setNthPosition(theDiv, newPos){
    // Generate a new special box
    var specialBox = theDivs["div"+theDiv].clone();
    // Get the special box ID
    var specialBoxId = specialBox.attr("id");
    // Get the existing box to replace
    var existingBox = $("#wrapper div:nth-child("+newPos+")");
    // Clone the existing box and store it based on the special box ID
    theStored[specialBoxId] = existingBox.clone();
    // Replace the existing box with the special box
    existingBox.replaceWith(specialBox);
}

Appending Method (jsfiddle)

This approach is a bit simpler. It is essentially the existing code from your question with a few minor changes.

function makeSpecialBox(className, content) {
    // Create a new special box with the class name and the content
    var specialBox = $("<div />").addClass(className).html(content);
    // Return the special box
    return specialBox;
}

function removeSpecialBoxes() {
    // Get the special boxes
    var specialBoxes = $("#wrapper div").filter("[class^='test']")
    // Remove the special boxes
    specialBoxes.remove();
}

function setNthPosition(theDiv,newPos){
    // Generate the special box
    var theClone=theDivs["div"+theDiv].clone();
    // Append the special box after the nth-child
    $("#wrapper div:nth-child("+newPos+")").after(theClone);
}