Attribuer une class à un élément

Version imprimable

28/10/2021, 07h46
dhillig

Attribuer une class à un élément

Bonjour à tous,
Impossible d'appliquer la class scrollto à une icone (ical).
Ligne initiale :

Code:

<a id="ical" href="#top"><i class="fa fa-twitter fa-2x"></i></a></div>

J'ai tenté :

Code:

<div id="ical"><i class="scrollTo"><a href="#top"><i class="fa fa-chevron-down fa-2x"></i></a> </i></div>

Puis :

Code:

<a class=»scrollTo» href=»#top»><i class=»fa fa-twitter fa-2x»></i></a>

Rien à faire, je sais que ce n'est pas grand chose, vraiment tout bête mais je n'y arrive pas. Can you help me please ? ;)
Thanks
Dhillig
29/10/2021, 11h50
jreaux62

Bonjour,

déjà, corrige les guillemets, qui ne sont manifestement pas les bons.
29/10/2021, 16h47
dhillig

Bonjour jreaux62,
Cela fait des années que j'ai arrêté mon site, et donc pas échangé avec toi. J'ai décidé de m'y remettre, le travail accompli grâce à ton aide et à celle de NoSmoking (et d'autres) était vraiment bien ;)
Je ne sais pas d'où vient cette classe Scrollto !!!!????
Je l'ai supprimée. Cela devient donc :

Code:

<div id="ical"><a href="#top"><i class="fa fa-chevron-down fa-2x"></i></a></div>

Mais le chevron-down ne scrolle pas jusqu'à <a href="#top"> il y arrive, mais sans scroll.
Je pensais que c'était un prob de classe, mais pas du tout !
Si tu as une idée... :) en attendant, je considère le problème comme résolu.
Merci pour tes conseils et bon week-end,
Dhillig

Code:

<a class="scrollTo" href="#top">

A mon avis, c'est justement cette classe "scrollTo" qui permet de scroller "souplement" vers l'élément d'id "#top".

Il est plus que probable qu'il existe un script JS qui utilise cette classe.

Le script JS devrait ressembler à ça (ici en JS pur) :
Code:

1 2 3 4 5 6 7 8 9 10 11 // ---------- // JS vanilla window.addEventListener("DOMContentLoaded", () => { document.querySelectorAll('.scrollTo').forEach( (elt) => { elt.addEventListener('click', (e) => { e.preventDefault(); // important document.querySelector(elt.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); }); // ----------
ou en jQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 // ---------- // jQuery $(function(){ $('.scrollTo').on( 'click', function(e){ e.preventDefault(); // important $('html').stop().animate({ 'scrollTop': $($(this).attr('href')).offset().top }, 500); }); }); // ----------
https://codepen.io/jreaux62/pen/xxLLPKd

29/10/2021, 20h34
dhillig

Je ne vois pas de réponse de ma part alors que je suis certain de t'avoir répondu !?????
Je suis loin de mes fichiers html/CSS/JS. Je te (re)répond mardi.
En attendant, MERCI et sache(z) qu'à l'époque, je testais à droite, à gauche mais que LA, j'ai une idée bien définie du site que je veux créer.
J'ai, grâce au forum, déjà créé un petit site que j'ai du supprimer à cause de ce maudit IE. N'être vu que par une partie des gens, c'est inutile.
A mardi j'espère !
Bon week-end à tous !
dh
02/11/2021, 08h17
dhillig

Bonjour jreaux62,
Je n'ai pas réussi à adapter ton code à ma page.
Alors je l'ai mis en ligne :
http://lapagetest.fr/lddc.html
~~La première image s'affiche très bien en local, pas du tout en ligne, malgré de multiples changements.~~
Comme tu peux voir, en cliquant sur le chevron, la page ne scrolle pas.
As-tu une idée ?
Merci pour ton aide et bonne journée,
dh

;) La première photo s'affiche bien, c'était un problème de casse (.JPG, .jpg).
Bonne journée !
03/11/2021, 12h45
dhillig

Hello,
Le problème se trouve sur le lien ci-dessous :
lapagetest.fr
Quelqu'un pour m'aider ? Et le chevron ne fonctionne plus du tout en réduisant la fenêtre sur sa largeur (aucun rapport avec le z-index).
SVP, j'ai besoin de cette ouverture (header) pour (re)commencer mon site.
Merci à vous,
dh

