I have a dilemma where I am appending code from one document to another. After the code is appended, I attempt to set the position of the newly added item using jQuery drag and drop functionality. The positions are stored in an array and then saved in a cookie. Upon refreshing the page, I retrieve the cookie data and try to set the position based on that.
So far, everything seems to be functioning smoothly except for the final part. When I refresh the page, the element does not revert back to its saved position.
Here's the JavaScript snippet:
$(document).ready(function() {
checkApps();
checkpositions();
});
function checkpositions() {
if ($.cookie('PosApps')){
var Poscookie = $.cookie('PosApps');
var Pos = JSON.parse(Poscookie);
$("#TimenDate").css({top:Pos[0].top, left:Pos[0].left});
$("#User").css({top:Pos[1].top, left:Pos[1].left});
$("#Weather").css({top:Pos[2].top, left:Pos[2].left});
$("#facebooka1thd").css({top:Pos[3].top, left:Pos[3].left});
};
};
// More functions here...
The content of 'facebooka1thd' document:
<style>
.facebooka1thd {background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;}
.AppHeadfacebooka1thd img {
height:24px;
width:24px;
padding:0;
margin:1px 0 1px 0;
float:left;
}
.AppHeadfacebooka1thd h1 {
height:26px;
padding:2px 0 2px 0;
margin:0;
font:bold 15px/22px 'Arial Narrow',Arial,Sans-Serif;
float:left;
}
</style>
<!-- Content of facebooka1thd -->
The main document it gets appended to:
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Include necessary scripts and stylesheets -->
</head>
<body id="FullScreen">
<section id="AppBox">
<div class="AppList"></div>
</section>
I'm scratching my head as to why it's not working...