Comment ne pas faire dépasser un ballon tip d'une page?

Version imprimable

21/12/2007, 08h36
patricklinden

Comment ne pas faire dépasser un ballon tip d'une page?

Bonjour!

J'ai une image, et un div placée en absolute, et qui apparait quand on mouse over l'image.

Mon petit probleme c'est que quand l'image est à droite de la page, le div apparait et depasse un peu de l'écran.

Comment pourrait-je faire en javascript pour faire en sorte que ca detecte que je suis un peu trop à droite/en bas de l'écran et placer le div à gauche/en haut de l'ecran pour pas que mon balloon tip depasse ?

Merci d'avance!
21/12/2007, 08h55
SpaceFrog

un petit script qui teste si le offsetLeft+offsetWidth ou offseTop+offsetHeight n'est pas supérieur aux dims de l'ecran si c'est le cas tu recalcules le left ou top ...

ici un tres bel exemple de tooltips:
http://www.walterzorn.com/tooltip/tooltip_e.htm
21/12/2007, 09h50
patricklinden

Bonjour et merci de la réponse :)

J'ai cherché offsetLeft etc dans la source de la lib que tu m'as donné mais sans succes.
J'ai bien compris le principe mais est-ce que tu pourrais me le faire avec le nom exact des attributs de mon div à utiliser ?

Du genre dans ma fonction appellée sur un mouseover, avant de passer l'attribut style.display en block comment est-ce que

1/ Je récupere la position actuelle de l'image que je mouseover (nommons la X)
2/ Je récupere la largeur de l'ecran (nommons la Y)
3/ Je set la position de mon div (nommons la Z)

Apres je comprends qu'il faut que je fasse un if X + la largeur de mon ballon > Y alors je met Z à une valeur inferieure.

Merci d'avance pour ces précisions techniques... :)
21/12/2007, 09h54
SpaceFrog

Dans la lib donnée pas besoin d'aller trifouiller dans le code c'est une focntionalité incluse ...
21/12/2007, 10h35
patricklinden

Oui mais en fait j'utilise des requettes ajax et mon code pour les balloon est deja fait, c'est pourquoi je ne peux pas simplement appeller leur lib pour afficher un texte statique, j'aimerai coder moi meme cette fonctionalité dans mon code.

Je ré-itère donc mes 3 questions :)
21/12/2007, 10h46
SpaceFrog

tu peux tout à fait coupler la lib avec des requetes ajax ...
suffit de renseigner le contenu du span avec ajax ...

tu peux même dans ce cas là utiliser la librairie window prototype qui permet de mettre le contenu de la tooltip en ajax ...
22/12/2007, 05h08
patricklinden

Argh oui mais je travaille sur un projet deja existant où tout est deja implenté, il ne me reste que cette fonction d'affichage au bon endroit à faire.

Désolé d'être insistant mais j'aimerai juste avoir ces 3 infos que j'ai demandé..

Merci d'avance
22/12/2007, 09h56
SpaceFrog

si tu tiens à perdre du temps ... il suffirait juste d'ajouter la librairie de walterzorn et de faire les appels comm eil faut .. au pire ça prend 15 minutes ...
:roll:
Mais bon si tu veux passer 6 heures à tout redevelopper toit même
24/12/2007, 05h39
patricklinden

Mais ca prend pas 6h !!

if ((POSITION_DE_MON_IMAGE + TAILLE_DE_MON_DIV) > TAILLE_DE_LA_PAGE) {
POSITION_DE_MON_DIV = TAILLE_DE_LA_PAGE - TAILLE_DU_DIV
}

voila, il me manque juste ça, c'est plus rapide de faire ça plutot que d'apprendre à utiliser une lib dont je me servirais qu'à 2%. En plus c'est dans le cadre d'une utilisation commerciale, je n'ai pas regardé mais ca peut poser probleme.

Enfin bref, peux-tu, SI POSSIBLE, me donner ce que je recherche plutot que d'essayer de me convaincre d'utiliser ta lib ? Merci d'avance

(PS: Evitez de placer en dessous : Bah cherche toi même ;))

Merci encore.

largeur de la page = window.innerWidth ( ou document.body.offsetWidth pour IE )

largeur de l'objet = objet.style.width

