Value Chain Item Element

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27"></script>
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-viewer.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<h3 style="width: 100%;">Base Item Element</h3>

<div style="width: 200px;">
    <div class="vc-flex vc-flex-right vc-element vc-color-base-border">
        <div class="vc-element-title">Item Title</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons vc-icon-options"></div>
        </div>
    </div>
</div>

<h3 style="width: 100%;">Base Item Element with Spanning Bar</h3>

<p>Move your mouse over the right and left hand sides of the element.</p>
<div style="width: 200px;">
    <div class="vc-flex vc-flex-right vc-element vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div class="vc-element-title">Item Title</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons vc-icon-options"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
</div>

<h3 style="width: 100%;">Event Element</h3>

<div style="width: 200px;">
    <div class="vc-flex vc-flex-right vc-element vc-element-event vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div class="vc-element-title">Item Title</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons-18 vc-icon-options-18"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
</div>

<h3 style="width: 100%;">Area Element</h3>

<div style="width: 200px;">
    <div class="vc-flex vc-flex-right vc-element vc-element-area vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div...

JavaScript

$('.vc-ItemTitle').hover(function (e) {
    $(this).addClass('vc-action-text-glow');
}, function (e) {
    $(this).removeClass('vc-action-text-glow');
});
$('.vc-item-span-clear').hover(function (e) {
    showSpanOption(e);
}, function (e) {

});
// Add span event capture.
function showSpanOption(e) {
    var item = $(e.target);
    $(item).hover(function (e) {
        $(this).addClass('vc-item-span');
    }, function (e) {
        $(this).removeClass('vc-item-span');
    });
}