1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Dragable DIV in JQuery

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, Apr 28, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    A couple days ago I posted a photogallery web layout for you guys, and that web layout you can click and drag the polaroid pics. Well today we're gonna create a very simple, and basic polaroid pic, in CSS, and be able to click, and drag it in JQuery.

    You're gonna need to get JQuery, JQuery UI, this image of a puppy (for our polaroid effect), and this wood image for our background.

    So first off make a folder on your desktop called "Dragable DIV" and in that folder make two folders called "images", and "js" in the js folder you want the JQuery, and JQuery UI files inside there, and in the images folder is where you want the image(s) for your polaroid effect(s).

    Now while inside the Dragable DIV folder make two files one called index.html and another called style.css.

    Now in your index.html file we wanna add the following code to startout with.
    Code:
    <html>
    <head>
    <title>Dragable DIV</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    		$( "div.polaroid1" ).draggable();
    	});
    </script>
    </head>
    <body>
    	<div class="polaroid1">
    		<img src="images/puppy.jpg">
    	</div>
    </body>
    </html>
    All this code does is gives our website the title "Dragable DIV", implement the style sheet (in which we haven't put the codes in for that yet) JQuery, and JQuery UI. It also states that a div that has the class "polaroid1" that div will be draggable (because of JQuery UI), and we add our image into the div we gave the class "polaroid1".

    Now we'll add our background image into our style sheet as well as state that every image that's embedded will have 100% width (because height isn't added it'll maintain the aspect ratio) the image won't have a border (cause when images are hyperlinked they'll automatically get a border, and we fixed that in the CSS)
    Code:
    body {
    	background:url('images/wooddarkbg.jpg');}
    	
    img {
    	width:100%;
    	border:0px;}
    Now we're going to embed a div with the class polaroid1 (so anything we add to this class will only apply to the div that has the class polaroid1) All we did was adjust it's position, make sure the image is 400px in width making the div 400px in width (cause remember every image embedded will have a width of 100%) we also gave it a 16px white border for the polaroid effect, a drop shadow, and when the div is clicked the drop shadow expands using the active element.

    Code:
    div.polaroid1 {
    	position:absolute;
    	top:50%;
    	left:50%;
    	width:400px;
    	margin-top:-170px;
    	margin-left:-200px;
    	background:#FFF;
    	border:16px solid #FFF;
    	box-shadow:2px 2px 8px #000;
    	-webkit-box-shadow:2px 2px 8px #000;
    	-moz-box-shadow:2px 2px 8px #000;
    	-o-box-shadow:2px 2px 8px #000;}
    	
    div.polaroid1:active {
    	box-shadow:4px 4px 16px #000;
    	-webkit-box-shadow:4px 4px 16px #000;
    	-moz-box-shadow:4px 4px 16px #000;
    	-o-box-shadow:4px 4px 16px #000;}
    Now save our css code in style.css of course, and load your website, and BINGO you now have a draggable div.

    Feel free to download the project file below, to test it out, experiment with the code, etc:
     

    Attached Files:

Share This Page