html - Masonry plugin not working -

-

i have started use masonry plugin cannot work. below picture of problem.

enter image description here

as can see not desired effect. below code using:

content 

    <div class="container" id="reviews">   <div class="row">     <div class="comment-block">       <div class="new-comment"></div>         <?php            while($row = mysqli_fetch_array($result)) {             $data = mysqli_fetch_array(mysqli_query($con, "select first_name, last_name transactions order_id = '{$row['order_id']}'"));             $name = $data['first_name']. ' '. mb_substr($data['last_name'], 0, 1);             if($row['rating'] == 5) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 4) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 3) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 2) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 1) $star = '<span class="glyphicon glyphicon-star review_star"></span>';            ?>           <div class="col-md-4">             <div id="box_review">               <h3><?php echo $star; ?></h3>               <h5 class="thin"><?php echo $row['date'] ?></h5>               <blockquote>                 <p><?php echo $row['comment'] ?></p>                 <footer><?php echo $name ?></footer>               </blockquote>             </div>            </div>         <?php } ?>     </div><!-- ./ comments block -->   </div><!-- ./ row --> </div><!-- ./ container -->

masonry 

    $(document).ready(function() {   $('#reviews').masonry({    columnwidth: 400,    itemselector: '#box_review'   }).imagesloaded(function() {    $('#reviews').masonry('reload');   }); });

please can me doing wrong? using bootstrap grid system way not sure if might problem. thanks.

you should apply bootstrap's col-md-x classes blocks because explicitly telling masonry minimal width of blocks 400 pixels , bootstrap's col-md-x can vary depending on screen's resolution.

  1. define minimum width of blocks (just old 960 grid system 16 columns (which means 60 pixels minimum). 400 pixels seems lot, no ? let's 100px.
  2. define new class, let's .masonry-normal-grid , apply blocks.

in css, create 

.masonry-normal-grid {     width:300px; }

you can create .masonry-small-grid or .masonry-large-grid long thecolumnwidth defined in javascript represents lowest width of classes (you should not have css class width smaller javascript attribute columnwidth).

important : id must unique ! rename <div id="box_review"> <div class="box_review"> (and change in javascript attribute #box_review .box_review too)

note : should if elseif instead of if (or switch(case)).


Comments

Post a Comment

Popular posts from this blog

c# - Unity IoC Lifetime per HttpRequest for UserStore -

-
i'm trying clean default implementation of accountcontroller.cs comes out of box in new mvc5/owin security implementation. have modified constructor this: private usermanager<applicationuser> usermanager; public accountcontroller(usermanager<applicationuser> usermanager) { this.usermanager = usermanager; } also, have created lifetime manager unity looks this: public class httpcontextlifetimemanager<t> : lifetimemanager, idisposable { private httpcontextbase _context = null; public httpcontextlifetimemanager() { _context = new httpcontextwrapper(httpcontext.current); } public httpcontextlifetimemanager(httpcontextbase context) { if (context == null) throw new argumentnullexception("context"); _context = context; } public void dispose() { this.removevalue(); } public override object get...
Read more

Change the color of an oval at click in Java AWT -

-
i have draw ovals in java, , @ click change color. beginning tried change color after 20 ms, doesn't work. my code is: public class mycomponentnew extends frame { public graphics2d g2d; public mycomponentnew(string title) { super(title); setsize(400, 550); } @override public void paint(graphics g) { this.g2d = (graphics2d) g; this.g2d.setcolor(color.red); this.g2d.filloval(10, 55, 50, 100); } public void changecolor () { this.g2d.setcolor(color.blue); this.g2d.filloval(10, 55, 50, 100); } } and in class main method have: mycomponentnew m; m = new mycomponentnew("fereastra cu baloane"); m.setvisible(true); m.addwindowlistener(new windowadapter() { @override public void windowclosing(windowevent we) { system.exit(0); } }); try { thread.sleep(20); } catch(interruptedexception e) {} m.changecolor(); the color of oval remains red. ...
Read more

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -

-
i writing program in fortran find velocity of parachuting person in relation time. keep getting error can't fix. new programming , appreciated. the error is v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) 1 error: incompatible ranks 0 , 1 in assignment @ (1) and program is program para integer :: real :: v(11) !velocity real :: q !initial velocity real :: h !time step real :: c !drag coefficient real :: m !mass ! gravity equal 32 ft/s^2 write (*,*)'enter time step' read(*,*)h write(*,*)'enter initial velocity' read(*,*)q write(*,*)'enter drag coefficient' read(*,*)c write(*,*)'enter mass' read(*,*)m i=1,10 ! 1 10, 1 being interval. end v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) q=v(1) end program you cannot use [] normal parenthesis in expressions. array constructor, [ items ] means array items elements. end do should after line.
Read more