Bug PHP : includes

Bonjour à tous,

J'ai un souci dans le code de mon site internet, c'est pourquoi je me permets de vous interroger !
Voici le site :

http://www.pierreemmanuelvandeputte.com/

Le bug, vient des includes, du moins, je crois!

ex 1 :
Aller sur la page index, puis cliquer sur un des projets dans la liste; le footer de la page index reste sur la page du projet en cours (alors qu'il ne devrait pas); actualisez, il disparait !

Ex 2 :
Aller sur la page Contact, puis successivement sur la page About, la fin de la page About ne se charge pas, actualiser, elle apparait...

Je ne comprends pas...
Je croyais que le code c'était plutôt pragmatique, là je ne sais plus trop quoi penser...
Du coup je m'en remets à vous.
Merci !

Pierre

Hello Pierre !

Je n'arrive pas à reproduire ton bug. Peu être que c'était un problème de cache ? Au passage, j'aime beaucoup le site. C'est simple mais super efficace.
Modifié par Anymah (02 Apr 2018 - 19:57)

Anymah a écrit :
Hello Pierre !

Je n'arrive pas à reproduire ton bug. Peu être que c'était un problème de cache ? Au passage, j'aime beaucoup le site. C'est simple mais super efficace.

Alors! Entre temps, j'ai pu trouver un élément de réponse.

Le script que j'ai mis dans le footer me permettant de faire :

. un effet "Back to top" smooth quand l'on clic sur le titre du projet est la cause.

ceci :

<script src="scripts/barba.js"></script>
<script src="scripts/nextprev.js"></script>
<script src="scripts/TweenMax.min.js"></script>

Donc, je suis tout ouie! Avez-vous des suggestions de scripts qui pourraient faire le même job ou corriger celui-ci?
Je le réactive pour que vous puissiez voir le problème de nouveau.

Salut stone_dupuis,
De mon côté j'ai bien reproduis ton bug et ça vient de ton utilisation de Barba.js.
En effet, tu as sur certaines pages un chargement en ajax qui ne remplace pas l'ensemble de ton contenu, ce qui est plutôt cool mais qui n'ai pas tout à fait maîtrisé.
Est-ce toi qui a mis en place Barba.js sur ce site ? Connais-tu son fonctionnement ?

Le squelette partiel de ta page "about" est celui-ci :

<main role="main" id="barba-wrapper" class="container">
	<div class="row barba-container">
		<div><!-- ton contenu bien affiché --></div>
	</div>
	<div class="row" style="padding-top:5rem">
		<div><!-- ton contenu affiché uniquement lors d'un chargement complet (après actualisation de la page) --></div>
	</div>
</main>

Mais il faudrait qu'il soit comme ça :

<main role="main" id="barba-wrapper" class="container">
	<div class="row barba-container">
		<div><!-- ton contenu bien affiché --></div>
		<div><!-- ton contenu affiché uniquement lors d'un chargement complet (après actualisation de la page) --></div>
	</div>
</main>

Plus de doc ici : http://barbajs.org/installation.html

Tu as aussi une erreur jQuery ($ is not defined sur l'ensemble de tes pages).
L'ordre de chargement de tes fichiers JS n'est pas bon, il faut que tu charges en tout premier jQuery.
Modifié par MatthieuR (02 Apr 2018 - 20:36)

MatthieuR a écrit :
Salut stone_dupuis,
De mon côté j'ai bien reproduis ton bug et ça vient de ton utilisation de Barba.js.
En effet, tu as sur certaines pages un chargement en ajax qui ne remplace pas l'ensemble de ton contenu, ce qui est plutôt cool mais qui n'ai pas tout à fait maîtrisé.
Est-ce toi qui a mis en place Barba.js sur ce site ? Connais-tu son fonctionnement ?

Le squelette partiel de ta page "about" est celui-ci :

<main role="main" id="barba-wrapper" class="container">
	<div class="row barba-container">
		<div><!-- ton contenu bien affiché --></div>
	</div>
	<div class="row" style="padding-top:5rem">
		<div><!-- ton contenu affiché uniquement lors d'un chargement complet (après actualisation de la page) --></div>
	</div>
</main>

Mais il faudrait qu'il soit comme ça :

<main role="main" id="barba-wrapper" class="container">
	<div class="row barba-container">
		<div><!-- ton contenu bien affiché --></div>
		<div><!-- ton contenu affiché uniquement lors d'un chargement complet (après actualisation de la page) --></div>
	</div>
</main>

Plus de doc ici : http://barbajs.org/installation.html

Tu as aussi une erreur jQuery ($ is not defined sur l'ensemble de tes pages).
L'ordre de chargement de tes fichiers JS n'est pas bon, il faut que tu charges en tout premier jQuery.

Ok! Merci beaucoup!
Alors, j'ai eu l'aide d'une amie pour la partie "Barba"...
Mais je ne maitrise pas vraiment, je bidouille plus qu'autre chose...
J'ai suivi ton conseil pour le squellette du "about" et du coup le contenu ce charge cette fois!
Mais le problème du footer reste le meme sur la page index puis projet reste le meme.

Pour le problème du JQuery, comment je solutionne? Je met ma ligne de code pour charger le fichier jquery.js dans le header, et ca devrait aller?

Merci encore, pour ces précieux conseils..

Concernant le footer, c'est le même souci, comme tu charges le contenu de la page du projet via Ajax avec Barba.js, tu ne remplaces que le contenu de la div.barba-container et non le contenu du footer qui reste tel quel...

Plusieurs solutions s'offrent à toi :
- soit tu arrêtes d'utiliser barba.js car tu ne maîtrises pas et tu seras un peu embêté et tu reviens sur une navigation classique avec un chargement de page complet à chaque fois (mais tu perds l'effet de transition et c'est dommage)
- soit tu mets le footer à l'intérieur de ta div.barba-container (qui devient un élément <div> et le <main> en est un enfant)
- soit tu déclenches un événement JS pour masquer (ou supprimer) ton footer sur les pages des projets. Par exemple dans ton fichier nextprev.js quand tu reçois le nouveau contenu "nc" tu peux masquer le <footer>.

Tu me dis ce que tu préfères, sachant que le deuxième solution est la mieux pour moi.

Ensuite pour l'erreur jQuery, ça vient du fait que tu charges 2 fois ton fichier nextprev.js. Il faut que tu supprimes l'appel du <head>.

Sinon, te sers-tu encore de wow.js ? C'est une librairie qui sert à déclencher des animations CSS au scroll ? Si non, vire-la.

MatthieuR a écrit :
Concernant le footer, c'est le même souci, comme tu charges le contenu de la page du projet via Ajax avec Barba.js, tu ne remplaces que le contenu de la div.barba-container et non le contenu du footer qui reste tel quel...

Plusieurs solutions s'offrent à toi :
- soit tu arrêtes d'utiliser barba.js car tu ne maîtrises pas et tu seras un peu embêté et tu reviens sur une navigation classique avec un chargement de page complet à chaque fois (mais tu perds l'effet de transition et c'est dommage)
- soit tu mets le footer à l'intérieur de ta div.barba-container (qui devient un élément &lt;div&gt; et le &lt;main&gt; en est un enfant)
- soit tu déclenches un événement JS pour masquer (ou supprimer) ton footer sur les pages des projets. Par exemple dans ton fichier nextprev.js quand tu reçois le nouveau contenu "nc" tu peux masquer le &lt;footer&gt;.

Tu me dis ce que tu préfères, sachant que le deuxième solution est la mieux pour moi.

Ensuite pour l'erreur jQuery, ça vient du fait que tu charges 2 fois ton fichier nextprev.js. Il faut que tu supprimes l'appel du &lt;head&gt;.

Sinon, te sers-tu encore de wow.js ? C'est une librairie qui sert à déclencher des animations CSS au scroll ? Si non, vire-la.

Ok!

. Alors, j'ai supprimé l'appel de nextprev.js du head !
. J'ai viré la librairie wow.js (que j'avais installé, pour essayer de supprimer Barba et d'obtenir le meme effet... Sans succès...

Et je suis ok! de partir pour la deuxième solution. Je bois tes paroles!
Mais je procède comment... ?

Ok, nickel, tu n'as maintenant plus de souci avec jQuery pas défini.
C'est bien que tu aies fait le ménage aussi avec wow.js.

Mettons en place donc la deuxième solution la plus sérieuse.
Le principe de Barba.js est de charger de manière asynchrone la page de destination, de te renvoyer son contenu et tu en fais ce que tu veux après.
Dans ton cas tu fais un fadeOut() sur l'ancien container (.barba-container) et ensuite un fadeIn() sur le nouveau container.
Il faut donc que tu mettes tous les éléments qui doivent changer à l'intérieur d'un élément portant la classe "barba-container".
De cette manière par exemple :

<main role="main" id="barba-wrapper" class="container" aria-live="polite">

    <div id="projet" class="barba-container">
        <a class="d-block sticky-top js-scroll-to-topx" href="/index.php">
            <div class="row no-gutters pt-2 border-top bg-white">
                <div class="col-xl-auto col-auto mr-auto order-1 order-xl-1"><h3>Paradosso</h3></div>
                <div class="col-xl col-12 order-3 order-xl-2 text-xl-center text-left details">backrest, powder coated
                    steel, leather. 120 x 200 x 60 cm
                </div>
                <div class="col-xl-auto col-auto order-2 order-xl-3 annee"><h3>2017</h3></div>
            </div>
        </a>
        <div class="row no-gutters mt-xl-2 mt-lg-4 mt-sm-3">
            <div class="col-lg col-sm-12 h2 pevdp1 pr-3">
                <p>Paradosso is a backrest; black or natural leather for indoor spaces fixed on a steel structure. In
                    response to a society of action and rational thought, Paradosso invites the awake dreamer to take
                    distance from reality. With Paradosso to lean on, the imagination takes back its place, allowing the
                    unconscious to wander; creating stories as we sleep standing.</p>
                <p class="h4">Status / free for edition</p>
            </div>
            <div class="col-lg col-sm-12">
                <img class="img-fluid" src="paradosso/image1.jpg" alt="">
            </div>
            <div id="galerie" class="col-12">
                <img class="img-fluid" src="paradosso/image2.jpg" alt="">
                <img class="img-fluid" src="paradosso/image3.jpg" alt="">
                <img class="img-fluid" src="paradosso/image4.jpg" alt="">
                <img class="img-fluid" src="paradosso/image5.jpg" alt="">
                <img class="img-fluid" src="paradosso/image6.jpg" alt="">
                <img class="img-fluid" src="paradosso/image7.jpg" alt="">
                <p>© Photo Credit Miko/Miko Studio</p>
            </div>
        </div>
        <a class="container fixed-bottom" href="../2017/sesame.php">
            <div class="row no-gutters border-top" style="background: white">
                <div class="col-xs-auto mr-auto"><h3>Sesame</h3></div>
                <div class="col d-none d-xl-block text-center details">key cabinet; plastic (PP), leather. 25 x 40 x 18
                    cm
                </div>
                <div class="col-xs-auto annee"><h3>2017</h3></div>
            </div>
        </a>
        <div class="footer container mb-5">
            <div class="row no-gutters">
                <p class="col-sm-12 pevdp1">© Pierre-Emmanuel Vandeputte, All rights reserved.</p>
            </div>
        </div>
    </div>
</main>

Tu supprimes ton élément <footer> et tu le déplaces (en le convertissant en div avec une classe .footer) à l'intérieur de .barba-container.

MatthieuR a écrit :
Ok, nickel, tu n'as maintenant plus de souci avec jQuery pas défini.
C'est bien que tu aies fait le ménage aussi avec wow.js.

Mettons en place donc la deuxième solution la plus sérieuse.
Le principe de Barba.js est de charger de manière asynchrone la page de destination, de te renvoyer son contenu et tu en fais ce que tu veux après.
Dans ton cas tu fais un fadeOut() sur l'ancien container (.barba-container) et ensuite un fadeIn() sur le nouveau container.
Il faut donc que tu mettes tous les éléments qui doivent changer à l'intérieur d'un élément portant la classe "barba-container".
De cette manière par exemple :

<main role="main" id="barba-wrapper" class="container" aria-live="polite">

    <div id="projet" class="barba-container">
        <a class="d-block sticky-top js-scroll-to-topx" href="/index.php">
            <div class="row no-gutters pt-2 border-top bg-white">
                <div class="col-xl-auto col-auto mr-auto order-1 order-xl-1"><h3>Paradosso</h3></div>
                <div class="col-xl col-12 order-3 order-xl-2 text-xl-center text-left details">backrest, powder coated
                    steel, leather. 120 x 200 x 60 cm
                </div>
                <div class="col-xl-auto col-auto order-2 order-xl-3 annee"><h3>2017</h3></div>
            </div>
        </a>
        <div class="row no-gutters mt-xl-2 mt-lg-4 mt-sm-3">
            <div class="col-lg col-sm-12 h2 pevdp1 pr-3">
                <p>Paradosso is a backrest; black or natural leather for indoor spaces fixed on a steel structure. In
                    response to a society of action and rational thought, Paradosso invites the awake dreamer to take
                    distance from reality. With Paradosso to lean on, the imagination takes back its place, allowing the
                    unconscious to wander; creating stories as we sleep standing.</p>
                <p class="h4">Status / free for edition</p>
            </div>
            <div class="col-lg col-sm-12">
                <img class="img-fluid" src="paradosso/image1.jpg" alt="">
            </div>
            <div id="galerie" class="col-12">
                <img class="img-fluid" src="paradosso/image2.jpg" alt="">
                <img class="img-fluid" src="paradosso/image3.jpg" alt="">
                <img class="img-fluid" src="paradosso/image4.jpg" alt="">
                <img class="img-fluid" src="paradosso/image5.jpg" alt="">
                <img class="img-fluid" src="paradosso/image6.jpg" alt="">
                <img class="img-fluid" src="paradosso/image7.jpg" alt="">
                <p>© Photo Credit Miko/Miko Studio</p>
            </div>
        </div>
        <a class="container fixed-bottom" href="../2017/sesame.php">
            <div class="row no-gutters border-top" style="background: white">
                <div class="col-xs-auto mr-auto"><h3>Sesame</h3></div>
                <div class="col d-none d-xl-block text-center details">key cabinet; plastic (PP), leather. 25 x 40 x 18
                    cm
                </div>
                <div class="col-xs-auto annee"><h3>2017</h3></div>
            </div>
        </a>
        <div class="footer container mb-5">
            <div class="row no-gutters">
                <p class="col-sm-12 pevdp1">© Pierre-Emmanuel Vandeputte, All rights reserved.</p>
            </div>
        </div>
    </div>
</main>

Tu supprimes ton élément &lt;footer&gt; et tu le déplaces (en le convertissant en div avec une classe .footer) à l'intérieur de .barba-container.

J'y suis! Désolé pour le délai. Merci encore pour votre temps.
Maintenant, ca fonctionne, mais avec ! de nouveau problème...
Le footer, part en vrille.. alors qu'il devrait être toujours bien caller en bas...
C'est mon CSS qui est pas bon...? Right?
Ca à l'air Ok, sur la page index, mais pas sur about, ni contact, ni press, ni presskit ... Toutes les autres...

J'ai solutionné le problème de footer pour de bon !

Et pour le problème initial, de barba; ceci cause maintenant problème pour la partie "Menu" quand on entre sur un élément soit about, press, ou contact; le titre doit etre surligné normalement, ce qui fonctionne de nouveau après actualisation ...

Any Tips?
Modifié par stone_dupuis (03 Apr 2018 - 11:27)

Hello Pierre-Emmanuel,
Et oui, en effet, comme tu as déplacé l'élément <footer> et qu'il est renommé, il fallait modifié ton CSS pour appliquer le style au nouvel élément div.footer que tu as créé.

Pour le menu, toujours le même souci, il n'y a qu'une partie de ta page qui est mise à jour et pas le menu, il reste donc en l'état.

Pour appliquer la classe 'active' au bon élément de menu, il faudra passer par du JS, dans ton fichier 'nextprev.js' dans la fonction 'fadeInNewcontent'.
Peux-tu poster ici la manière dont tu appliques cette classe 'active' sur le menu ? Le bout de code php sans doute. On verra si on peut adapter ça en JS.

Par ailleurs tu as un souci sur tes pages 'projet', tu ne charges un JS. Il faudrait que tu harmonises tes inclusions sur tes différents fichiers.

MatthieuR a écrit :
Hello Pierre-Emmanuel,
Et oui, en effet, comme tu as déplacé l'élément &lt;footer&gt; et qu'il est renommé, il fallait modifié ton CSS pour appliquer le style au nouvel élément div.footer que tu as créé.

Pour le menu, toujours le même souci, il n'y a qu'une partie de ta page qui est mise à jour et pas le menu, il reste donc en l'état.

Pour appliquer la classe 'active' au bon élément de menu, il faudra passer par du JS, dans ton fichier 'nextprev.js' dans la fonction 'fadeInNewcontent'.
Peux-tu poster ici la manière dont tu appliques cette classe 'active' sur le menu ? Le bout de code php sans doute. On verra si on peut adapter ça en JS.

Voilà, après plusieurs tentatives, je n'ai pas réussi à solutionner le problème avec la librairie Barba... J'ai donc switché pour Wow! Qui fonctionne correctement et corrige-moi si je me trompe... Mais je ne pense plus avoir d'erreur cette fois?

Il me manque un détail pour attendre la perfection...
Je m'explique :

Lors de la navigation, on entre dans un projet, on scroll down; puis on clic de nouveau sur le titre du projet pour revenir à la page index.
Cette transition n'est pas parfaite à mon gout....
Je voudrais que le moment ou l'on clic sur le titre du projet, il s'opère un "Back to top" avant le fade in vers l'index.... Le problème c'est, comment sachant que le clic amène un fade in.
Serait-il possible de coder de manière a ce que le "back to top" intervienne le premier, et puis que, en fin de course (autrement dit, arrivé en haut de page) le fade in opère pour arriver finalement à l'index.

Je ne sais pas si c'est bien clair?
Merci encore pour votre aide !