pxlcreations
05-22-2010, 05:07 PM
Hi guys, need some help here. I was getting help on the jQuery forum but the person who was working with me stopped replying, so I'm hoping one of you can help me. Here's what's happening. I have divs on a webpage that you can drag around the page on the iPhone/iPad (this is only meant for those devices). I want the position of the divs to be saved when the page is reloaded, by putting it into a cookie. So far, I am using these plugins..
http://plugins.jquery.com/project/Cookie
http://www.manifestinteractive.com/iphone/touch/
to drag the boxes around and save it to a cookie. Now I just need the code that get's the position and saves it. I got some help with it, and have this script:
$(document).ready(function(){
// does cookie exist?
if ($.cookie('the_cookie1')) {
var coordsOne = $.cookie('the_cookie1').split(',');
$('#theBox').css({top:coordsOne[0],left:coordsOne[1]});
}
if ($.cookie('the_cookie2')) {
var coordsTwo = $.cookie('the_cookie2').split(',');
$('#theBox2').css({top:coordsTwo[0],left:coordsTwo[1]});
}
});
Which gets the position of the boxes, and then saves it to a cookie. Now, I need to figure out how to have the boxes get record their position and set it as a cookie (does that make sense?). I was told to use this script:
$.cookie('the_cookie',$('#theBox').css('top')+','+$('#theBox').css('left'));
And I was supposed to put it on the "drag stop event" of the boxes, but I don't think the boxes have a drag stop event, or at least one I can't find. So, here is my JS code for the draggable boxes, where I think the code above would go...
http://jsbin.com/iraxe/edit
http://jsbin.com/akogu3/edit
Thank you for reading this, and any help is much appreciated.
http://plugins.jquery.com/project/Cookie
http://www.manifestinteractive.com/iphone/touch/
to drag the boxes around and save it to a cookie. Now I just need the code that get's the position and saves it. I got some help with it, and have this script:
$(document).ready(function(){
// does cookie exist?
if ($.cookie('the_cookie1')) {
var coordsOne = $.cookie('the_cookie1').split(',');
$('#theBox').css({top:coordsOne[0],left:coordsOne[1]});
}
if ($.cookie('the_cookie2')) {
var coordsTwo = $.cookie('the_cookie2').split(',');
$('#theBox2').css({top:coordsTwo[0],left:coordsTwo[1]});
}
});
Which gets the position of the boxes, and then saves it to a cookie. Now, I need to figure out how to have the boxes get record their position and set it as a cookie (does that make sense?). I was told to use this script:
$.cookie('the_cookie',$('#theBox').css('top')+','+$('#theBox').css('left'));
And I was supposed to put it on the "drag stop event" of the boxes, but I don't think the boxes have a drag stop event, or at least one I can't find. So, here is my JS code for the draggable boxes, where I think the code above would go...
http://jsbin.com/iraxe/edit
http://jsbin.com/akogu3/edit
Thank you for reading this, and any help is much appreciated.