begin process at 2012 05 28 11:41:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > TRONQUER AUTOMATIQUEMENT UN CONTENU TROP LONG POUR CE CONTENENUR (TD, DIV, ETC...)

TRONQUER AUTOMATIQUEMENT UN CONTENU TROP LONG POUR CE CONTENENUR (TD, DIV, ETC...)


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :tronquer, contenu, long, div, td Niveau :Initié Date de création :06/10/2005 Date de mise à jour :12/11/2008 11:48:43 Vu / téléchargé :10 718 / 396
Auteur : MaX3315

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Combien de fois vous-vous êtes batus pour que vos colonnes de tableau de soit pas 'explosé' par un contenu trop grand.

La solution consiste simpelment à masquer tous ce qui depasse avec un peut de css. Mais seul IE permet d'ajouté trois petit point montrant que le contenu à été coupé. (regardez du cote de text-overflow:ellipsis; avec overflow:hidden; ).

J'ai bricolé ce script afin  de détecté les contenus qui dépasse de la largeur de la colonne (ca devrait fonctionner avec n'importe quel conteneur en fait) et de placer u nsymbole en fin de contenu pour montré que celui-ci et plus long.

J'ai aussi ajouté la visualisation du contenu complet lors du passage de la sourie dessus et ceci pour IE et Mozilla.

Source

  • Source et Explications détaillées:
  • ----------------------------------
  • http://codessources.votre-web.com/js/ellipsis/index.php
  • Démonstration en ligne:
  • -----------------------
  • http://codessources.votre-web.com/js/ellipsis/demo.htm
Source et Explications détaillées:
----------------------------------
http://codessources.votre-web.com/js/ellipsis/index.php


Démonstration en ligne:
-----------------------
http://codessources.votre-web.com/js/ellipsis/demo.htm

 Conclusion

Voilà, pour mon premier script sur le réseau code source j'espère avoir été utile.

N'hésité pas à me faire part de vos remarques, corrections, suggestions...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

07 octobre 2005 04:28:38 :
Suppression d'une ligne de débuguage inutile.
27 octobre 2005 09:54:31 :
J'ai ajouté le zip. Et j'ai également changer le titre (anciennement "Emmulation de la commande ellipsis sous mozilla). Peut-être qu'avec ce nouveau titre et le zip je susciterai un petit peut plus de réactions.
22 novembre 2005 11:00:52 :
Mise en ligne d'une version de démonstration et d'explications détaillées sur mon site perso dédié à Codes Sources : http://codessources.votre-web.com/.
12 novembre 2008 11:48:44 :
Aujourd'hui je suis tombé sur une solution bien plus élégante sans Javascript, qui se base sur css/XUL pour firefox. L'article est en anglais. Alors oubliez ma solution ;-) C'est par là : http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

 Sources du même auteur

Source avec Zip Source avec une capture DESSINER DES LIGNES SUR VOTRE PAGE WEB
Source avec Zip Source avec une capture ONGLET À TABULATION MULTI BLOC
Source avec Zip SHOWMODALDIALOG POUR TOUS LES NAVIGATEURS MODERNES
Source avec Zip Source avec une capture AUTO SCROLLER DE NEWS
Source avec Zip Source avec une capture GÉNÉRATEUR DE CHAÎNE POUR LA FONCTION DATE() DE PHP4
Toutes les sources de MaX3315

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip MODIFIER LE CONTENU D'UN DIV AVEC JAVASCRIPT par lecurieux41
OUTIL DE SÉLECTION par jdmcreator
Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
Source avec Zip CLASS BARRE DE DÉFILEMENT (SCROLLBAR) JAVASCRIPT par TheWeasel47
Source avec Zip AIDE AU CHOIX DANS LES LONGS SELECT (PAYS PAR EXEMPLE) par zilx

Commentaires et avis

Commentaire de Zart le 08/11/2005 16:21:23

