Pb affichage menu jquery
Bonjour à tous. Sur le site [url=www.charlesrios.com]www.charlesrios.com[/url], je n'arrive pas à configurer l'intégralité du menu jsquery que j'utilise. La petite animation qu'on peut voir sur la page d'accueil (les onglets qui se décalent vers la droite quand on passe la souris dessus) n'apparait plus sur les autres pages. Et j'aimerai que quand on est sur une page, le texte de l'onglet correspond soit en jaune (j'ai essayé de rajouter un code css pour "active" mais ça n'a pas marché. Pouvez-vous m'aider ? Merci par avance. Will Voici mon code js : $(document).ready(function() { slide("#sliding-navigation", 25, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); }
8 réponses
Ha oui... Faut utiliser jQuery.noConflict(); car utilises different framework (jquery, prototype).
jQuery(document).ready(function($){
var slide = {
init: function(navigation_id, pad_out, pad_in, time, multiplier) {
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
};
slide.init("#sliding-navigation", 25, 15, 150, .8);
});Comme ceci ça devrait fonctionner... :)
Pour le CSS active, met style="color:#FFFF66;" au lieux de class="active" alors :p
Voilà
Salut,
Je vois bien ce code sur la page d'accueil mais sur les autres non... ^^
Faudrait réimporter la source :)
Pour le "J'aimerai que quand on est sur une page, le texte de l'onglet correspond soit en jaune (j'ai essayé de rajouter un code css pour "active" mais ça n'a pas marché."
.active{color:#FFFF66}
Et mettre class="active" dans le lien (<a href="proute" class="active">..</a>) ^^
Voilà...
Merci PsiSyx, j'ai rajouté le script dans toutes les pages. Et j'ai essayé ta technique "active" mais ça ne marche pas ...
Merci, ça marche parfaitement pour les couleurs.
Le script que tu m'indiques, je dois le mettre à la place de celui qui est déjà dans sliding_effect.js ?
Il n'y a pas une question d'ordre dans l'écriture des "script type" également ?
Salut, oui faut le remplacer à la place du sliding_effect.js :p
L'ordre peut importe, mais il vaut mieux mettre tout tes <script></script> en bas de page, avant le </body>.
Mais ça ne fonctionnera pas si ton script jquery est importer au dessus du framework.
Par ex:
Script jquery...
<script type="text/javascript" src="js/script.js"></script>
Framework jquery
<script type="text/javascript" src="js/jquery.js"></script>
Ton script ne fonctionnera pas :p
Voilà voila :)
Merci.
Es-tu sûr que le code pour éviter le conflit est le bon ? Quand je change le contenu de sliding_effects par le code que tu viens de me donner, l'animation disparait, que je mette les scripts dans le header ou juste avant le /body.
Oui oui "jQuery(document).ready(function($){..})" permet de ne pas avoir de conflit avec différent framework.
Il ne devrait *normalement* pas y avoir d'erreurs si les scripts ont bien été importés.
Prend Mozilla Firefox avec l'addon FireBug (ou l'inspecteur de code de Chrome) pour détecter les bugs, tu comprendras mieux quels sont tes problèmes. :p
Voilà voilà, a bientôt
OK ca marche.
Il fallait également remplacer tous les $ par jQuery.
Merci pour ton aide !