页面内容更改时的布局问题

Question

I'm stuck on a problem here that I've been trying to d/dx. I have a layout for an inventory page, and the css is set up to properly to make it display correctly. Let me start off with the html/php code:

<div class='container-fluid second-row'>
        <div class='row' id='truckviewer-content'>
        </div>
        <div id="display">
        <div class='row content' id='content'>
            <div class='col-md-2 col-md-offset-2 page-title hidden-sm hidden-xs'>
                <h1 class='page-title-top'>Inventory</h1>
            </div>
            <div class='col-md-6'>
                <h3 class='page-sub-title'>Pick Your Rig</h3>
                <p>
                    Not only does Lone Mountain Truck Leasing provide a great selection of reliable semi trucks for sale, usually 3-5 years old, we also ensure your satisfaction because we encourage you to drive the truck off the lot for diagnostic evaluations and required inspections.
                </p>
                <p>
                    Our inventory includes fleets of semi trucks for sale, so take a look at just a few samples of our current inventory, and if you find something you like, give us a call toll-free at 866.512.5685, or contact us with the form below.
                </p>
            </div>
        </div>
        <div class='row'>
            <div class='col-md-10 col-md-offset-1'>
                <form class='form-inline center' role='form'>
                    <h3 class='inventory-sub-title'>Filters</h3>
                    <div class='form-group'>
                        <select id='yearFilter' class='filter form-control'>
                            <option value="allY" selected>-- year --</option>
                            <option value="2015">2015</option>
                            <option value="2014">2014</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='makeFilter' class='filter form-control'>
                            <option value="allM" selected>-- Make --</option>
                            <option value="freightM">Freightliner</option>
                            <option value="intM">International</option>
                            <option value="kenM">Kenworth</option>
                            <option value="mackM">Mack</option>
                            <option value="peteM">Peterbilt</option>
                            <option value="volvoM">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select  id='engineFilter' class='filter form-control'>
                            <option value="allE" selected>-- Engine --</option>
                            <option value="catE">Caterpillar</option>
                            <option value="cumE">Cummins</option>
                            <option value="detE">Detroit</option>
                            <option value="mackE">Mack</option>
                            <option value="volE">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='transFilter' class='filter form-control'>
                            <option value="allT" selected>-- Transmission --</option>
                            <option value="10T">10 Speed</option>
                            <option value="13T">13 Speed</option>
                            <option value="18T">18 Speed</option>
                            <option value="autoT">Auto</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='apuFilter' class='filter form-control'>
                            <option value="allA" selected>-- APU --</option>
                            <option value="apuYes">Yes</option>
                            <option value="apuNo">No</option>
                        </select>
                    </div>
                    <a href="" id="showAll">Show All</a>
                </form>
            </div>
        </div>
            <?
                $truckorder = file_get_contents("truckorder.tpl");
                $truckorder = preg_replace('/\s+/', ' ', trim($truckorder));
                $tagname = "truckorder";
                $trucks = parseContent($truckorder, $tagname);
                $trucks = explode("|", $trucks); 
                foreach($trucks as $truck){
                    $truck = preg_replace('/\s+/', ' ', trim($truck));
                    $quickview = file_get_contents("groups/group_$truck/content/quickview.tpl");
                    $quickview = preg_replace('/\s+/', ' ', trim($quickview));              
                    $tagname = "quickfilter";
                    $filter = parseContent($quickview, $tagname);
                    $tagname = "quicktitle";
                    $title = parseContent($quickview, $tagname);
                    $tagname = "quickprice";
                    $price = parseContent($quickview, $tagname);
                    $tagname = "quicklook";
                    $specs = parseContent($quickview, $tagname);
                    $detailview = file_get_contents("groups/group_$truck/content/detailview.tpl");
                    $detailview = preg_replace('/\s+/', ' ', trim($detailview));
                    $tagname = "trucks";
                    $params = parseContent($detailview, $tagname);
                    $param = explode("|", $params);
                    $param1 = $param[0];
                    $param2 = $param[1];
                    $param3 = $param[2];
                    $param4 = $param[3];
                    $instock = getTruckTotals($param2,$param3,$param4);
                ?>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 truck<?=$filter?>">
                    <div class="item ">
                        <p class='truck-img-align'>
                            <img class="truckTip" src="groups/group_<?=$truck?>/photos/quicktruck.png" border="no-border" />
                        </p>
                        <a class='ajax ajax-main' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>"><div class="caption"><h4>Quick Look</h4><?=$specs?></div></a>
                    </div>
                        <h3 class='truck-title'><?=$title?></h3>
                        <h3 class='truck-price'><?=$price?></h3>
                        <p  class='in-stock'><?=$instock?></p>
                        <a class='ajax bottom-link' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>">Click or hover for more details</a>
                </div>
                <?
                }
                ?>
            </div>
    </div>

EDIT: I have changed the javascript up. I have added a new sorting algorithm that is beginning to solve the problems that I am facing, but the error is now different.

$(function(){
    sortDisplay();
});

