html - Combining jQuery filtering and Bootstrap rows -


i have simple bootstrap grid this

    <div class="container-fluid">         <div id="parent">             <div class="row row-striped">                 <div class="category1 col-xs-12">                     //of course more cols , contents in them                 </div>             </div>         </div>    </div>

and put filter on buttons ids (thanks https://codepen.io/terf/post/jquery-filter-divs)

    <button class="btn btn-link" id="category1">category 1</button>

but because need background on every second row, decided add new row jquery every 2 items. causes problem filter, because whenever filter, new row being kept (and empty).

this javascript part:

<script type="text/javascript">     function aligndivs() {         var $mainelem = $('.row.row-striped'),                 $parent = $mainelem.parent(), // div#parent                 $items = $mainelem.children(':gt(1)').detach(); // detach +1 items          if ($items.length) {             (var = 0; < $items.length; = + 2) { // 2 items per row                 var $row = $('<div class="row row-striped">').append($items.slice(i, + 2));                 // new row detached items                 $parent.append($row);             }         }     }      aligndivs(); //initially align cols/rows      $(document).ready(function () {         var $btns = $('.btn').click(function () {             if (this.id === 'all') {                 $('#parent').find('> .row > div').fadein(450);                 aligndivs(); //reload col/row layout             } else {                 var $el = $('.' + this.id).fadein(450);                 $('#parent').find('> .row > div').not($el).hide();                 aligndivs(); //reload col/row layout             }             $btns.removeclass('active');             $(this).addclass('active');          });     }); </script>

i tried stuff .on('change'), or removing before-last row (.eq(-2)) doesn't work expect to. when remove before-last row example, still deletes 1 item inside instead of empty one.

what want have 2 items in row , open new one, , if 2 items exist after filter, delete new row between them 1 row 2 items again - , not 1 item per row.

here jsfiddle current code, can see problem if click on website or online-shop: https://jsfiddle.net/a3e7xmho/1/

finally found solution.

the trick set background dynamically jquery cols instead of row , check :visible-state. 

function setbackgroundpositions() {         var width = $('.row-striped').width();         $('.col-project:visible').each(function(i) {             if (i % 4 >= 2) {                 $(this).css('background-image', 'none');             } else {                 $(this)                         .css('background-image', 'url("/img/projects/image.png")')                         .css('background-position', ((i % 4) * -1 * (width/2)) + "px 0")                         .css('background-size', 'cover');             }         });     }

Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more