Problème : Mixitup.js

Tu as du remarquer que mixitup ne s'instancie pas correctement, le code suivant retourne un erreur:

$("#Grid").mixitup()

Par contre si tu re-charges mixitup depuis la console (cf. plus bas pour le code), et que tu ré-instancies: cette fois ca marche.

Je suppose donc que ton script mixitup est mal placé dans ta page. Par exemple je vois que tu charges jquery 1.7.2, puis mixitup, puis encore jquery (mais v1.8.3, cette fois :o ) ... ca me semble pas hyper optimisé. Essaye de charger 1 seul jquery (v1.9.x, plutot), puis mixitup, puis tu peux instancier.

Pour sourcer un JS depuis la console (pour les tests):

var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'wp-content/themes/Creation_Theme/mixitup/jquery.mixitup.min.js';
document.head.appendChild(script);

Merci pour ta réponse.
Je ne comprend pas lorsque tu dis "instancier". Je ne connais absolument rien au javascript ^^
En effet, par innatention j'ai chargé 2 versions de jQuery, j'ai essayé en en chargeant qu'un seul et en collant ton code dans la console, mais ça ne marche pas. Je pense que c'est moi qui ai mal compris ce que tu essais de me dire.

J'allais t'écrire tout un roman mais essaye plutot ca vite fait:

Dans ta page:

<script type="text/jaavscript">
$(function(){

    $('#Grid').mixitup();

});</script>

... change j<u>aav</u>script par j<u>ava</u>script, et ca devrait etre bon.

Waw, j'ai fait une erreur tellement bête que je m'étonne tout seul ^^ Merci

Ça marche à moitié, regarde

La moitié qui ne marche pas c'est quoi ? le fait que tes vignettes réapparaissent ?

Oui. Elle ne sont pas censée réapparaître :/

Tu n'appliques pas le style requis sur tes éléments.
Ajoute ce code dans ta feuille de style et ca devrait rouler.

#Grid .mix{
    opacity: 0;
    display: none;
}

Incroyable ! Ça marche ! Merci beaucoup pour ton aide, et ton temps tu me sauves !

Avec plaisir. Bonne continuation !

Merci.
Dis j'aurais une dernière question : Le portfolio comprend un système de Hover directionnel. Lorsque l'on charge la page, une toute partie du vert du hover est visible, et dès que l'on passe une fois la souris dessus, cette petite partie s'enlève. Comment faire pour qu'elle s'enlève dès le début ?
Je ne sais pas si tu m'a compris ^^

ouvre un autre sujet dans la section html / css, plutot.
En attendant je regarde ...

D'accord, merci :)

Bonjour.
Je suis un peu curieuse : j'ai bien galéré à intégrer mixitup à wordpress. Tout s'affiche correctement, mais comme Kamel38, après la fin du filtrage, touts mes articles réapparaissent... Comment as-tu réglé ce pb ?
Merci

Ben le problème a été réglé comme c'est indiqué plus haut, en vert: en ajoutant le css requis

#Grid .mix{
    opacity: 0;
    display: none;
}

Ce qu'il faut comprendre c'est que par défaut tes éléments sont invisible. c'est mixitup qui s'occupe de les rendre visibles.

Mhhh mhhh... bah je vois pas alors... j'ai tout instancié comme il faut (je pense...), mes id et class sont corrects, et pourtant : le filtrage s'effectue correctement, mais tout réapparait dans la foulée.
Voyez par vous même : mon site
J'y comprend rien, y'a sûrement un truc que j'ai mal fait !
Merci

Alors:

1/ Je ne savais pas que les pattes des chens pouvaient supporter jusqu'a -35 degrés celcius !

2/ Tu as changé l'ID #Grid en #grid, dans ton truc. Donc en ce qui te concerne le css a utiliser est le suivant:

#grid .mix{
    opacity: 0;
    display: none;
}

J'ai testé en console sur ton site et ca résoud correctement ton problème. Dis moi si tu galères toujours après avoir ajouté ca a ta feuille de style.

J'ai changé tellement de trucs que j'avais plus pensé au CSS ! j'ai changé en #Grid partout pour que ça colle à la fonction par défaut, mais il ne me lit pas le css : quand j'inspecte l'élément, le #Grid .mix n'est pas appelé, même en rajoutant !important...

Dans ta console, tape le code suivant:

var sheet = (function() {var style = document.createElement("style"); style.appendChild(document.createTextNode("")); document.head.appendChild(style); return style.sheet;})();
sheet.addRule("#Grid .mix", "opacity: 0; display: none");

Puis utilise ton filtre: ca fonctionne bien.

La seule chose que je fais c'est mettre le css a jour avec #Grid et .mix.

effectivement en tapant ça, ça marche. la console m'affiche "-1" (je sais pas si ça t'est utile). Mais dès que je recharge la page, tout est parti... et ça recommence... la déprime :)

Oui, le -1 on s'en fout, et c'est normal qu'en rechargeant la page ca ne marche plus.

Ce test permet juste de vérifier que tu n'as pas d'autre problème que le css.
=> La réponse est: tu n'as pas d'autre problème que le css (ce qui est une bonne chose).
=> La solution est: dans l'un des fichiers css (je te suggère style.css, par exemple, qui est le css de ton thème) ajoute le bloc dont on parle depuis le début:

#Grid .mix{
    opacity: 0;
    display: none;
}

Vérifie que tu ne mets pas en cache le css d'avant, par contre, sinon tu ne verrais pas tes modifs.

... je semble pénible, mais le bloc en question il est dans mon style.css depuis le début... j'arrête pas de nettoyer mon cache pour m'assurer qu'il n'y a pas un truc qui traîne, mais rien n'y fait... comprend pas...

tadaaaaa :-D bon je sais pas trop ce que j'ai fait, j'ai remonté le bloc #Grid.mix dans ma feuille de style et ça marche... desfois je crois qu'il faut s'incliner devant la machine et ne pas trop chercher... :-D En tout cas mille merci pour ton aide !

Avec plaisir, bonne continuation pour la suite !