Listing in PHP by clicking button and showing more results that don’t keep CSS?

Asked

Viewed 795 times

1

I created a list that displays 6 results and below I have a "Show more" button that calls another query that displays 4 results. However, the results of this last query do not keep the CSS. It appears misaligned. Listagem da primeira query

inserir a descrição da imagem aqui

The code I have is this::

<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Portfolio</h2>
                <hr class="small">
                <div class="row">
                <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album ASC limit 6");
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                    </div>
                    <?php } ?>

             <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album DESC limit 4");
            ?><div id="fotos" style="display:none"> <?php
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                      </div>
                        <?php } ?>
                    </div>
                </div>
                <!-- /.row (nested) -->
                 <div id="button"><a class="btn btn-dark">View More Categories</a></div>
            </div>
            <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

The button code is as follows:

<script>
   $("button").click(function(){
      $("#fotos").fadeIn();
      $("#button").hide();
   });
</script>

Thank you.

php html css

  • First problem: your jQuery code assigning click event to button is incorrect. Instead of $('#button')' você colocou $('button')sem o hashtag#` which indicates that it is an id, which means that the event does not work. About the CSS problem, you have to post your CSS to the question so someone can solve it.

2 answers

0

Are you using Bootstrap? Review how you are organizing your objects. This is the way in documentation:

<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>
//Outra row
<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>

Notice how you’re doing:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div id="fotos" style="display:none">
       <div class="col-md-6"></div>
   </div>
</div>

Lost the arrangement of divisions within Row.

I think it should be:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div class="col-md-6">
      <div id="fotos" style="display:none"> seu conteúdo</div>
   </div>
</div>

  • I already changed the code and now just returns a result in the second query. I put it like this: <? php $query? > <div class="col-Md-6"> <div id="photos" style="display:None;"> <div class="portfolio-item"> </div> </div> </div> <?php } ? >

  • The problem of inserting php into html structure is readability. It is difficult to create and much more difficult later to maintain. You can do it, it’s not wrong, but it’s not the first choice. Try creating your html page with the 6 first fots. Then insert another photo Row. you know that the first part of the code will always be there and the second one will be dynamic. Then slowly switch to php. It’s definitely something related to the page arrangement.

-2

my suggestion is to put classes that hide and display the columns, then Voce need not stick another div between the columns...

  <div class="row">
//primeiro while
      <div class="col-sm-6">Conteúdo da sua divisão 1</div>
      <div class="col-sm-6">Conteúdo da sua divisão 2</div>  
//segundo while  
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 3</div>
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 4</div>
    </div>
        <div id="button"><a class="btn btn-dark">Ver mais</a></div>


<script>
   $("button").click(function(){
      $(".oculta").slideDown();
      $("#button").hide();
   });
</script>

<style>

.oculta{
    display:none
 }

 </style>

Browser other questions tagged php html css

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