views:

22

answers:

2

Hello, someone would have a script idea to place an info bubble from right to left when it has no place in the browser window? thank you for your answers ...

My script

// Detection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Decallage de l'infobulle par rapport au pointeur en X et en Y (en pixels)
decal_x = 10;
decal_y = 0;

// Creation d'un raccourci pour manipuler le calque
var skn = (ns4) ? document.bulle : bulle.style;

// Instruction pour Netscape
if (ns4) document.captureEvents(Event.MOUSEMOVE);

// Interception des mouvements du pointeur
// Celui-ci est activé et désactivé par les fonctions
// reactiverMouseMove() et desactiverMouseMove()
//document.onmousemove = suivre_souris;


function popAccueil(nom,adresse,tel,fax,mail) 
{
 var contenu;
 contenu = "<table border='0' cellspacing='0' cellpadding='5' width='200'><tr><td bgcolor='#CCCCFF'>"; 
 contenu += nom + "</td></tr><tr><td bgcolor='#CCCCFF'><u>Adresse</u>: "; 
 contenu += adresse + "</td></tr><tr><td bgcolor='#CCCCFF'><u>Tel</u>: "; 
 contenu += tel + "</td></tr>";
 if (fax != null && fax != '')
 {
 contenu += "<tr><td bgcolor='#CCCCFF'><u>Fax</u>: " +fax + "</td></tr>";
 } 
 if (mail != null && mail != '')
 {
 contenu += "<tr><td bgcolor='#CCCCFF'><u>Mail</u>: " + mail + "</td></tr>";
 }
 contenu +="</table>";
 if (ns4)// Instructions pour Netscape
 {
  skn.document.write(contenu);
  skn.document.close();
  skn.visibility = "visible";
 }// Instructions pour Internet Explorer
 else if (ie4) 
 {
  document.all("bulle").innerHTML = contenu;
  skn.visibility = "visible";
 }
}

function popException(exception) 
{
 var contenu;
 //Si exception n'est pas vide on affiche l'info-bulle
 if(exception!="")
 { 
  contenu = "<table border='0' cellspacing='0' cellpadding='5' width='200'><tr><td bgcolor='#CCCCFF'>" + exception + "</td></tr></table>";
  if (ns4)// Instructions pour Netscape
  {
   skn.document.write(contenu);
   skn.document.close();
   skn.visibility = "visible";
  }// Instructions pour Internet Explorer
  else if (ie4) 
  {
   document.all("bulle").innerHTML = contenu;
   skn.visibility = "visible";
  } 
 }
}
function pop(message, image) {

// Formatage de l'infobulle (ici un tableau bleu)
 var contenu;
 if(image == "/stockage/")
 {
  contenu = "<table border='0' cellspacing='0' cellpadding='5' width='200'><tr><td bgcolor='#CCCCFF'>" + message + "</td></tr></table>";
 }
 else
 {
   contenu = "<table border='0' cellspacing='0' cellpadding='5' width='200'><tr><td bgcolor='#CCCCFF'>" + message + "</td></tr><tr><td><img src="+ image +" border='0'></td></tr></table>";
 }
// Instructions pour Netscape
 if (ns4) {
  skn.document.write(contenu);
  skn.document.close();
  skn.visibility = "visible";
  }

// Instructions pour Internet Explorer
 else if (ie4) {
  document.all("bulle").innerHTML = contenu;
  skn.visibility = "visible";
  }
 }

// Gestion du pointeur
function suivre_souris(e) {

// Creation des variables de decallage
 var x = (ns4) ? e.pageX : event.x + document.body.scrollLeft;
 var y = (ns4) ? e.pageY : event.y + document.body.scrollTop;
// Cas particulier pour Internet Explorer sur Mac (les coordonnees de decallages sont modifiees)
 if ( (navigator.userAgent.indexOf('Mac') != -1) && (navigator.userAgent.indexOf('MSIE') != -1) ) {
  skn.left = x + decal_x - 135;
  skn.top  = y + decal_y - 155;
  }

// Pour les autres cas, decallage normal du calque par rapport au pointeur
 else {
  skn.left = x + decal_x;
  skn.top  = y + decal_y;
  }
 }


// Fonction pour masquer le calque
function disparaitre() {
 if (ns4) {
  skn.document.write('');
  skn.document.close();
  skn.visibility = "hidden";
  }
 else if (ie4) {
  document.all("bulle").innerHTML = '';
  skn.visibility = "hidden";
  }
 }


// Désactive la gestion du suivi de souris
function desactiverMouseMove(){
 document.onmousemove = null;
}

// Réactive la gestion du suivi de souris
function reactiverMouseMove(){
 document.onmousemove = suivre_souris;
}

alt text

i want when i have this bubble to place from right to left when it has no place in the browser window,when it is displayed outside window

A: 

Can you try and explain your question a little clearer?

AJFMEDIA
A: 

You can get the window client's width and height and then compare it with your bubble's position.
If the bubble's X position added to the bubble's width is bigger than the client's size, the new X position should be equal to the difference between the client's width and the bubble's width. In IE you can get the client's width with document.body.clientWidth and in other browsers you should use window.innerWidth.
Here's a simple example:

var bx, by; // bx and by stand for the bubble's X and Y position
var bw, bh; // bw is the bubble's width and bh is the height
// ... some code here ...
// ... the bx and by variables get the mouse coordinates ...
if (bx+bw>window.innerWidth) bx=window.innerWidth-bw;
if (by+bh>window.innerHeight) by=window.innerHeight-bh;

I hope I have explained it well. If you didn't understand something, just tell me about it and I'll try to explain it better.

rhino
thx, i use IE7 so i use document.body.clientWidth , so how can i know the positon X and Y for the bubble.?How can i get var bw, bh; // bw is the bubble's width and bh is the height ??
Mercer
You have to save the mouse coordinates to the variables that represent the bubble's X and Y position, and then process them.To get the bubble's width and height you may use bubble.offsetWidth and bubble.offsetHeight, where "bubble" is the bubble's name.P.S.You should check which browser does the user have and then, depending on the browser's name, use document.body.clientWidth or window.innerWidth.
rhino
thx, work for me ;)
Mercer