position "horizontale" de l'objet = objet.offsetLeft ( attention, position -par rapport à son parent- )

cas ou ça dépasse : ( position + largeur ) > largeur page

Donc en pseudo code, ça devrait ressemblait à ça je pense:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function getWindowWidth () { if (ie) return document.body.offsetWidth; else return window.innerWitdh; } var monPadding = 10; // px var windowWidth = getWindowWidth() var objWidth = maDiv.style.width // ou maDiv.offsetWidth peut-etre plutôt var totalOffsetLeft = maDiv.offsetLeft; var parent = maDiv; while ( parent = parent.parentNode ) { totalOffsetLeft += parent.offsetLeft; } if ( (totalOffsetLeft + objWidth ) > windowWidth ) { maToolTip.style.left -= (( ( totalOffsetLeft + objWidth ) - windowWidth ) + monPadding ) // Enfin, il va de soit que ce petit coup de décalage tu le fait selon la manière dont tu positionne ton infobulle hein, a toi de voir. }
et Voila pour la droite, plus qu'a faire pareil pour le reste ( le bas ? ) :aie:

et heu.. hem hem, puis-je me permetre une remarque ? allé oui !
Je te conseille moi aussi de plutôt utiliser la petite librairie qu'elle est faite pour, tu n'aura pas a "apprendre" a utiliser une lib, ca reste un truc pour faire des infobulles uniquement donc très light l'apprentissage ;)
Par contre pour ce qui est de prototype, la je trouve que c'est un peu abusé de conseiller l'artillerie lourde, le gros débalage de Ko, les tonnes de fonctions, les tuto a se tapper pour cerner une librairie nouvelle, etc.. juste pour ça. C'est un peu comme utiliser un framework pour faire un helloworld ( bon j'abuse un chouillat :mouarf: )

26/12/2007, 04h20
patricklinden

Deja merci pour les réponses :)

J'ai essayé d'utiliser la lib mais le probleme c'est que j'appelle une fonction en ajax. Du coup si dans l'element onmouseover de mon image j'appelle Tip(MaFonction()) il faut que mafonction retourne un resultat. chose qu'elle ne fait pas vu qu'elle met simplement a jour un div lors du onstatechange

alors ca marche bien pour la longueur, mais pour la hauteur j'ai un petit probleme:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var windowHeight = mgetWindowHeight(); 
						alert(windowHeight); // Renvoie tjs 900!
                        var objHeight = helpTextDiv.offsetHeight;
                        alert(objHeight); // Renvoie tjs 106
                        var totalOffsetTop = helpTextDiv.offsetTop;
                        alert(totalOffsetTop);
                        var mparent = helpTextDiv;
                        while ( mparent == mparent.parentNode ) {
                            totalOffsetTop += mparent.offsetTop;
                        }
 
                        var caca = totalOffsetTop + objHeight;
                        if ( (totalOffsetTop + objHeight ) > windowHeight ) {
 
                            alert('true:' + caca + ' > ' + windowHeight);
                            saveoldY = helpTextDiv.style.top;
                            helpTextDiv.style.top = totalOffsetTop - objHeight - 15;
                        }
						alert('false:' + caca + ' < ' + windowHeight);

avec le code de windowHeight

Code:

1
2
3
4
5
6
7
8
function mgetWindowHeight () {
  if (navigator.appName == "Microsoft Internet Explorer") {
    return document.body.offsetHeight;
  }
  else {
    return window.innerHeight;
  }
}

Le probleme c'est que, si on regarde les 3 alertes que je fais, la hauteur (1ere alerte) de la page ne varie pas même quand je la redimentionne.

Ai-je un probleme avec le nom des attributs ? (J'ai juste repris l'exemple que tu m'as donné et qui fonctionne avec Width, en remplacant tous les Width par des Heigth

merci d'avance :)

26/12/2007, 08h58
knoodrake

passage en coup d'vent, juste concernant le redimentionement, look at

Code:

window.onresize

J'ai aussi un probleme avec la boucle :
Code:

1 2 3 4 5 while (!(mparent == null)) { alert('boucle'); totalOffsetLeft += mparent.offsetLeft; mparent = mparent.parentNode; }
Je crois que ca part en boucle trop grande, puisque quand j'en sors, TotalOffsetLeft vaut NaN :/