Code à compléter

[photoclic]

Bonjour à tous,

J'ai un script qui permet d'afficher une fenêtre présentant les dernières notifications lorsque l'on passe la souris sous le bouton Notifications.
La taille de la fenêtre est volontairement limitée à 100px de hauteur pour ne présenter que les 3 premières notifications.
Quand la souris quitte la fenêtre, la fenêtre est masquée.

Code:


//Aperçu notations tte pages
$(function(){$(function(){
  $('#fil_actu_bloc span').click(function(){
  $('#fil_actu_bloc').hide();
        }); 
$("#fil_actu_bloc").mouseleave(function () {
  $("#fil_actu_bloc").css('opacity','0');
  $("#fil_actu_bloc").css('height','15px');
        });
  $("#fil_actu_bloc p").mouseenter(function () {
  $("#fil_actu_bloc").css('opacity','1');
  $("#fil_actu_bloc").css('height','100px');
        });
   
});});

Serait-il possible d'ajouter un code qui permettrait quand la souris arrive sur la troisième notification de passer la fenêtre à 300 px.
Le reste du fonctionnement restant inchangé.

Merci pour votre aide.

[chattigre]

Bonjour,

Je vais laisser Toryudo qui a fait le code l’adapter, mais je me permets quand même de signaler qu'il faudra faire attention à ce que ça ne fasse pas "trop", parce qu'il y a déjà ça qui s'affiche à chaque nouveau message posté :


D'ailleurs, si vous trouvez que le forum est lent à charger parfois, c'est peut-être parce que vous avez énormément de requêtes parallèles, à tel point que le chargement de la page n'est jamais vraiment fini !

Quand on navigue sur une page, même ne serait-ce que pour lire un sujet, une requête vers le topic des alertes, une vers l'index et une vers le portail sont envoyées plusieurs fois par minute ! Celle sur l'index est même envoyée toutes les 5 secondes...
Il faut penser que tout ceci demande des ressources parallèles au navigateur, qui passe son temps et perd son énergie à faire autre chose que juste naviguer sur ce que l'utilisateur lui demande...

D'autant que vue la page (page d'index), c'est loin d'être la plus légère du forum.
En 4 minutes, 13Mo de données ont potentiellement pu être transférés via AJAX, c'est énorme pour quelqu'un qui a une mauvaise connexion ou un forfait mobile limité... Il y a le cache bien sûr, donc c'est moins en pratique, mais quand même, c'est beaucoup...

C'est d'ailleurs pour ça que Toryudo ne vous a proposé que de se baser sur les notifications, pour ne pas engendrer de tels transferts...
Je comprends l'utilité de l'outil, mais sa charge technique me semble très importante !

En soi, on peut "tout" faire en JS, mais il faut faire attention à ne pas surcharger non plus le navigateur

Bonne journée (et désolé pour le léger HS )

[photoclic]

Bonjour chattigre,

Merci pour ton com.

Oui, en effet mon forum est hyper chargé, d'autant plus qu'il y a beaucoup de chargement de photos et je crois que j'ai le plus grand nombre de script installé sur un forum FA.

J'ai commencé à retirer à contre cœur certaines choses.
J'ai prévu de retirer justement le script qui s'affiche à chaque nouveau message posté pour le remplacer par celui de Toryudo dès à présent.

Si tu as d'ailleurs une liste de js que tu penses inutiles ou redondants ou trop consommateur, je suis preneur car je ne sais pas analyser cela.

[chattigre]

Si tu as d'ailleurs une liste de js que tu penses inutiles ou redondants ou trop consommateur, je suis preneur car je ne sais pas analyser cela.

Sans avoir la liste des JS installés, c'est assez compliqué ^^

