My issue is that whenever I resize the browser, the div moves out of the window. I am using the jQuery scroll to plugin for navigating through divs. Oddly enough, when I resize the #home div, everything seems to work fine. However, when I resize other divs, they end up moving out of the window.
Could someone please help me out with this problem? You can access the website through this link.
Below is the code that I have used:
$(document).ready(function()
{
$("#bg-home").backstretch("images/Bg-home3.jpg");
var images = ['1.jpg', '2.jpg','3.jpg'];
$("#container").backstretch('images/' + images[Math.floor(Math.random() * images.length)]);
$( "#draggable" ).draggable({
drag: function() {
$(".scrolldown span").css("color","lightgreen").html("Drop");
},
stop: function() {
$(".scrolldown span").css("color","white").html("Drag");
},axis: "x",containment:"#menu",scroll: false//,grid: [ 159,0 ]
});
$(".content,.content1").droppable({drop: function() {
var $url = $(this);
document.title = $url.attr('alt');
$('html, body').scrollTo($url.attr('id'),500,"easeInOutExpo");
//event.preventDefault();
}});
$("#welcome").effect("slide",3000);
$("#welcome").click(function()
{
$("#welcome").animate({left: "-1000px"},"easeInOutBounce");
$(".about_w").animate({left: "100px"},"easeInOutBounce");
$(".about_w").delay(4000).animate({left: "-800px"});
$("#welcome").delay(4500).animate({left: "100px"});
});
$('#menu a').bind('click',function(event){
var $url = $(this);
document.title = $url.attr('alt');
$('html, body').scrollTo($url.attr('href'),500,"easeInOutExpo");
event.preventDefault();
});
$("#about .text p").vertiscroll({ width:6, color:'#f07','cover': 200,'areacursor': 'pointer' });
$('.side_container').slimScroll({
height:"88%",
color: '#fff',
start: $('.side_container'),
alwaysVisible: false
});
$('#container_wrap_metro').slimScroll({
height:"400px",
color: '#fff',
railVisible: false,
alwaysVisible: false
});
$(".menu nav").click(function(){
$url = $(this);
$(".text p").load($url.attr('id'));
});
function loading_show()
{
$('#loading').html("<p style='color:white;'>Loading</p><br><img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut();
}
//Status
function loadData(page)
{
loading_show();
$("#container_wrap_metro").html("");
$.ajax({
url: "load_data.php",
type: "post",
data: "page="+page,
success: function(data){
loading_hide();
$("#container_wrap_metro").html(data);
},
error:function(){
alert("failure");
$("#container_wrap_metro").html('Unable to process request!');
}
});
}
function loads(page)
{
$.ajax({
url: "load_10.php",
type: "post",
data: "page="+page,
success: function(data){
$(".side_container").html(data);
},
error:function(){
alert("failure");
$(".side_container").html('Unable to process request!');
}
});
}
loads(1);
//Search
$("#result").keyup(function(){
$(".side_container").html('<center><i>Fetching...</i></center>')
var q = $(this).val();
$.get("results.php?q="+q, function(data){
if(q){
$(".side_container").html(data);
}
else {
loads(1);
}
});
});
});