PDA

View Full Version : javascript for layer attached to cursor



Bel Esprit
03-13-2009, 07:25 AM
I have a website that is created in dreamweaver. I currently have coding that will make a floating layer appear when the cursor is placed on a photo. The information about the product appears in the layer. The layer moves down the screen as you scroll, but I would prefer to have the layer attached to the cursor, so that when you place the cursor/mouse on the picture, the layer appears with the information about the picture right there.

I found coding for an element (div) that works this way, but the element does not allow me to set up formatting within the pop-up. I can't even use line breaks - just continuous, wrap-around text. Doesn't work with the type of set up that I currently have in the layer (the information is laid out in a table format which I can do in a layer, not an element).

Can anyone help me with the javascript code for this? Or send me to a place where I can find it?

Thanks!

jayapalchandran
03-13-2009, 08:36 AM
Any object that displays some thing can be positioned anywhere on the screen below or above any object using the css properties position:absolute , zindex and providing the left and top values. user the mouse events x and y properties to find the mouse position and place your layer on it like obj.style.left = mouseeventobject.pageX and etc...

there are huge resources for your question so google further

Bel Esprit
03-13-2009, 09:25 AM
Thanks for your reply. I'm not well-versed in this kind of thing, so I'm not so sure I understand completely. What I should search for is code for the positioning of the layer? I tried to revise the element coding to be for a layer in dreamweaver, but it didn't work.

Here's the part of the code that deals with positioning for the element (I think). Can I adapt this code for the floating layer so that the floating layer gets positioned like this? I put the code for the floating layer below as well.

[code for element attached to cursor]
function CurPos(e){
cursorX=(!e?event.clientX:e.clientX)+document.body.scrollLeft
cursorY=(!e?event.clientY:e.clientY)+document.body.scrollTop
followMouse()
}

function followMouse(){

if(running==0){return}

if(cursorX>document.body.clientWidth-(tipDisplay.offsetWidth/2)){
tipDisplay.style.left=cursorX-tipDisplay.offsetWidth
}
else if(cursorX<tipDisplay.offsetWidth/2){
tipDisplay.style.left=cursorX
}
else{
tipDisplay.style.left=cursorX-(tipDisplay.offsetWidth/2)
}

if(cursorY>document.body.clientHeight-tipDisplay.offsetHeight){
tipDisplay.style.top=cursorY-tipDisplay.offsetHeight
}
else{

tipDisplay.style.top=cursorY+20
}

tipDisplay.style.display="block"

}

document.onmousemove=CurPos
[end code]



[code for floating layer]

var useFloat = "";
var nV = 0;
var tick = "";

function hideMessage(){

clearTimeout(tick);
useFloat.style.display = 'none';
}

function stayHome(){

var xV = 0;
if(!document.body.scrollTop){xV = document.documentElement.scrollTop}
else {xV = document.body.scrollTop}
useFloat.style.top = nV+xV+"px"
tick = setTimeout("stayHome()",50);
}

function showMessage(nText){

useFloat.style.display = "";
useFloat.innerHTML = nText;
stayHome();
}

function init(){

useFloat = document.getElementById('isFloat');
nV = useFloat.offsetTop;
useFloat.style.display = 'none';
var msgWidth = parseInt(useFloat.style.width)
useFloat.style.left = ((screen.width-30)/2)-(msgWidth/2)+"px";
}

window.onload=init;

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
if ((obj=MM_findObj(objName))!=null) with (obj)
if (document.layers) {document.write(unescape(newText)); document.close();}
else innerHTML = unescape(newText);
}
[end code]