seyedi/covering-bad

A simple jQuery Plugin for covering an item with another item by dragging it

#####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

covering-bad's Issues

Set images in HTML

Hello.
First of all I want to say that this plugin is great. Why? Not because it is unique, but because it is lightweight. I never use jquery plugins that have a lot of options and a crazy source code, I like it to be simple and to do only what it need to do. That plugin is exactly so.

Second. I don't like only one thing. We can't set the images directly in HTML, this is a big no, because if I will implement it in a CMS, the images will be generated dinamically and will be hard to create css for each post.
I think you understand me and here's how(in my oppinion) it will be the best solution:

<div class="covered" data-passive="image.jpg" data-active="image2.jpg">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

What do you think? ;)

Responsive Breakpoints

Hi there,

Thank you for the great example however I am having hard time to make this responsive.
Here is a link you can check http://020018.businesscatalyst.com/index.html

Try to resize the browser and drag the handle.

Can you please help me with this?
Thanks a lot

Responsive containers?

Is there a way to have responsive images and positions? Like:

marginX: '50%',
marginY: '50%'

Would be great!

Mobile Compactability

The slider not working on mobile devices.
please can you give a fast solution i want to use for my site

Thank you