Il me faudrait au moins une capture de la liste des JS avec les Urls visibles (sachant que l'url change à chaque édition du JS, donc faut pas tout modifier en même temps )

Mais plutôt dans un autre sujet, et on verra ça (peut-être pas tout seul ^^)

[photoclic]

Oui, tu as raison, c'est un autre vaste sujet

[Toryudo]

Bonjour !
C'est faisable, juste en ajoutant ce petit script en plus :

Code:

$('#mon_fil_actu li:nth-child(3)').mouseenter(function(){
  $('#fil_actu_bloc').css('height', '300px');
});

Ne pas oublier de le mettre à l'intérieur du $(function(){, ce qui donnera au final :

Code:

//Aperçu notations tte pages
$(function(){
  $('#fil_actu_bloc span').click(function(){
      $('#fil_actu_bloc').hide();
  }); 
  $("#fil_actu_bloc").mouseleave(function () {
      $("#fil_actu_bloc").css('opacity','0');
      $("#fil_actu_bloc").css('height','15px');
  });
  $("#fil_actu_bloc p").mouseenter(function () {
      $("#fil_actu_bloc").css('opacity','1');
      $("#fil_actu_bloc").css('height','100px');
  });
  $('#mon_fil_actu li:nth-child(3)').mouseenter(function(){
    $('#fil_actu_bloc').css('height', '300px');
  });
});

Et comme le dit chattigre, peut-être que certains Javascript pourrait être supprimés ou remplacés par du CSS, c'est beaucoup plus optimisé !

[photoclic]

Bonjour Toryudo,

Merci pour ton aide.
Malheureusement ça ne fonctionne pas.

A noter aussi qu'il faut 2 fois $(function(){

Code:

$(function(){$(function(){

sinon rien ne se passe.

Pour remplacer du js par du css, je ne sais pas comment faire.

[Toryudo]

Ah... effectivement, après réflexion, je comprends pourquoi.
La propreté voudrais qu'on l'écrive de cette façon du coup :

Code:

//Aperçu notations tte pages
$(function(){
  $('#fil_actu_bloc span').on('click', function(){
      $('#fil_actu_bloc').hide();
  }); 
  $("#fil_actu_bloc").on('mouseleave', function () {
      $("#fil_actu_bloc").css('opacity','0');
      $("#fil_actu_bloc").css('height','15px');
  });
  $("#fil_actu_bloc p").on('mouseenter', function () {
      $("#fil_actu_bloc").css('opacity','1');
      $("#fil_actu_bloc").css('height','100px');
  });
  $('#mon_fil_actu li:nth-child(3)').on('mouseenter', function(){
    $('#fil_actu_bloc').css('height', '300px');
  });
});

En fait, pour bien faire en JavaScript, on doit attendre que l'élément existe avant de lui associer une action/fonction. En faisant des $(function(){ de $(function(){, je ne sais pas exactement ce que ça fait... mais en mettant des ".on()" (ou .live(), qui doit encore marcher avec notre version de jQuery https://api.jquery.com/live/ même si c'est déprécié depuis longtemps), on fait en sorte d'attacher une action à un évènement qui n'existerait pas encore. Donc à priori, maintenant, ça doit marcher !

[photoclic]

Malheureusement c'est pareil.

Si pas de

Code:

$(function(){$(function(){

il ne se passe rien.
Le double $(function(){ permet je crois d'attendre que l'élément existe.


Et quand je les mets avec ton dernier script, ça fonctionne comme dans ton 1ier script, c'est à dire comme si ton ajout n'agissait pas.

J'ai l'impression que le mouseenter et mouseleave n'agissent que sur le parent pas sur le child.

[chattigre]

Coucou,

Doubler le $(function() { });, on le voit assez souvent dans des scripts qui agissent sur des éléments qui sont eux-mêmes créés en Javascript au sein de $(function() { }); "simples".

Je ne trouve rien qui confirme officiellement, mais j'ai l'impression empirique que ça engendre l'attente de la génération de la première salve de JS avant déclenchement.

Et comme la Toolbar est générée en JS, ce n'est pas si surprenant. Même chose sous AwesomeBB avec le menu, le dédoublage est indispensable si on veut agir sur son contenu qui est généré en JS (ou un setTimeout, mais on ne sait pas de combien de temps délayer exactement...)

[Toryudo]

Ce que je n'aime pas les choses bizarres inexpliquées... ou les "hasards" comme ça
Bon, du coup, après test, il faut bien remplacer par le .live(), même s'il est déprécié :

Code:

  $('#mon_fil_actu li:nth-child(3)').live('mouseenter', function(){
    $('#fil_actu_bloc').css('height', '300px');
  });

[photoclic]

Super! Cette fois c'est tout bon Toryudo

Un grand merci et une nouvelle découverte pour moi.

Je passe en résolu.

Bonne soirée.