jQuery Girl
  1. jQuery Girl
  3. CSS: changer les flèches sur toute la page JS?
Intereting Posts
jQuery déterminer si le parent a perdu le “focus” Est-il possible de limiter la hauteur d’un widget selectmenu avec jQuery UI? Comment append un document HTML dans un via JavaScript / JQuery? Que faut-il ici pour que la réponse du serveur ajax soit exécutée telle quelle dans la fonction jQuery ajax post? jQuery submit, comment puis-je savoir quel bouton de soumission a été activé? Activer CORS sur l’API JSON WordPress jquery addClass et removeClass avec setInterval Les variables JavaScript portent un identifiant que je dois utiliser dans un fichier HTML.ActionLink navGrid ne fonctionne pas avec JQGrid Je ne peux pas obtenir que $ (cela) travaille dans l’auto-complétion jQueryUI Est-il mauvais d’ouvrir plusieurs connexions de firebase database dans indexedDB? Les tabs de l’interface utilisateur jQuery ne cachent pas les tabs inactifs lors du chargement Dynatree et qtip2 – Aucun événement (survolé) sur le premier sous-noeud jQuery animate () et les performances du navigateur Fonctionnalités de zoom avant et arrière dans jquery mobile ou javascript

CSS: changer les flèches sur toute la page JS?

J’utilise fullpageJS https://github.com/alvarosortinggo/fullPage.js/ pour créer mon site Web. Cependant, lorsque vous essayez de changer le style de la flèche: 

.controlArrow.prev { left: 50px; background: url(left.png); background-repeat: no-repeat; } .controlArrow.next { right: 50px; }

Cela ne fonctionne pas, quelqu’un peut-il expliquer pourquoi?

Pour prolonger la réponse de @ Alvaro, il vous suffit de remplacer les flèches définies par une bordure par des images: 

 .fp-controlArrow.fp-prev { left: 0; border: none; width: 50px; height: 101px; background: url(left.png) no-repeat; cursor: pointer; } .fp-controlArrow.fp-next { right: 0; border: none; width: 50px; height: 101px; background: url(right.png) no-repeat; cursor: pointer; }

Tout d’abord, téléchargez la dernière version du plugin (et son fichier CSS). Fullpage.js n’utilise plus controlArrow mais fp-controlArrow .

Assurez-vous d’append vos propres styles après l’inclusion de jquery.fullpage.css afin de pouvoir jquery.fullpage.css ceux du plugin. Assurez-vous également d’écrire tous les styles appliqués par défaut.

Tenez compte du fait que les flèches actuelles sont formées par l’atsortingbut border . pas par n’importe quel background . Vous devez remplacer ces styles et même changer la width et la height .

Si vous regardez jquery.fullpage.css vous verrez les styles que vous devez jquery.fullpage.css . 

 .fp-controlArrow { position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent; } .fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff; }

Je voulais utiliser font-awesome pour les icons fléchées et je ne savais pas quoi faire au début. Mais ensuite, j’ai examiné les modifications apscopes au balisage HTML après l’initialisation de fuulpage.js:

balisage HTML original

et en utilisant la réponse de Raptor à cette question sur les modifications apscopes à un CSS, j’ai constaté qu’il était possible d’append un nouvel élément personnalisé à un élément par défaut en ajoutant deux lignes dans le script où fullpage () était initialisé:

changements dans le script 

 $(document).ready(function () { $('#fullpage').fullpage(); // The changes that were made $('.fp-prev').append(''); $('.fp-next').append(''); });

Le résultat est:

balisage HTML final