<!DOCTYPE html>
<html>
<head>
<title>Facebook Like Drag Background Cover Changer using Jquery</title>
<link href='timeline.css' rel='stylesheet' type='text/css'/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
$(document).ready(function()
{
$('body').on('change','#bgphotoimg', function()
{
$("#bgimageform").ajaxForm({target: '#timelineBackground',
beforeSubmit:function(){},
success:function(){
$("#timelineShade").hide();
$("#bgimageform").hide();
},
error:function(){
} }).submit();
});
$("body").on('mouseover','.headerimage',function ()
{
var y1 = $('#timelineBackground').height();
var y2 = $('.headerimage').height();
$(this).draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui)
{
}
});
});
$("body").on('click','.bgSave',function ()
{
var id = $(this).attr("id");
var p = $("#timelineBGload").attr("style");
var Y =p.split("top:");
var Z=Y[1].split(";");
var dataString ='position='+Z[0];
$.ajax({
type: "POST",
url: "image_saveBG_ajax.php",
data: dataString,
cache: false,
beforeSend: function(){ },
success: function(html)
{
if(html)
{
$(".bgImage").fadeOut('slow');
$(".bgSave").fadeOut('slow');
$("#timelineShade").fadeIn("slow");
$("#timelineBGload").removeClass("headerimage");
$("#timelineBGload").css({'margin-top':html});
return false;
}
}
});
return false;
});
});
</script>
</head>
<body>
<ul>
<li style="margin-left: 165px;"><a href="#home">Facebook</a></li>
<li style="margin-left: 743px;"><a href="#profile"><img src="#">Sourcodester</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#logout">Logout</a></li>
</ul>
<div id="container">
<div id="timelineContainer">
<div id="timelineBackground">
<img src="<?php echo $path.$profile_background; ?>" class="bgImage" style="margin-top: <?php echo $profile_background_position; ?>;">
</div>
<div style="background:url(images/timeline_shade.png);" id="timelineShade">
<form id="bgimageform" method="post" enctype="multipart/form-data" action="image_upload_ajax.php">
<div class="updateInfo timelineInfo">
<input type="button" class="updateInfo" value="Update Info" alt="Update Info">
</div>
<div class="uploadFile timelineUploadBG">
<input type="file" name="photoimg" id="bgphotoimg" class=" custom-file-input" original-title="Change Cover Picture">
</div>
</form>
</div>
<div id="timelineProfilePic"><img src="images/profilepic1.jpg" style="width: 170px;height: 170px;"></div>
<div id="timelineTitle"><?php echo $name; ?></div>
<div id="timelineNav">
<div class="buttonside">
<input type="button" class="button" value="Timeline">
<input type="button" class="button button2" value="About">
<input type="button" class="button button3" value="Friends">
<input type="button" class="button button4" value="Photos">
<input type="button" class="button button5" value="More">
</div>
</div>
</div>
</div>
</body>
</html>