Discussion :

[sebgac]

Bonjour,

Je suis en train de personnaliser un thème wordpress avec jQuery (ce qui explique que je n'utilise pas le $, veuillez m'en excuser).

Je travaille sur le curseur qui est ici un point rouge. J'ai changé la couleur du point/curseur au survol des liens via ce script (j'ai effectué la transition via CSS)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
 
jQuery('a').hover(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#FF0000');
});
 
jQuery('a').mouseleave(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
});

Après, j'ai eu une autre problématique, lorsque le curseur/point s'élargit pour devenir le fond d'écran lorsqu'on clique sur un lien (c'est un effet de transition sympa qui provient du thème : le mieux est d'aller voir l'effet directement sur le site http://arnaudlebecq.com/ )

J'avais le problème que la couleur de l'arrière plan du curseur/point n'était pas la même selon si je survolais un lien ou pas, j'ai donc trouvé la solution en fixant la couleur du point après un clic sur un lien

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
jQuery('a').click(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
});

Cela fonctionne

Mais me voilà sur un autre problème, que je n'arrive pas à résoudre cette fois-ci : une fois qu'on a cliqué sur un lien et que la page charge (c'est fixé sur la couleur du curseur qui devient le fond d'écran le temps de chargement de la page) lorsqu'on bouge la souris pendant le chargement de la page, les couleurs de fond d'écran changent aussi (j'imagine que cela prend en compte le placement des liens même s'ils ne sont pas affichés) ... Je voudrais donc trouver un moyen de bloquer le script qui change la couleur au survol d'un lien pendant le chargement de la page.

Merci d'avance pour votre aide !!

[sebgac]

Mais me voilà sur un autre problème, que je n'arrive pas à résoudre cette fois-ci : une fois qu'on a cliqué sur un lien et que la page charge (c'est fixé sur la couleur du curseur qui devient le fond d'écran le temps de chargement de la page) lorsqu'on bouge la souris pendant le chargement de la page, les couleurs de fond d'écran changent aussi (j'imagine que cela prend en compte le placement des liens même s'ils ne sont pas affichés) ... Je voudrais donc trouver un moyen de bloquer le script qui change la couleur au survol d'un lien pendant le chargement de la page.

Personne ?

Je me dis bien que ya un truc à jouer avec la méthode preventdefault, mais je vois pas comment m'y prendre

https://developer.mozilla.org/fr/doc...preventDefault

j'ai essayé ça mais cela ne fonctionne pas :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
 
jQuery('a').hover(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#FF0000');
e.preventDefault();
});
 
jQuery('a').mouseleave(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
e.preventDefault();
});
 
jQuery('a').click(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
e.preventDefault();
});

et ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
 
jQuery('a').hover(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#FF0000');
e.stopPropagation();
});
 
jQuery('a').mouseleave(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
e.stopPropagation();
});
 
jQuery('a').click(
          function(e) {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
e.stopPropagation();
});

ou peut-être serait-il plus simple de fixer la couleur de l'arriere plan jusqu'au chargement de la prochaine page ?

[sebgac]

j'ai finalement contourné le pb et produit ce script, mais j'imagine qu'il y a moyen de faire mieux

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
 
jQuery('a').hover(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#FF0000');
jQuery('span#edgtf-cursor-dot').css('opacity','0.8');
});
 
jQuery('a').mouseleave(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
jQuery('span#edgtf-cursor-dot').css('opacity','1');
});
 
jQuery('a').click(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
jQuery('span#edgtf-cursor-dot').css('opacity','1');
 
jQuery('a').hover(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
jQuery('span#edgtf-cursor-dot').css('opacity','1');
});
 
jQuery('a').mouseleave(
          function() {
jQuery('span#edgtf-cursor-dot').css('background-color','#ff6d6d');
jQuery('span#edgtf-cursor-dot').css('opacity','1');
});