// Image Overlay
$('.item').hover(function() {
    $(this).find('div.caption').stop(false,true).fadeIn(200);
},
function(){
    $(this).find('div.caption').stop(false,true).fadeOut(200);
});
// Filtering
$("#showAll").click(function(){
    sortDisplay();
    $(".truck").addClass("allY allM allE allT allA");
    $("#yearFilter").val("allY");
    $("#makeFilter").val("allM");
    $('#engineFliter').val("allE");
    $('#transFliter').val("allT");
    $('#apuFliter').val("allA");
    $(".truck").show();
    // Update Filters
    $("#yearFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allY'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#makeFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allM'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#engineFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allE'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#transFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allT'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#apuFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allA'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
});
$('.filter').change(function(){
    sortDisplay();
    $(".truck").each(function(){
        $(this).removeClass("truck-reset");
    });
    $(".truck").addClass("allY allM allE allT allA");
    var year = $("#yearFilter").val();
    if(year !=='allY'){
        $(".truck").removeClass("allY");
    }   
    var make = $("#makeFilter").val();
    if(make !=='allM'){
        $(".truck").removeClass("allM");
    }   
    var eng = $("#engineFilter").val();
    if(eng !=='allE'){
        $(".truck").removeClass("allE");
    }   
    var trans = $("#transFilter").val();
    if(trans !=='allT'){
        $(".truck").removeClass("allT");
    }   
    var apu = $("#apuFilter").val();
    if(apu !=='allA'){
        $(".truck").removeClass("allA");
    }   
    $(".truck").hide();
    $(".truck").each(function(){
        if($(this).hasClass(year)&&$(this).hasClass(make)&&$(this).hasClass(eng)&&$(this).hasClass(trans)&&$(this).hasClass(apu)){
            $(this).fadeIn();
        }
    });
    //$("#anchor").slideto();
    // Update Filters
    $("#yearFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allY'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#makeFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allM'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#engineFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allE'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#transFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allT'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });
    $("#apuFilter option").each(function(){
        var thisClass = $(this).val();
        if($('.'+thisClass+':visible').size() < 1 && $(this).val() !=='allA'){
            $(this).attr('disabled','disabled');
        }
        else{
            $(this).removeAttr('disabled');
        }
    });

});
// Check If Filter Exists Else Disable Select Option
$("#yearFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allY'){
        $(this).attr('disabled','disabled');    
    }
});
$("#makeFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allM'){
        $(this).attr('disabled','disabled');    
    }
});
$("#engineFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allE'){
        $(this).attr('disabled','disabled');    
    }
});
$("#transFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allT'){
        $(this).attr('disabled','disabled');    
    }
});
$("#apuFilter option").each(function(){
    var thisClass = $(this).val();
    if($('.'+thisClass+'').size() < 1 && $(this).val() !=='allA'){
        $(this).attr('disabled','disabled');    
    }
});
$('.ajax').click(function(e){
    e.preventDefault();
    var truckWindowId = $(this).data('truck');
    var truckWindowTitle = $(this).data('title');
    var truckWindowStock = $(this).data('stock');
    var truckWindowPrice = $(this).data('price');
    var content = {
        id : truckWindowId,
        title : truckWindowTitle,
        stock : truckWindowStock,
        price : truckWindowPrice
    };
    $.ajax({
        url: "../assets/server/inventory/getTruckDetails.php",
        type: "POST",
        data: content,
        dataType: "JSON",
        cache: false,
        success: function(data){
            var images = data.images;
            $('#display').fadeOut(function(){
                $('#content').fadeOut();
                $('#truckviewer-content').html(data.message).fadeIn();
                //shut off the carousel autoscroll feature
                $('.carousel').carousel({
                  interval: false
                });
                //allow for outside the box to be clickable and closer the div on click
                $(document).mouseup(function(e){
                    var container = $(".truckview");
                    if(!container.is(e.target) && container.has(e.target).length === 0){
                        $('.closer').trigger("click");
                    }
                });
            }); 
        }
    });
});
$(function(){
    $("#truckviewer-content").on('click', '.closer', function(e){
        e.preventDefault();
        var viewer = $('#close-button').data('toggle');
        $(viewer).fadeOut(function(){
            $('#content').fadeIn();
            $('#display').fadeIn();
        });
    });
});


function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
            if(count <= 3){
                if(count == 0 && $(this).is(':visible')){
                    vizCount++;
                    $(this).addClass('view-sort-left');
                }else if(count == 3 && $(this).is(':visible')){
                    vizCount++;
                    $(this).addClass('view-sort-right');
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            }else if(count > 3){
                if($(this).is(':visible')){
                    if(vizCount%4 === 0){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                    }else if(vizCount%4 === 3){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                    }else{
                        vizCount++;
                    }
                }
            }
            count++;
        });
    }
}

EDIT: What's happening now is that when the second row of items gets checked the objects won't have the sorting classes of .sort-view-left or .sort-view-right appended to them, but they do in the first row. If you need further explanation please comment, and I'll answer.

This is all working properly but I'm sure I'm going to need to tweek it with what I am trying to figure out what to do.

When the items change display based on the filter that you pick, the css layout doesn't correct itself, that is because of the nth-child selectors used to pick them.

.truck{
    width: 16%;
    margin-left: 1%;
    margin-right: 1%;
    min-height: 350px;
    margin-top: 25px;
}
.view-sort-left{
    margin-left: 14% !important;
}

.view-sort-right{
    margin-right: 14% !important;
}

.truck-reset:nth-child(4n-1){
    margin-left: 14%;
}

With all that information above given, it is time to get to the point. What I'm trying to figure out is how do I change it up so that system is smart enough to decide how many objects are being shown on the inventory page, and then calculate a nice css table based on that. I'm almost considering just doing that from the get go. And then also calculate it based on page width as well. This might be too big of a problem to post on here. I'm not sure, i'm still kind of a noob at posts on here. if someone has an idea though let me know. If you think I should consolidate and shrink this problem down let me know that as well, and I can fix problems that way. I would like to put my brain together with someone on here though so that I can get to the bottom of this problem. Hope to hear from some people soon!

Answer 1

Figured it out, I needed to consolidate the two loops into just one and use options within the if statement to determine where my classes should go.

function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%4 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 3 || vizCount%4 == 3)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        });
    }else if($(window).width() <= 1200 && $(window).width() > 992){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%3 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 2 || vizCount%3 == 2)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        }); 
    }else{
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
        });
    }
}

$(window).resize(function(){
    sortDisplay();
})