Html 5 fixed position + xpath by opject property [function]

by ihope

HTML

<script src="http://svn.coderepos.org/share/lang/javascript/javascript-xpath/bindings/prototype/release/xpath4prototype-latest.js"></script>
<div id="logger" class="fixedWindow options">
    <table height="100%">
        
        <tr><td><div id="title" class="options"/></td></tr>
        <tr><td id="info" ></td></tr>
    </table>
</div>

<p><a class="dddd" href="javascript:var href='http://gppgle.cpm';">topic one </a>fdffdf df df df df df df dfdf f dfd fdf df df d ffdf d fdf df df df df df df dfdfdi not fixed i not fixed i not fixed i not fixed i not fixed i not fixed i not </p>

CSS

body {
    background : #000;
    color: #fefeff;
    font-size:1em;
    font-vertical-align:top;
}
.fixedWindow{
    background :lightYellow;
    position:absulute;
    left:0px;
    top:0px;
    /*position:fixed;*/
    font-size:0.9em;
    font-weight:bold;
    align:left Top;
    font-family:Arial;text-align:center;
    width:100%;
    height:100px;
    
    border:thin solid #888888;
    border-radius:3px;
}
.options{
    background: rgb(188,221,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(188,221,255,1) 0%, rgba(96,171,248,1) 75%, rgba(64,150,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(188,221,255,1)), color-stop(75%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(188,221,255,1) 0%,rgba(96,171,248,1) 75%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(188,221,255,1) 0%,rgba(96,171,248,1) 75%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(188,221,255,1) 0%,rgba(96,171,248,1) 75%,rgba(64,150,238,1) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcddff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(188,221,255,1) 0%,rgba(96,171,248,1) 75%,rgba(64,150,238,1) 100%); /* W3C */
}

.Element {
    background: rgb(207,231,250); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);...

JavaScript

var lastElementMonitored;
var titleArea = $x('//div//*[@id = "title"]')[0];
var infoArea = $x('//div//*[@id = "info"]')[0];
var lastFired = 0;
var applyToAllElements = function(context) {
    var ret = new Array();
    i = 0
    $$('*').each(function(v, i) {
        context(v);
        i++
    });

};
//===============================================

function MoveMonitor(ele) {
    ele.onmousemove = function(e) {
        titleArea.innerHTML = e.target.tagName;
        //titleArea.screenX = (e.x)
        titleArea.innerHTML += "<br/>" + (e.x).toString() + "," + (e.y).toString();
    }
}

function PressMonitor(ele) {
    ele.onmouseup = function(e) {
        if (lastFired != e.target) {
            
            infoArea.innerHTML += "<div class='Element ' style=" + e.target.cssText + "><span class='tagName'> " + e.target.tagName + "</span>" + (e.target.className ? "<span class='selector'> [@class=" + e.target.className + "]</span>" : "") + " </div> ";
            lastFired = e.target;
        }
    }
}

//----------------------------------------------
applyToAllElements(MoveMonitor);
console.log(applyToAllElements(PressMonitor));