✔ Position von Größe abhängig machen

[Sasser]

Hallo Leute!

Ich nutze folgendes JavaScript, mit welchem ich die Title verschönere. Wenn ich nun aber an den rechten oder linken Browserrand komme, sodass es über den Bildschirmrand ragen würde, schiebt er meine divs zusammen!

Wie kann ich die Position des Divs immer mittig unter dem Zeiger positionieren?

Oder hat jemand eine bessere und schönere Lösung?

var ToolTipTag = "a,img";
var ToolTipX = 15;
var ToolTipY = 0;
tooltip = {
name : "ToolTip",
offsetX : ToolTipX,
offsetY : ToolTipY,
tip : null
}

tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "ToolTip";}
var tipContainer = document.getElementById(tipContainerID);
if(!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
var a, sTitle, elements;
var elementList = ToolTipTag.split(",");
for(var j = 0; j < elementList.length; j++)
{
elements = document.getElementsByTagName(elementList[j]);
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
a = elements[i];
sTitle = a.getAttribute("title");
if(sTitle)
{
a.setAttribute("tiptitle", sTitle);
a.removeAttribute("title");
a.removeAttribute("alt");
a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
a.onmouseout = function() {tooltip.hide()};
}
}
}
}
}

tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {
x = evt.pageX;
y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}

tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
this.tip.style.zIndex = "1000";
this.tip.style.position = "absolute";
this.tip.style.padding = "3px";
this.tip.style.borderWidth = "2px";
this.tip.style.borderStyle = "outset";
this.tip.style.borderColor = "#000000";
this.tip.style.backgroundColor = "#C0C0C0";
this.tip.style.textAlign = "left";
this.tip.style.fontSize = "9px";
this.tip.style.fontWeight = "bold";
this.tip.style.color = "#000000";
}

tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}

 

[Maik]

Hi,

ich hab keine Ahnung, welche DIVs bei dir zusammengeschoben werden, wenn man dem Fensterrand zu Nahe kommt, aber mit Walter Zorns Tooltip ist mir das noch nicht untergekommen.

mfg Maik

 

[Sasser]

Also das passiert, wenn ich in den Title eines Images etwas schreibe oder divs hinein packe!

<img src="" title="<div>Test</div>">

Das Script stylt die Title Elemente von Bildern und Links auf!

Mfg.

 

[Maik]

<img src="" title="<div>Test</div>">

Ist das dein Ernst, ein DIV-Block im title-Attribut?

mfg Maik

 

[Sasser]

Klar ist das Mist, aber das Script wandelt es dann um in ein gestyltes DIV...

Und JavaScript ist in unserem System sowieso standardmäßig aktiviert, ansonsten kann der User eben nicht rein....

 

[Sasser]

Kann man das Script nicht etwas abändern, sodass es nicht über den Browserrand hinaus gehen kann?

Könnte es nicht einfach die Position an der Maus ändern?

 

[Maik]

Irgendwas stimmt mit eurem Forum nicht!

Mit dem Forum stimmt hier alles.

Als Stamm-User und nach knapp einjähriger Mitgliedschaft sollte dir die Forenregel bekannt sein, dass das Pushen von Themen nicht erwünscht ist, und solche Beiträge von uns Moderatoren kommentarlos gelöscht werden.

Du hast das Problem hier in deinem ersten Post erläutert und den Scriptcode gezeigt, also ist es auch nicht nötig, dies neun Tage später zu wiederholen.

In deinem Doppelpost DIV - Position ändern hab ich dir den entsprechenden Netiquetten-Auszug angehängt, also lies ihn bitte auch, und halte dich zukünftig daran - vielen Dank

mfg Maik

 

[Sasser]

Ok sorry, war einfach nur ein Versehen!

Ich dachte ich könne die zwei Beiträge löschen, da Sie sowieso keinen Sinn hatten

Also ich habe nun etwas rum gebastelt, bekomme es aber nicht richtig hin!

Das hier ist mein Ansatz:

tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
} else {
x = evt.pageX;
y = evt.pageY;
}



if (x > 480) {
this.tip.style.left = 480 + "px";
} else {
this.tip.style.left = (x + this.offsetX) + "px";
}



this.tip.style.top = (y + this.offsetY) + "px";
}

Also ich möchte, dass wenn man zu nah an den rechten Browserrand kommt, das Element dann links vom Mauszeiger angezeigt wird. Aber wie bekomme ich das richtig hin, denn das o.g. Beispiel funktioniert noch nicht richtig...

 

[Sasser]

Ich habs gelöst:

if ((x + this.offsetX) >= ((window.innerWidth-this.tip.offsetWidth)-25)) {
this.tip.style.left = ((x + this.offsetX)-this.tip.offsetWidth) + "px";
} else {
this.tip.style.left = (x + this.offsetX) + "px";
}

Man sieht zwar kurz wie es über den Browserrand hinausragt, dann aber die Position vor dem Mauszeiger einnimmt

Hat jemand noch eine Lösung, wie man das noch in den Griff bekommt?