11548 sujets

JavaScript, DOM et API Web HTML5

Problème infobulle (dépasse la page et affiche un scroll)

Bonjour à tous et à toutes!

Je rencontre actuellement un gros problème d'infobulle. Mon info bulle est trop important et le problème étant qu'elle dépasse l'écran sur la droite, et ça fait apparaitre un scroll..

voici une image pour exposer un peu mieux le problème :
http://img255.imageshack.us/my.php?image=bughg6.jpg

Voici le code JS:


/******************************************
# Auteur : Julien Theler -  www.twiip.ch
 
# Contact : julien.theler@twiip.ch
# Licence : CC-by-nc
******************************************/

function infobulle(element, text){
	var is_ie = ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1));
	
	//Suppression du title de l'élément pour éviter une superposition
	element.title = '';
	
	//Création d'une div provisoire
	var infobulle = document.createElement('div');
	infobulle.style.position = 'absolute';
	
	document.onmousemove = function(e){
		x = (!is_ie ? e.pageX : event.x+document.documentElement.scrollLeft);
		y = (!is_ie ? e.pageY : event.y+document.documentElement.scrollTop);
		infobulle.style.left = x+15+'px';
		infobulle.style.top = y+15+'px';
		infobulle.style.display = '';
	}
	infobulle.id = 'infobulle';
	infobulle.innerHTML = text;
	infobulle.style.display = 'none';
	infobulle.style.opacity = '0';
	infobulle.style.filter = 'alpha(opacity=0)';
	document.body.appendChild(infobulle);

	for(i=0; i<=100; i+=10){
		var time = ((i/20)*30);
		setTimeout('opacity('+i+', \'infobulle\');', time);
	}


	//Ajout de la fermeture lorsque la souris quitte l'élément
	element.onmouseout = function(){
		for(i=0; i<=100; i+=10){
			var time = ((i/20)*30);
			var opacity = (100-i);
			setTimeout('opacity('+opacity+', \'infobulle\', 1);', time);
		}
	};
	
	//Fonction servant à faire varier l'opacité
	opacity = function(opacity, id, close){
			var infobulle = document.getElementById(id);
			infobulle.style.opacity = (opacity/100);
			infobulle.style.filter = 'alpha(opacity='+opacity+')';
			if(opacity == 0 && close){
				document.body.removeChild(infobulle); //Suppression de la div provisoire
			}
	}
}


Est il possible que la bulle s'affiche selon la résolution de la personne qu navigue, et faire en sorte qu'elle s'affiche sans scrolL?
Modifié par GhostKiller (12 Nov 2008 - 17:49)
Ton problème se situe dans le fait que ton info-bulle est trop large ou trop haute ?

Dans le cas ou c'est trop large, tu peux détecter la largeur de ton info-bulle et suivant ou elle est placée dans ta page, la positionnée en fonction de sa largeur.

Pour le cas ou c'est la hauteur qui est trop grande alors les solutions sont moindre et a par mettre moins de contenu dans ton info-bulle il est difficile de trouver une solution.

Pour info : Ton image pour illustrer ton problème ne fonctionne pas !

enjoy Smiley biggrin
Sujet clos
Aller à