Skip to content
A simple jQuery Plugin for covering an item with another item by dragging it
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js set background-image by data attributes Dec 21, 2013
README.md Update README.md Jan 11, 2014
coveringBad.jquery.json
index.html

README.md

Covering Bad

#####A simple jQuery Plugin for cover an item by another item with dragging ability.

####Live View On Codepen

#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


###More than one :

<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"
	});
});

License

MIT http://seyedi.mit-license.org

Bitdeli Badge

You can’t perform that action at this time.