Floating DIV ved markør, men skift side?
Hej eksperter.Jeg har ét problem med ét af mine scripts.
Når jeg holder musen over fx et billed, viser den en tidligere skjult div og tildeler den samme position som min musemarkør.
Problemet er nu, at hvis markøren er helt ude i højre side af skærmen, vil div'en - og dermed teksten - komme udenfor skærmbilledet.
Enten skal jeg have den til, at vide hvornår teksten vil ramme kanten af skærmbilledet og dermed rette div'en ind, så den ikke går ud af billedet.
Eller, få div'en til at stå til VENSTRE for markøren.
Jeg aner ikke hvilken der er nemmest, men begge metoder vil hjælpe, nok primært den første metode :)
Koderne ser således ud:
HTML:
<span onmouseover='ShowContent('talks1'); return true;' onmouseout='HideContent('talks1'); return true;'>Samtaler</span>
<div id='talks1' style='z-index: 99; display: none; position: absolute; background: #e2ebee; border: 1px solid #999999; padding: 10px;'>hej</div>
JS:
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e) {
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e) {
cX = event.clientX;
cY = event.clientY;
}
if (document.all)
document.onmousemove = UpdateCursorPositionDocAll;
else
document.onmousemove = UpdateCursorPosition;
function AssignPosition(d) {
if (self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if (document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if (document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if (d.length < 1)
return;
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if (d.length < 1)
return;
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
Nogen der kan hjælpe? :)
