jqedit border

Blocks with inside border when selected. Also tree of blocks cross linked.

by Ben Clayton

HTML

<div class="toolbar">
    <div class="obj" name="p-0">p-0</div>
    <div class="obj" name="p-1">p-1</div>
    <div class="obj in" name="p-1-0">p-1-0</div>
    <div class="obj in" name="p-1-1">p-1-1</div>
</div>
<div class="screen">
<div class='col' name="p-0">
    <div class='bore'></div>
    LEFT
</div><div class='col'  name="p-1">
    <div class='bore'></div>
<div class='col' name="p-1-0">
    <div class='bore'></div>
    MIDDLE</div><div class='col' name="p-1-1">
    <div class='bore'></div>
RIGHT</div></div>
</div>

CSS

.screen {width:400px;}
.toolbar {float:right;width:180px;height:500px;background-color:#F0F0F0;border-radius:10px;}
.col {
    width:50%;
    display:inline-block;
    height:100px;
    position:relative;
}
.col .col {height:80px;}
.bore {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    
    opacity:0.5;
    margin:2px;
    display:block;
}
.col.selected>.bore {border:5px blue solid;}
.col .col.selected>.bore {border:5px blue solid;}
.col.hover>.bore {border:1px blue solid;}
.col .col.hover>.bore {border:1px blue solid;}


.obj {width:30px;height:15px;background-color:yellow;margin:5px;border:1px black solid;font-size:10px;padding-left:5px;}
.obj.in {margin-left:20px;}

JavaScript

$('.obj,.col').on('mouseover',function(){
    var nm=$(this).attr('name');
    $('.col,.obj').removeClass('hover');
    var s=$('[name="'+nm+'"]').hasClass('selected');
    if(!s)$('[name="'+nm+'"]').addClass('hover')
});
$('.obj,.col').on('mouseout',function(){
    var nm=$(this).attr('name');
    $('.col').removeClass('hover');    
});
$('.obj,.col').on('click',function(){
    var nm=$(this).attr('name');
    var s=$('[name="'+nm+'"]').hasClass('selected');
    $('.col,.obj').removeClass('selected hover');
    if(!s)$('[name="'+nm+'"]').addClass('selected')
});