Bonjour,
pas tout regardé mais la première chose à faire est de mettre de l'ordre dans l'intégration de tes scripts;

Voilà ce que l'on trouve :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="js/lancement.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpScroller.js"></script>
<script src="js/cbpAnimatedHeader.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>

et c'est sans compter l'intégration de divers scripts dans la page.
A méditer : « On ne peut utiliser un marteau que lorsque l'on en a un. »

De plus ton « chevron » n'est pas au premier plan

Code:

1
2
3
4
5
6
7
8
9
10
11
12
#ical {
    margin-bottom: 200px;
    animation: bounce 0.7s ease infinite;
    background-image: url(tumblr_nz037fxFMB1qz6f9yo8_540.png);
    margin-left: 45%;
    margin-right: 45%;
    text-align: center;
    position: fixed;
    width: 10%;
    height: 20px;
    z-index: 0;           /*-- aucune garantie d'être au dessus --*/
}

essaie avec un z-index: 100000, par exemple.

03/11/2021, 18h06
dhillig

Hello NoSmoking,
Je vais faire le tri dans les scripts dès demain. Promis ;)
Concernant le z-index du chevron, le problème c'est que si il est élevé, il couvre les <div> suivantes.
Et je n'ai pas ce problème (chevron non cliquable) quand le fenêtre est grande, j'ai uniquement un problème de scroll.
Je viens de voir aussi que j'avais un problème d'opacité lors de la transition.
Dois-ouvrir une seconde discussion pour cela ?
Merci pour ton aide et bonne soirée,
dh
03/11/2021, 18h13
jreaux62

Bonjour,

regarde dans l'"Inspecteur" * de ton navigateur.
Tu auras certainement des réponses, ou au moins des pistes.

* "clic droit" -> "Inspecter"

CELA DIT, ta page d'exemple est zarbi !
On doit scroller longtemps pour "quitter" le slider d'entête et voir la suite de la page.
ALORS qu'on... devrait scroller... directement et tout simplement.
04/11/2021, 06h32
dhillig

Hello jreaux62,
Oui, l'effet est zarbi... mais volontaire 8O. Je vais supprimer cela.
C'était uniquement pour forcer l'internaute à cliquer sur le chevron car impossible de rendre le diaporama non scrollable (pour appuyer sur le chevron) et.... scrollable pour avoir la suite :oops:
Je vais voir l'inspecteur pour la première fois :calim2:
Bonne journée,
dh
04/11/2021, 07h59
dhillig

Rebonjour,
La page nettoyée comme j'au pu se trouve la :
http://lapagetest.fr
Et toujours les mêmes soucis :calim2:
Bonne journée à vous,
dh
04/11/2021, 14h38
dhillig

ReBonjour,
J'ai remarqué que le chevron ne fonctionnait pas uniquement quand le menu shrink était réduit.
J'ai jeté un œil sur les CSS. Je regarde de nouveau...

Non, je me suis trompé. Il suffit de redimensionné la fenêtre pour que le chevron ne fonctionne pas :/
Désolé :weird:

NoSmoking, tu, avais raison :ptdr: (que suis-je bête).
Le "chevron" n'était pas réactif à cause du z-index.
Reste le problème du scroll :weird:
Merci pour votre aide,
dh
04/11/2021, 15h02
jreaux62

Bonjour,

Code:

<div id="ical"><a class="scrollTo" href="#top"><i class="fa fa-chevron-down fa-2x"></i></a></div>
04/11/2021, 15h14
dhillig

Code:

<div id="ical"><i class="scrollTo"><a href="#top"><i class="fa fa-chevron-down fa-2x"></i></a> </i></div>

YESSSSSSSSSSSSSS !!! Peux-tu m'expliquer stp jreaux 62 ?

Code:

<div id="ical"><a class="scrollTo" href="#top"><i class="fa fa-chevron-down fa-2x"></i></a></div>

Problème RESOLU.
Merci à vous !!!!
dh
04/11/2021, 18h17
jreaux62

Voir mon message précédent #4

Il faut que la classe et le href soit dans la même balise <a>.
04/11/2021, 19h52
dhillig

Merci jreaux.
Bonne soirée !
dh