Vraiment bien ce script.
Par contre, il serait intéressant de mettre un liens directe vers ton exemple sur un site, histoire de consulter l'exemple en direct.
Si toutefois ça ne te pose pas de problèmes.
J'ai également vu ton autre source elle fort intéressante

Commentaire de MaX3315 le 08/11/2005 17:36:56

Pour l'instant ce n'est que visible dans un CMS que je concoit... donc pas encore ouvert au public. Mais je vais faire une petite page de démo (d'autre scripts devrait très vite venir).

Merci en tout cas.

Commentaire de MaX3315 le 22/11/2005 11:04:23

Voilà Zart j'ai ajouté une démo en ligne... et un peu plus que ca. Cela m'a permit d'enfin faire un mini site perso.

Commentaire de Zart le 23/11/2005 01:36:26

Je trouve ça trop bon en réalité.
Mais pourquoi tu dis que tu utilises Elipsis de Mozilla ?
Pas compris. Bravo pour ton site. Personnellement j'aimerais pouvoir m'attaquer à ce genre de projet mais en ce moment je suis un peu pris entre 2 feux. Donc pour le moment je laisse tomber les projets persos.
Un code de qualité

Commentaire de MaX3315 le 23/11/2005 09:45:28

En fait ellipsis c'est un truc qui n'existe que sous IE... c'est pas un standard W3C.

Sous IE pour mettre des '...' il suffit de mettre overflow:ellipsis (en css) ce que Firefox ne comprend pas (sous Firefox j'utilise simplement overflow:hidden)

Donc mon script émule cela sous Firefox puis ajoute pour IE et Firefox la gestion du passage de sourie.

Merci pour mon site ca m'encourage à poursuivre... j'dois avouer qu'une autre de mes motivations pour le faire est aussi de changer d'employeur à l'occasion donc si ca peut aider à cà...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Scroll dynamique dans div [ par l2el2o ] Bonjour à tous, J'ai une balise div en overflow:scroll; dont le contenu change dynamiquement. J'aimerais savoir si il serait possible de faire d Un div sur la hauteur d'une page [ par sschupp ] Bonjour, Je fais la mise en page de mon site web et je n'arrive pas à faire ce que je veux. J'es En cliquant sur un lie le contenu du Div change! [ par younes371 ] Bonjour,Bah voici mon problème, j'ai des liens dans ma page,Je veux que lorsque je clique sur un lien le contenu d'un div change!. :) .si klk 1 a une Editeur de texte en ligne avec des objets dragables [ par calitom ] Bonjour, Je cherche a faire une page permettant de regroupper plusieurs DIV draggables dans un DIV général. - En gros, il y aurait un DIV général. - E Modifier le contenu d'un DIV [ par Drazounet ] Bonjour à tous, Je cherche à modifier le texte qui est contenu dans un DIV, j'ai tenté de rechercher sur le net, mais après une b Récupérer le contenu d'une balise div [ par tonic1 ] Bonjour à tous, je galère depuis plusieurs jours sur des gros problèmes de mise en forme de données.A partir de données prove Detecter l'overflow d'un DIV dans un TD [ par MaX3315 ] Bonjour à tous, Je cherche à faire une liste sous forme d'un tableau (avec plusieurs colonnes) d'une largeur de 100%. Jusque là rien d Connaître les dimensions d'1 TD dans une TABLE [ par lukacs ] Bonjour à tous,Je souhaite faire une petite animation en utilisant des DIV dans un tableau. Je veux faire grossir la DIV pour quelle finisse par prend Affichage du contenu d'une page dans un DIV [ par aloisio11 ] Bonjour,Je suis dans ma page Article.asp avec ma liste d'articles.Au clique sur un article je voudrais, en Javascript, afficher le contenu d'une page Problème de div [ par ripmaster ] Bonjour,Je vous écris car j'ai un petit problème...J'essaie de mettre, en plus de ma colonne de menu à gauche et le contenu de la page à droite de cel


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,683 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)