• Stars
    star
    114
  • Rank 308,031 (Top 7 %)
  • Language
    JavaScript
  • Created about 11 years ago
  • Updated almost 11 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

pricing-table

πŸ’° one hell of a pricing-table with CSS Grid and Flexbox
HTML
9
star
2

Front-Endless-Love

🎡 🎁 a musical gift for the people who you love the most
JavaScript
8
star
3

grids

Simple Responsive Grid System
CSS
6
star
4

my-people

A demo on Moein's song called Mardom using Canvas and CSS
CSS
5
star
5

sharing-component

A simple modal for sharing stuff on social networks. It can be used in wordpress as well
CSS
5
star
6

svg-icons

5
star
7

off-canvas-menu-effect

Simple idea for enhancing off-canvas menu transitions
CSS
4
star
8

favorite-button

A Fun way to make something favorite
CSS
4
star
9

css-filters

A CSS filter effects playground and generator.
HTML
4
star
10

navicon-transform

Some icon transformations to get inspired
CSS
4
star
11

seyedii.github.io

3
star
12

circular-menu

Circular menu with cool transition effect for mobile menu or share menu or the other way around
CSS
3
star
13

text-shadow-maker

CSS 3D Text Shadow Generator
HTML
3
star
14

animate.scss

flat and up-to-date Sass port of animate.css
CSS
2
star
15

blog

HTML
2
star
16

Em-vs-Rem

A demonstration for learning Em and Rem CSS units.
JavaScript
2
star
17

addition-subtraction-in-purchasing

Demo: http://demo.css-tricks.ir/addition-subtraction-in-purchasing
CSS
1
star
18

SlideShow

Different forms of slideshow
JavaScript
1
star
19

css-playground

1
star
20

QTea

JavaScript
1
star
21

Furniture-store

JavaScript
1
star
22

flexbox-playground

HTML
1
star
23

Seyedi.pro

My personal webpage
JavaScript
1
star
24

Tour-of-Persia

JavaScript
1
star
25

My-Garage

place for my homeworks
JavaScript
1
star
26

seyedi.github.com

My personal webpage on github
CSS
1
star
27

Travel-Agent

JavaScript
1
star
28

seyedi.github.io

HTML
1
star
29

view-transition-demo

HTML
1
star
30

notion-counter

Notion counts words including codes. This counter excludes codes and also gives you character counts too.
JavaScript
1
star