Results 1 to 3 of 3

Thread: javascript for layer attached to cursor

  1. #1
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default javascript for layer attached to cursor

    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!

  2. #2
    Join Date
    Jan 2007
    Location
    Chennai, Tamil Nadu, India
    Posts
    31
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default use position absolute with the left and right properties

    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

  3. #3
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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]

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •