tuto portfolio

reydha
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. j'essaie de mettre en pratique le tuto portfolio en grille, mais je suis bloqué au moment de l'affichage des details en js, il ne s'affiche absolument pas et je ne vois pas d'ou ça peut venir. j'ai pourtant tester la fonction click et celle ci se declenche bien quand je clique sur un projet..

Ce que je fais

jQuery(document).ready(function($){
    var $active=false;

    $('.work').click(function(e){
        e.preventDefault();

        var $work = $(this);
        var $detail = $work.parent().nextAll('.row-detail:first');
        var $work_detail= $('.work_detail', $work).clone();

        $detail.append($work_detail.show());
    });

});

Ce que je veux

je voudrais afficher le details du projet sur lequel je clique

Ce que j'obtiens

aucune action

21 réponses

saibe
Réponse acceptée

perso g modifié ton js car je pense q'un append va ajouter tes détails en couche.
g fais ça avec ton html ci-dessus :

$('.work').click(function(e){
        e.preventDefault();
        console.log($(this).parent().find('.row-detail')); // <- ça te sort un truc ?
        var $work = $(this);
        var $detail = $work.parent().find('.row-detail');

        $detail.html($('.work_detail', $work).html());
    });
reydha
Auteur

UP, je viens de trouver le probleme, celui ci vient du .clone()..
mais du coup je sais pas comment gerer sans le .clone()
Merci d'avance pour votre aide.

saibe

hello,
tu es certain de ton selector ?
teste ceci :

var $work_detail= $('.work_detail').clone();
reydha
Auteur

je suis certain de mon selecteur, j'ai essayé ta methode et ca ne marche toujours pas, je pense que ca doit venir de .clone()

saibe

tu pourrais envoyer ton html ?
et eventuellement le message d'erreur ?

reydha
Auteur 
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/app.css"/>
  </head>
  <body>

    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Portfolio</a>
          <a href="#" class="navbar-brand">Anthony Joly</a>
        </div>
      </div>
    </div>

        <div class="container">
            <?php for($j = 1;$j <= 3; $j++): ?>
          <div class="row">
              <?php for($i=1; $i <= 4; $i++): ?>
                <article class="col-xs-3 work">
              <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br>
              <strong>Ma Réalisation</strong><br>
              <em>Wordpress</em>
              <div class="work_detail">
                   <hr/>
                    <div class="row">
                    <div class="col-xs-8">
                     <img src="http://lorempicsum.com/futurama/460/250/1"/>
                     <img src="http://lorempicsum.com/futurama/460/250/2"/>
                     <img src="http://lorempicsum.com/futurama/460/250/3"/>
                    </div>
                    <div class="col-xs-4">
                     <h2>Mon Projet</h2>
                     <p><em>wordpress</em></p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                     </div>
                    </div>
                <hr/>
              </div>
            </article>
            <?php endfor; ?>
          </div>

          <div class="row row-detail"></div>
          <?php endfor; ?>   
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
          <script src="js/portfolio.js"></script>
  </body>
</html>
reydha
Auteur

je n'ai justement aucun message d'erreur..

saibe

;) ton row-detail ne fait pas parti de ton parent...
il ne peut pas le trouver.
remonte le dans ta div row, comme ça :

...
</article>
            <?php endfor; ?>
            <div class="row row-detail"></div>
          </div> // avant cette fermeture de ton row
          <?php endfor; ?>   
          ...

tu peux ainsi modifier légèrement tn js :

var $detail = $work.parent().find('.row-detail');
reydha
Auteur 
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/app.css"/>
  </head>
  <body>

    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Portfolio</a>
          <a href="#" class="navbar-brand">Anthony Joly</a>
        </div>
      </div>
    </div>

        <div class="container">
            <?php for($j = 1;$j <= 3; $j++): ?>
          <div class="row">
              <?php for($i=1; $i <= 4; $i++): ?>
                <article class="col-xs-3 work">
              <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br>
              <strong>Ma Réalisation</strong><br>
              <em>Wordpress</em>
              <div class="work_detail">
                   <hr/>
                    <div class="row">
                    <div class="col-xs-8">
                     <img src="http://lorempicsum.com/futurama/460/250/1"/>
                     <img src="http://lorempicsum.com/futurama/460/250/2"/>
                     <img src="http://lorempicsum.com/futurama/460/250/3"/>
                    </div>
                    <div class="col-xs-4">
                     <h2>Mon Projet</h2>
                     <p><em>wordpress</em></p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                     </div>
                    </div>
                <hr/>
              </div>
            </article>
            <?php endfor; ?>
          </div>
            <div class="row row-detail"></div>  
          <?php endfor; ?>
          </div>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
          <script src="js/portfolio.js"></script>
  </body>
</html>

Comme ca du coup ?

saibe

non avant.
juste après ton premier endfor

reydha
Auteur

j'ai maintenant une erreur dans ma console qui me dit "Failed to load resource: the server responded with a status of 404 (Not Found)"

saibe

t sous laravel ?

reydha
Auteur

non du tout

saibe

t'as modifié ton js ?
g fais un test, ça fonctionne chez moi....

reydha
Auteur

j'ai juste remplacer le nextAll par find comme tu m'as dis

jQuery(document).ready(function($){
    var $active=false;

    $('.work').click(function(e){
        e.preventDefault();

        var $work = $(this);
        var $detail = $work.parent().find('.row-detail:first');
        var $work_detail= $('.work_detail').clone();        
        $detail.append($work_detail.show());
    });

});
saibe

renvoie juste le html de ton container....

saibe

enlève le first...

reydha
Auteur 
 <div class="container">
            <?php for($j = 1;$j <= 3; $j++): ?>
          <div class="row">
              <?php for($i=1; $i <= 4; $i++): ?>
                <article class="col-xs-3 work">
              <img src="http://lorempicsum.com/futurama/220/153/<?= $i; ?>" alt=""/><br>
              <strong>Ma Réalisation</strong><br>
              <em>Wordpress</em>
              <div class="work_detail">
                   <hr/>
                    <div class="row">
                    <div class="col-xs-8">
                     <img src="http://lorempicsum.com/futurama/460/250/1"/>
                     <img src="http://lorempicsum.com/futurama/460/250/2"/>
                     <img src="http://lorempicsum.com/futurama/460/250/3"/>
                    </div>
                    <div class="col-xs-4">
                     <h2>Mon Projet</h2>
                     <p><em>wordpress</em></p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                     </div>
                    </div>
                <hr/>
              </div>
            </article>
            <?php endfor; ?>

            <div class="row row-detail"></div>  
            </div>
          <?php endfor; ?>
          </div>
reydha
Auteur

meme si j'enleve le first rien ne se passe ..

reydha
Auteur

je te remercie enormement, ca venait bien du append donc .. Merci infiniment

saibe

avec plaisir ;)