[Tut] Draggable DIV in JQuery
3 posts
Page 1 of 1
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
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.
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)
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: Select all
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".<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>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: Select all
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.body {
background:url('images/wooddarkbg.jpg');}
img {
width:100%;
border:0px;}Code: Select all
Now save our css code in style.css of course, and load your website, and BINGO you now have a draggable div.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;}
Last edited by mikethedj4 on Fri Jul 08, 2011 6:54 am, edited 2 times in total.
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
WOW I like this!!! thanks!!!! cooll;
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
No problem!
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023