Additional divs with Ajax JSON do not take the style

Asked

Viewed 43 times

0

I have a little problem, I made a programming of portffolio blocks where when I press on loads more my ajax creates the other blocks of the database. However he is not pulling the style that the blocks that are already in html have, which would be the position Absolute and the top and left to stand next to each other. To make these style and animations use the ISOTOPE.

CODE:

 <script type="text/javascript">
var loadedImageCount, imageCount;
$(function() {

    // GRID
    var $container = $('.grid');
    $container.imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });

    // filter functions
    var filterFns = {
        // show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt(number, 10) > 50;
        },
        // show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };


    // bind filter button click
    $('.filters-button-group').on('click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[filterValue] || filterValue;
        $container.isotope({
            filter: filterValue
        });

    });
    // change is-checked class on buttons 
    $('.button-group').each(function(i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });

    var loadedImageCount, imageCount;
    $('#add').click(function() {
        // add new images
        var items = getItems(function(html) {
            $container.prepend($(html));
        });

        // use ImagesLoaded
        $container.imagesLoaded()
            .progress(onProgress)
            .always(onAlways);

    });

});
// ----- ----- //

// return doc fragment with
function getItems(callback, items, contador) {
    if (!items) items = '';
    if (typeof contador == 'undefined') contador = 6;
    _getImageItem(function(html) {
        items += html;
        contador--;
        if (contador == 0) callback(items);
        else getItems(callback, items, contador);
    });

}



// return an <li> with a <img> in it
function _getImageItem(_callback) {
    var item = "";
    jQuery.ajax({
        url: "pegaPortifolio.php/?id=1", //?id="+idUltimo,
        dataType: "json", //Tipo de Retorno
        success: function(data) {
            var pt1 = data.map(function(obj) {
                return '<div class="element-item ' + obj.menu + '" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" class="portfolio-link" data-toggle="modal"><img src="' + obj.imageM + '" alt="project 2"><div class="fundo-port"><h1>"' + obj.tipo + '"</h1><h2>"' + obj.nome + '"</h2></div></a></div></div></div>';
            }).join('');
            _callback(pt1); // <- aqui envias de volta para a callback da chamada da função
        }
    });
}



// triggered after each item is loaded
function onProgress(imgLoad, image) {
    // change class if the image is loaded or broken
    var $item = $(image.img).parent();
    $item.removeClass('is-loading');
    if (!image.isLoaded) {
        $item.addClass('is-broken');
    }
    // update progress element
    loadedImageCount++;
}

// hide status when done
function onAlways() {}

        </script>
  • 1

    Can mount a jsfiddle with css and etc?

  • I’ll put the site on the air and I’ll edit for you give a better look...

  • ta giving some problems I caught this plug here Isotope.metafizzy.com; css is caught by Isotope.pkgd.js

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.