javascript - Remove and then add same element to Packery JS -


i want remove 2 elements , add them grid built packery when button clicked. code given below:

$('.append-button').on( 'click', function() {   // create new item elements   var $items = getitemelement().add( getitemelement() ).add( getitemelement() );   var $items2 =  $('.big');   var el = $items2;    // remove , append elements container   $grid.packery('remove', $items2).packery('layout')   $grid.append( $items2 )     // add , lay out newly appended elements     .packery( 'appended', $items2 ); });

if this, elements referenced $items2 appear on reload of packery disappears. codepen demo here. know how can delete 2 elements , add them in stable manner? in advance!!

i added .clone() function duplicate element before removing it. removed old one. worked quite well.

new codepen:

http://codepen.io/anon/pen/qrzxwg

// external js: packery.pkgd.js    var $grid = $('.grid').packery({    itemselector: '.grid-item'  });    $('.append-button').on( 'click', function() {    // create new item elements    var $items = getitemelement().add( getitemelement() ).add( getitemelement() );      var $new = $('.big').clone();      var $items2 =  $('.big');      var el = $items2;      // append elements container      $grid.packery('remove', $items2).packery('layout')      $grid.append( $new )        // add , lay out newly appended elements        .packery( 'appended', $new );  });      // make <div class="grid-item grid-item--width# grid-item--height#" />  function getitemelement() {    var $item = $('<div class="grid-item"></div>');    // add width , height class    var wrand = math.random();    var hrand = math.random();    var widthclass = wrand > 0.85 ? 'grid-item--width3' : wrand > 0.7 ? 'grid-item--width2' : '';    var heightclass = hrand > 0.85 ? 'grid-item--height3' : hrand > 0.5 ? 'grid-item--height2' : '';    $item.addclass( widthclass ).addclass( heightclass );    return $item;  }
/* unmodified minified */    *{box-sizing: border-box;}body{font-family: sans-serif;}/* ---- grid ---- */.grid{background: #ddd; max-width: 1200px;}/* clear fix */.grid:after{content: ''; display: block; clear: both;}/* ---- .grid-item ---- */.grid-item{float: left; width: 80px; height: 80px; background: #c09; border: 2px solid hsla(0, 0%, 0%, 0.5);}.grid-item--width2{width: 160px;}.grid-item--height2{height: 160px;}.grid-item--width3{width: 240px;}.grid-item--height3{height: 240px;}button{font-size: 20px;}
<!-- left unmodified it's minified -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://mfzy.co/packery.pkgd.js"></script><div class="grid"> <div class="grid-item grid-item--width2"></div><div class="grid-item grid-item--height2"></div><div class="grid-item big"></div><div class="grid-item big"></div><div class="grid-item grid-item--height2"></div></div><p><button class="append-button">append items</button></p>


Comments

Post a Comment

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more