Modification de styles sur les liens de navigation - y compris les boutons suivant et précédent

Je travaille actuellement sur un site Web pour une entreprise danoise. Le contenu est sur une seule page et j'ai inclus du jQuery-scrolling et d'autres choses. Fonctionne bien!Modification de styles sur les liens de navigation - y compris les boutons suivant et précédent

Pour le menu, il est demandé de programmer les éléments afin que l'élément actif soit en gras. Ce que j'ai fait aussi.

Le problème vient ici:
Le client veut un bouton d'accueil et un bouton suivant et précédent. Mais quand je les clique et que la page défile, les classes CSS ne changent pas pour l'élément actif - donc l'élément en gras dans le menu est toujours la dernière page cliquée.

J'espère que n'importe qui peut aider.

La page peut être vu à: http://vedelform.dk/new/intro/

Source

2009-08-17 Kræn Bech-Petersen

Pouvez-vous afficher le code jQuery correspondant à l'endroit où vous liez les gestionnaires d'événements aux flèches de défilement? –

@Russ: le code est ici: http://www.vedelform.dk/new/wp-content/themes/vedelform/js/init.js Les gestionnaires d'événements sont liés en profondeur à l'intérieur du plugin SerialScroll. –

@crescentfresh - J'ai commencé à regarder à travers le code et j'ai pensé qu'il serait peut-être plus facile pour tous de demander où ils sont liés :) –

En plus d'appeler le plugin serialscroll, le gestionnaire d'événements pour les images doit mettre à jour le nom de classe approprié sur votre lien de navigation. Lorsque vous cliquez directement sur un lien de navigation, vous appelez la fonction changeActiveStates, mais cela ne fonctionne pas avec les boutons home, next et previous.

Vous devez utiliser l'attribut onBefore du plugin serialScroll pour définir une méthode qui déterminera quel lien de navigation est censé recevoir le nom de la classe. Il peut ensuite appeler la fonction changeActiveStates.

Il ne semble pas qu'il faille plus que quelques lignes de code pour résoudre votre problème. Si vous avez besoin de plus d'aide pour le faire fonctionner, faites le moi savoir.

modifier:

Si vous ajoutez ce (à partir de la ligne 84 du init.js), vous devriez être en affaires:

easing: 'swing', 
onBefore:function(e, elem, $pane, $items, pos){ 
    if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos)); 
    return true; 
}

Vous aurez alors besoin d'appeler changeActiveStates (probablement après avoir initialisé la fonction) au chargement de la page pour initialiser l'élément de menu correct.

J'espère que cela aide; laissez-moi savoir si cela vous pose plus de problèmes.

Source

2009-08-17 15:57:42

voulez-vous aider avec mon script? –

Bien sûr, je vais regarder à nouveau ce soir. –

Merci! Cela fonctionne parfaitement! –

Vous avez utilisé la version minified de scripts il est donc très difficile de déboguer le code. Aussi, vous ne nous avez pas donné le nom du plugin que vous utilisez. Je pense qu'il y a un bug dans le plugin. Parce que la classe css "sélectionnée" devrait passer d'un élément de menu à un autre.

Source

2009-08-17 15:54:56

Le plugin est serialScroll: http://flesler.blogspot.com/2008/02/jqueryserialscroll. html –

@Jason Francis: Vous avez probablement raison. Je ne suis pas tellement en jQuery et Javascript et ce que j'ai fait jusqu'ici est plus de chance que de savoir. J'ai fait beaucoup d'essais et d'erreurs.
Je comprends ce que vous dites à propos de l'obtention du plugin serialScroll pour savoir quel élément appeler changeActiveStates - mais je ne sais pas vraiment comment faire cela.

Source

2009-08-19 12:03:40

Modification de styles sur les liens de navigation - y compris les boutons suivant et précédent

Répondre

Questions connexes