homepage 2nd trial

by ihope

HTML

<div id="xp-header">
        <div id="xp-logo">( //* ) <div style="padding:4px;font-size:0.6em;display:inline;">Beta</div>
        </div>
        
        <ul class="breadcrumb">
            <li><a href="#">Main Page Select</a></li>
            <li><a href="#">Xpath Select</a></li>
            <li><a href="#">Sorting</a></li>
            <li><a href="#">Finish</a></li>
            <li></li>
        </ul>
    </div>
<div id="xp-page" >    
    <div id="xp-content-container"  width="90%">
        <div id="xp-container" width="100%">
            <div id="xp-content" width="100%" >
                <iframe src="http://blenderNation.com" width="90%">
        </iframe>
                <div id="site-form">
                    <form >
                        Enter Start URL
                        <input type="url"style="margin:5px;width: 80%;" />
                        <p class="submit" ><input type="submit" value="Go" width="20px"></p>
                    </form>
                </div>
            </div>
            
        </div>
        
    </div></div>

CSS

html,body {
    font-family: Helvetica, Arial, Sans-Serif;
    height:100%;
    margin:0px;
    padding:0px;
    
    background-color:#afafaf;
    width:100%;width: 98%;
    position: absolute;
    left: 1%;
}

#xp-header{
    color:white;
    height:80px;
    background-color:black;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;;
}
.breadcrumb {
    
    list-style: none; 
    overflow: hidden; 
    font: 14px Helvetica, Arial, Sans-Serif;
    position: relative; top: 8px;left:20px;
}
.breadcrumb li, .breadcrumb li a { 
    float: left; 
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.breadcrumb > li a {
    color: white;
    text-decoration: none; 
    padding: 2px 0 2px 55px;
    background: hsla(205,85%,35%,1);                   /* fallback color */
    background: hsla(205,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}
.breadcrumb li a:after { 
    content: "   "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(205,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}       
.breadcrumb li a:before { 
    content: "   "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
}       
.breadcrumb li:first-child a {
    padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(205,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(205,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:       ...

JavaScript

/**
 * @author Enjoy Right
 */
var t = (new Date).getTime();
var r = 0,
    last = 0,
    lastComputed = '',
    lastXpath = '',
    v;

function xpath2css(s) {
    return "*[title='" + s + "']"
}

function loadJS(src, context) {
    var js = window.document.createElement('script');
    js.src = src;
    js.type = 'text/javascript';
    js.onload = function(e) {
        console.log("file loaded:" + e.target.src);
        context;
    };
    document.getElementsByTagName('head')[0].appendChild(js);
};
loadJS("http://code.jquery.com/jquery.min.js", function() {
    jQuery.noConflict()
});

loadJS("http://www.prototypejs.org/javascripts/prototype.js");
loadJS("http://svn.coderepos.org/share/lang/javascript/javascript-xpath/bindings/prototype/release/xpath4prototype-latest.js");
var v = $$('*').each(function(v, i) {
    var s = '';
    r += 1;
    v.ancestors().each(function(v2, i2) {
        var ind = 1;
        v2.previousSiblings().each(function(v3, i3) {
            if (v3.nodeName == v2.nodeName) ind++
        });
        s = v2.nodeName + '[' + ind + ']' + '/' + s;
    });
    var ind = 1;
    v.previousSiblings().each(function(v4, i4) {
        if (v4.nodeName == v.nodeName) ind++
    });
    s = s + v.nodeName + '[' + ind + ']';
    //========================
    v.writeAttribute('title', "id : '" + v.id + "'\r\n" + "class : '" + v.className + "'\r\n" + s);
    v.onmouseover = function(e) {
        if (lastXpath != e.target.title) {
            if (last && last.style) {
                last.style.cssText = (lastComputed);
            }
            lastComputed = e.target.style.cssText;
            e.target.style.background = '#3333EE';
            e.target.style.border = 'thinsolid#FFFF00';
            e.target.style.border = '2px';
            last = e.target;
        }
    };
    v.onmouseup = function(e) {
        console.log((xpath2css(e.target.title)));
        console.log(jQuery("'*[" + e.target.title + "]'").css("background-color"));
       ...