6
Tôi đang sử dụng tập lệnh động để tải nội dung qua Ajax vào trang của tôi. Mọi thứ hoạt động tốt ngoài 1 vấn đề. Tôi có một trang với các div được xếp chồng lên nhau bên dưới mỗi khác Vì vậy, ví dụ: header-banner-nav-content-likebox-twitterwidget-footer.Số trang động flash nhanh chóng sau khi tải nội dung mới
Nếu tôi thay đổi trang, vì vậy nếu tôi đi từ nhà đến liên hệ chẳng hạn, sau đó tôi thấy hộp thích của tôi và twitterwidget sẽ lên đầu trang (bên dưới nav) trong ít hơn một giây. Sau đó tất cả mọi thứ tải một cách chính xác, nhưng nó gây phiền nhiễu để xem các hộp đèn flash trên đầu trang trước khi hiển thị các trang liên lạc. Làm cách nào để tôi có thể sửa đổi tập lệnh dynamicpage.js, vì vậy nó sẽ không di chuyển nhanh các div bên dưới nội dung từ trên xuống?
đây là kịch bản của tôi:
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page=wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
String.prototype.toTitleCase = function(n) {
var s = this;
if (1 !== n) s = s.toLowerCase();
return s.replace(/\b[a-z]/g,function(f){return f.toUpperCase()});
}
newHash = window.location.hash.substring(1);
function changeTitle(title) {
document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
changeTitle("");
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
đây là css của tôi:
.header-wrapper {
display:block;
clear: none;
max-width:960px;
margin:auto;
}
header {
position:relative;
display: block;
width: 100%;
max-width:960px;
min-height: 110px;
background: url('../img/header-d.gif') no-repeat;
margin:0 auto;
margin-top:15px;
}
.like-button {
position:absolute;
right: 36%;
bottom:0;
}
.like-button-twitter {
position:absolute;
right:22%;
bottom:2px;
}
#email {
width: 180px;
background: #FFFFFF;
border: 1px solid #BBBBBB;
position:absolute;
right:2px;
bottom:5px;
margin: 0 5px 0 0;
padding: 4px;
font-size: 10px;
}
.go {
position: absolute;
right:8px;
bottom:10px;
border:none;
color: #455868;
font-weight:bold;
}
#icons {
background: url('../img/icons.png') no-repeat;
position: absolute;
list-style:none;
width:210px;
height:35px;
right:0;
}
#icons li {
position:absolute;
list-style:none;
}
li icon1 {
position:absolute;
right:100px;
width:35px;
}
nav {
min-height: 40px;
width: 100%;
background: #374652 ; /*#455868 */
font-size: 10pt;
font-family: sans-serif;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 400px;
height: 20px;
}
nav li {
display: inline;
float: left;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
color:#ffffff;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
color:#ffffff;
}
nav a:visited
{ color:#ffffff; }
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #2d3a44;
}
nav a#pull {
display: none;
}
#banner {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display:block;
}
.wrapper {
width: 100%;
max-width: 960px;
margin: auto;
}
article {
clear: both;
float: left;
margin-left: 0;
margin-top:30px;
width: 62%;
display: block;
}
#youtube-music .container {height:450px;}
section {
padding-left:8px;
}
aside {
clear: none;
float: right;
margin-left: 3%;
padding-right:1%;
margin-top:30px;
width: 33.2033%;
display: block;
}
#like-box {
clear: none;
float: left;
width: 100%;
display: block;
overflow:hidden;
border:1px solid #2c2c2c;
}
.fb-like-box {
width: 100% !important;
border:none;
overflow:hidden;
}
#youtube-box {
clear: none;
float: left;
width: 100%;
margin-top:10px;
display: block;
border:1px solid #2c2c2c;
}
#twitter-box {
clear: none;
float: left;
width: 100%;
margin-top:10px;
display: block;
overflow:hidden;
border:1px solid #2c2c2c;
}
#twitter {
width:100%;
}
#twitter_m {
width: 100%;
padding: 0 13px;
}
#twitter_container {
min-height:45px;
height:auto !important;
}
#twitter_update_list {
width: 100%;
padding: 0;
overflow: hidden;
font-size: 14px;
color: #374652;
line-height: 16px;
margin-left:-13px;
}
#twitter_update_list li {
width: 90%;
padding:10px;
border-bottom: solid 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
footer { margin-top: 15px; display:block; background:#374652; color: #d5d5d5;}
#footer-container {position: relative; height: 250px; max-width:960px; margin:auto;}
footer ul { padding-top: 5px; padding-left:15px;}
footer ul li{float:left; position: relative; padding-right:15px; display:inline;}
footer ul li a{color: #d5d5d5;}
footer ul li a:hover{color: #777;}
#footer-container p { position: absolute; bottom:30px;}
#youtube-music {
clear: none;
float: left;
width: 100%;
display: block;
}
Dường như đây là một số vấn đề với vị trí css bạn có hoặc tập lệnh đang được tiêm, điều này sẽ cần bản demo hoạt động để kiểm tra hoặc siêu anh hùng sửa lỗi – sabithpocker