bloc chat

10 réponses

Auteur	Message
erwinol \| Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 10:05 Tout d'abord, bonjour à tous ! Je travaille sur un petit projet pour le boulot, un chat SMS. Il est déjà diffusé sur notre télétexte depuis 6 mois mais va être diffusé prochainement sur Internet. Voici le résultat temporaire (le design doit changer) : http://ns21878.ovh.net/~abchat/ (PS : à voir sous IE pour l'instant, sur Firefox c'est complètement HS) J'ai 1 petit problème : 1. Je voudrais afficher les derniers messages en bas sans scrollbar, mais le bloc ne peut pas être extensible car ça pourrait être diffusé à l'antenne. Comment feriez vous ? En CSS je ne trouve rien. La seule solution qui me vient à l'esprit est de calculer le nombre de lignes pour ne garder que les X dernières mais les caractères n'ayant pas tous la même largeur, ce ne sera pas très précis. Une idée ?
tybozz \| Thibaud Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 10:13 Je te colle un bout de code que j'utilise <script> function tchat_send(){ file('ajax/tchat.php?contenu='+document.getElementById('tchat_txt').value); document.getElementById('tchat_txt').value = ''; tchat_get(); } function tchat_get(){ document.getElementById('tchat').innerHTML = file('ajax/tchat_get.php'); document.getElementById("tchat").scrollTop = document.getElementById("tchat").scrollHeight; } function file(fichier){ if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); xhr_object.open("GET", fichier, false); xhr_object.send(null); if(xhr_object.readyState == 4) return(xhr_object.responseText); else return(false); } </script> <form id="ftchat" onSubmit="tchat_send(); return false;"> <strong>Familia Tchat</strong><br> <div id="tchat" style="border:1px solid #666666; width: 250px; height:200px; margin-bottom: 5px; overflow:auto;"> </div> <input type="text" value="" id="tchat_txt" style="border:1px solid grey; width:180px" > <input type="button" value="Envoyer" style="border:1px solid grey;" onClick="tchat_send(); return false;"> </form> Elevez un dragon ! avant qu'il ne fasse le casting pour la star on the net academy ou qu'il ne s'empiffre de bonbons à gogo
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 29/05/2007 à 15:37 Il doit surement avoir une solution crade avec CSS pour faire ça ... (comme c'est pas prévu pour, ça sera forcement crade). J'ai pas tout a fait compris le soucis, si il fallait que le scroll soit directe en bas (ça, ça doit etre simple en JS dans le <body>) ou si tu voulais pas de croll du tout. du genre, faire passer le bloc du dessus (logo+menu) au dessus de tout (z-index ou position: ) et le bloc contenant le texte, l'aligner vers le coin en bas à droite, le texte passerai en dessous du haut si c'est trop long (mais bon, c'est crade quoi) Faut faire des essais, mais je pense qu'avec CSS ça doit etre faisable. Tu peux eventuellement faire un traitement PHP ou JS avec ta chaine global à retourner à l'ecran pour voir la place qu'elle va prendre ds ton bloc, mais comme tu dis, c'est délicat.
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 29/05/2007 à 15:41 Je connaissais pas tiens, mais ça semble etre "overflow" qu'il faut utiliser comme dit tybozz.
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 29/05/2007 à 15:44 J'ai aussi fait un tchat en ajax Pour scroller tout en bas : GetDiv("message").scrollTop = GetDiv("message").scrollHeight; Avec GetDiv : function GetDiv(nom) { return document.getElementById(nom); } Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
erwinol \| Erwin Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 16:36 tonguide a dit : Je connaissais pas tiens, mais ça semble etre "overflow" qu'il faut utiliser comme dit tybozz. J'utilise déjà overflow mais ça ne fait pas ce que je veux. Overflow te permet d'avoir la scrollbar quand le contenu dépasse du bloc, mais il t'affiche le haut du bloc. Je vais essayer les solutions de tybozz et Devtribu. Merci à vous deux
tybozz \| Thibaud Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 16:40 si tu ne veux vraiment pas de barre de scroll et que tu affiches le "bas" du tchat, je pense que overflow:hidden devrait etre mieux. Dans tous les cas, tu dois avoir un bon bout de solution là Elevez un dragon ! avant qu'il ne fasse le casting pour la star on the net academy ou qu'il ne s'empiffre de bonbons à gogo
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 29/05/2007 à 16:42 erwinol a dit : Je vais essayer les solutions de tybozz et Devtribu. pour info c'est la mm solution mais ecrites autrement ;) document.getElementById("tchat").scrollTop = document.getElementById("tchat").scrollHeight; GetDiv("message").scrollTop = GetDiv("message").scrollHeight; function GetDiv(nom) { return document.getElementById(nom); }
erwinol \| Erwin Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 16:59 Ca marche sous Firefox mais pas sous IE ... pour info c'est la mm solution mais ecrites autrement ;) Oui j'avais vu
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 29/05/2007 à 17:05 Ca marche sous IE sans probleme sur mon tchat Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
erwinol \| Erwin Membre Inscrit le : 09/05/2005	# Le 29/05/2007 à 17:09 Sorry c'était de ma faute Merci infiniment pour votre aide devtribu et tybozz.

Auteur

Message

Inscrit le : 09/05/2005

# Le 29/05/2007 à 10:05

Tout d'abord, bonjour à tous !

Je travaille sur un petit projet pour le boulot, un chat SMS.
Il est déjà diffusé sur notre télétexte depuis 6 mois mais va être diffusé prochainement sur Internet.

Voici le résultat temporaire (le design doit changer) :
http://ns21878.ovh.net/~abchat/

(PS : à voir sous IE pour l'instant, sur Firefox c'est complètement HS)

J'ai 1 petit problème :

1. Je voudrais afficher les derniers messages en bas sans scrollbar, mais le bloc ne peut pas être extensible car ça pourrait être diffusé à l'antenne. Comment feriez vous ?

En CSS je ne trouve rien. La seule solution qui me vient à l'esprit est de calculer le nombre de lignes pour ne garder que les X dernières mais les caractères n'ayant pas tous la même largeur, ce ne sera pas très précis.

Une idée ?

tybozz | Thibaud
Membre

Inscrit le : 09/05/2005

# Le 29/05/2007 à 10:13

Je te colle un bout de code que j'utilise



	<script>

	function tchat_send(){

		file('ajax/tchat.php?contenu='+document.getElementById('tchat_txt').value);

		document.getElementById('tchat_txt').value = '';

		tchat_get();

	}

	function tchat_get(){

		document.getElementById('tchat').innerHTML = file('ajax/tchat_get.php');

		document.getElementById("tchat").scrollTop  = document.getElementById("tchat").scrollHeight;

	}

	function file(fichier){

		if(window.XMLHttpRequest) // FIREFOX

			xhr_object = new XMLHttpRequest();

		else if(window.ActiveXObject) // IE

			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

		else

			return(false);

		xhr_object.open("GET", fichier, false);

		xhr_object.send(null);

		if(xhr_object.readyState == 4) return(xhr_object.responseText);

		else return(false);

	}

	</script>

	<form id="ftchat" onSubmit="tchat_send(); return false;">

	<strong>Familia Tchat</strong><br>

	<div id="tchat" style="border:1px solid #666666; width: 250px; height:200px; margin-bottom: 5px; overflow:auto;">



	</div>



	<input type="text" value="" id="tchat_txt" style="border:1px solid grey; width:180px" > <input type="button" value="Envoyer" style="border:1px solid grey;" onClick="tchat_send(); return false;">

	</form>

Elevez un dragon ! avant qu'il ne fasse le casting pour la star on the net academy ou qu'il ne s'empiffre de bonbons à gogo

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 29/05/2007 à 15:37

Il doit surement avoir une solution crade avec CSS pour faire ça ... (comme c'est pas prévu pour, ça sera forcement crade).

J'ai pas tout a fait compris le soucis, si il fallait que le scroll soit directe en bas (ça, ça doit etre simple en JS dans le <body>) ou si tu voulais pas de croll du tout.

du genre, faire passer le bloc du dessus (logo+menu) au dessus de tout (z-index ou position: ) et le bloc contenant le texte, l'aligner vers le coin en bas à droite, le texte passerai en dessous du haut si c'est trop long (mais bon, c'est crade quoi)

Faut faire des essais, mais je pense qu'avec CSS ça doit etre faisable.
Tu peux eventuellement faire un traitement PHP ou JS avec ta chaine global à retourner à l'ecran pour voir la place qu'elle va prendre ds ton bloc, mais comme tu dis, c'est délicat.

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 29/05/2007 à 15:41

Je connaissais pas tiens, mais ça semble etre "overflow" qu'il faut utiliser comme dit tybozz.

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 29/05/2007 à 15:44

J'ai aussi fait un tchat en ajax

Pour scroller tout en bas :
GetDiv("message").scrollTop = GetDiv("message").scrollHeight;

Avec GetDiv :
function GetDiv(nom) {
return document.getElementById(nom);
}

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

erwinol | Erwin
Membre

Inscrit le : 09/05/2005

# Le 29/05/2007 à 16:36

tonguide a dit :
Je connaissais pas tiens, mais ça semble etre "overflow" qu'il faut utiliser comme dit tybozz.

J'utilise déjà overflow mais ça ne fait pas ce que je veux. Overflow te permet d'avoir la scrollbar quand le contenu dépasse du bloc, mais il t'affiche le haut du bloc.

Je vais essayer les solutions de tybozz et Devtribu.

Merci à vous deux

tybozz | Thibaud
Membre

Inscrit le : 09/05/2005

# Le 29/05/2007 à 16:40

si tu ne veux vraiment pas de barre de scroll et que tu affiches le "bas" du tchat, je pense que overflow:hidden devrait etre mieux.
Dans tous les cas, tu dois avoir un bon bout de solution là

Elevez un dragon ! avant qu'il ne fasse le casting pour la star on the net academy ou qu'il ne s'empiffre de bonbons à gogo

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 29/05/2007 à 16:42

erwinol a dit :
Je vais essayer les solutions de tybozz et Devtribu.

pour info c'est la mm solution mais ecrites autrement ;)

document.getElementById("tchat").scrollTop = document.getElementById("tchat").scrollHeight;

GetDiv("message").scrollTop = GetDiv("message").scrollHeight;
function GetDiv(nom) {
return document.getElementById(nom);
}

erwinol | Erwin
Membre

Inscrit le : 09/05/2005

# Le 29/05/2007 à 16:59

Ca marche sous Firefox mais pas sous IE ...

pour info c'est la mm solution mais ecrites autrement ;)

Oui j'avais vu

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 29/05/2007 à 17:05

Ca marche sous IE sans probleme sur mon tchat

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

erwinol | Erwin
Membre

Inscrit le : 09/05/2005

# Le 29/05/2007 à 17:09

Sorry c'était de ma faute

Merci infiniment pour votre aide devtribu et tybozz.

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.