Détection et affichage suivant overflow

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Détection et affichage suivant overflow

francoish

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

Publicité

francoish

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.

gatsu35

Blablaté par Harko

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 :

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

Détection et affichage suivant overflow

Sujets relatifs
Modifier une valeur pour l'affichage	Insertion checkbox dans page html et affichage valeur
Importer des données d'un autre classeur suivant une date	Access 2010 - Affichage photo de chaque enregistrement en mosaique
Script Détection Windows ne fonctionne pas sous Seven	Supprimer 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 Safari	affichage de donné
Plus de sujets relatifs à : Détection et affichage suivant overflow

Page générée en 0.034 secondes