« rss2html.js version 0.1 | Main

Saturday, July 23, 2005

Show Layer

this code from Log of misc.js of Google Ajaxslt

show example page.

at first start capture mouse location.

on click open or move layer .

This code was tested on IE6.0 & Firefox 1.0.6

<html>

<head>

<script Language="JavaScript">

<!--

var mouseX;

var mouseY;

var html="<hr>";

function showLayer(x,y,html,id){

var l=getLayer(x,y,id);

l.innerHTML=html;

}

function getLayer(x,y,id){

if(!id){

id="showLayer";

}

var l = document.getElementById(id);

if (!l) {

l = document.createElement('div');

l.id = id;

l.style.position = 'absolute';

l.style.left = x+'px';

l.style.top = y+'px';

l.style.width = '250px';

l.style.height = '150px';

l.style.overflow = 'auto';

l.style.backgroundColor = '#f0f0f0';

l.style.border = '1px solid gray';

l.style.fontSize = '10px';

l.style.padding = '5px';

document.body.appendChild(l);

}else{

l.style.left = x+'px';

l.style.top = y+'px';

}

return l;

}

function mouseMove(evt){

if(document.all){

mouseX = event.x;

mouseY = event.y;}

else{

mouseX = evt.pageX;

mouseY = evt.pageY;

}

}

if(document.all) {

document.onmousemove = mouseMove;

}

else if(document.getElementById){

window.document.onmousemove = mouseMove;

}

else {

window.onmousemove = mouseMove;

window.captureEvents(Event.MOUSEMOVE);

}

// -->

</script>

</head>

<html>

<body>

<input type="button" value="click" onclick="showLayer(mouseX,mouseY,html)">

<br><br><br><br><br><br><br><br>

<input type="button" value="click" onclick="showLayer(mouseX,mouseY,html)">

</body>

</html>

Posted by at 12:24 AM
Categories: Example