當調整大小時Div跳出窗口

每當我調整瀏覽器大小時，div移出窗口。我使用jQuery滾動插件來瀏覽div。但是，當我調整#home div它的工作正常，但是當我調整其他divs，它離開了窗口。當調整大小時Div跳出窗口

請幫幫我，這裏是link的網站。

這裏是我使用的代碼，

$(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); 
    } 
}); 
}); 
});

來源

2013-05-10 Venkat Selvan

爲此，您需要響應式設計，並且需要給予寬度，如同在「％」中一樣 – Gautam3164 2013-05-10 05:25:26

我使用％作爲寬度 – 2013-05-10 05:28:38

但是在您的腳本中，您正在使用left：..像那樣......它的創建問題。因此，第一件事情最好是給予他們迴應或第二件事情取代它與響應一 – Gautam3164 2013-05-10 05:30:50

爲此，您需要響應的設計以及您需要給寬度爲「％」無處不在，但在你的腳本中使用的是左：.. PX這樣的....它創建problem.So第一件事更好地響應給他們或第二件事與響應的替換它..

試試這個LINK

來源

2013-05-10 05:36:59 Gautam3164

嘗試編輯下面幾行：

$("#welcome").animate({left: "-1000px"},"easeInOutBounce"); 
$(".about_w").animate({left: "100px"},"easeInOutBounce"); 
$(".about_w").delay(4000).animate({left: "-800px"}); 
$("#welcome").delay(4500).animate({left: "100px"});

和：

height:"400px",

早期的反應是正確的。當涉及到響應式網頁設計時，請在設置尺寸時使用em或％。您可以使用100％而不是40 em。您可以更改這些值直到獲得所需的輸出。

來源

2013-05-10 07:42:58 kireirina

當調整大小時Div跳出窗口

回答

相關問題