Home Image EffectsCovering-Bad A simple jQuery Plugin for cover an item by another item with dragging ability

Covering-Bad A simple jQuery Plugin for cover an item by another item with dragging ability

4 years ago Views

45925

7443

seyedi

Covering-Bad A simple jQuery Plugin for cover an item by another item with dragging ability

Usage

Include:

<link href="css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="js/coveringBad.js" ></script>

Html:

<div class="covered">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

js:

$(function() {
    $('.covered').coveringBad();
});

Options:

>js

    marginY : 20,   // Handle's distance from top and bottom
    marginX : 20,   // Handle's distance from left and right
    setX    : 30,   // Defulat location for handle from left
    setY    : 150,  // Defulat location for handle from top
    direction : "horizontal" // would be horizontal/vertical

Multiplication :

<div class="covered first">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered second">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered third">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

$(function() {
    $('.first').coveringBad();
    $('.second').coveringBad();
    $('.third').coveringBad({
        marginY : 20 ,
        marginX : 400 ,
        setX  : 400,
        setY  : 235 ,
        direction   : "vertical"
    });
});