Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1632 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Détection et affichage suivant overflow

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Détection et affichage suivant overflow

n°2147671
francoish
Posté le 01-07-2012 à 12:05:50  profilanswer
 

Bonjour à tous,
 
Voici ma problématique : "faire apparaître une flèche indiquant que l'ensemble du contenu d'un div n'est pas affiché et nécessite de faire défiler".
 
Actuellement, la détection que nous avons utilisée fait apparaître la flèche uniquement après avoir commencé à scroller sur la page et non pas dès le chargement car la détection est basé sur la présence du scroll ou non.
 
Est-ce que quelqu'un aurait une suggestion pour réaliser un script, utilisant jQuery par exemple (qui nous sert de base pour plusieurs actions dans notre site).
 
En vous remerciant par avance.
 
Cordialement.
 
P.S. Voici le code actuel pour détecter s'il y a scroll ou non sur un div  

if($('#volet-droit #centre').scrollHeight() < $('#volet-droit #centre').clientHeight()) {  
      $('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>').show();
};


Message édité par francoish le 01-07-2012 à 14:59:54
mood
Publicité
Posté le 01-07-2012 à 12:05:50  profilanswer
 

n°2148573
francoish
Posté le 08-07-2012 à 18:37:52  profilanswer
 

Rebonjour à tous,
 
Après une bonne semaine de réflexion, j'ai trouvé une solution que voici :
 

jQuery(
 function($)
 {
  $(document).ready(function() {
   if($('#volet-droit #centre')[0].scrollHeight > $('#volet-droit #centre').innerHeight()) {
    $('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>');
     
   }
 
  });
  $('#volet-droit #centre').bind('scroll', function()
  {
   if($('#volet-droit #centre').scrollTop() + $('#volet-droit #centre').innerHeight() >=  
    $('#volet-droit #centre')[0].scrollHeight) {
    $('#volet-droit #fleche').remove();
   }
   else  
   if($('#volet-droit #centre')[0].scrollHeight > $('#volet-droit #centre').innerHeight()) {
    $('#volet-droit #centre').append('<img src="../images/fleche.gif" id="fleche"/>');
   }
     
  });
 }
);


 
Si vous avez des commentaires pour améliorer cette fonction...
 
Elle fait apparaître la flèche dès le chargement du document. La masque une fois qu'on est arrivé en fin de scroll et la fait réapparaître si on remonte dans le scroll.
 
Cordialement.

n°2148587
gatsu35
Blablaté par Harko
Posté le 09-07-2012 à 01:53:52  profilanswer
 

Essaye quand c'est possible de mettre tes $('machin') dans des variables, car là en plus d'être lourd ce n'est pas performant

 
Code :
  1. jQuery(
  2.     function ($) {
  3.         var centre;
  4.         var fleche = $('<img src="../images/fleche.gif" id="fleche"/>');
  5.         centre = $('#volet-droit #centre');
  6.         centre.append(fleche);
  7.      
  8.         centre.bind('scroll', function () {
  9.             if (centre.scrollTop() + centre.innerHeight() >= centre[0].scrollHeight) {
  10.                 fleche.hide(400);
  11.             }
  12.             else if (centre[0].scrollHeight > centre.innerHeight()) {
  13.                 fleche.show(400);
  14.             }
  15.         });
  16. centre.trigger('scroll')
  17.     }
  18. );
 

Ici c'est simple, je déclare,  centre et fleche, fleche étant un élément dom englobé dans un wrapper jquery.
Une fois au domready, je met systématiquement la fleche au chargement, ensuite je bind l'event scroll, et ensuite j'execute cet evenement pour initialiser l'état de la fleche


Message édité par gatsu35 le 09-07-2012 à 02:08:51

---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Détection et affichage suivant overflow

 

Sujets relatifs
Modifier une valeur pour l'affichageInsertion checkbox dans page html et affichage valeur
Importer des données d'un autre classeur suivant une dateAccess 2010 - Affichage photo de chaque enregistrement en mosaique
Script Détection Windows ne fonctionne pas sous SevenSupprimer l'affichage de la barre de défilement verticale
affichage .data .bss heap, ..Affichage d'images en douceur
Différence d'affichage d'un tableau dans une div avec IE et Safariaffichage de donné
Plus de sujets relatifs à : Détection et affichage suivant overflow


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR