6
Ich verwende das Dynamicpage-Skript, um Inhalt über Ajax in meine Seite zu laden. Alles funktioniert gut neben 1 Problem. Ich habe eine Seite mit den divs untereinander gestapelt So zum Beispiel: header-banner-nav-content-likebox-twitterwidget-footer.Dynamicpage divs blinkt kurz nach dem Laden neuer Inhalte
Wenn ich die Seite ändere, also wenn ich zum Beispiel von zu Hause gehe, dann sehe ich meine likebox und twitterwidget in weniger als einer Sekunde zum Anfang der Seite (unter dem Nav). Danach lädt alles richtig, aber es nervt, wenn die Kästchen oben blinken, bevor die Kontaktseite angezeigt wird. Wie kann ich das Skript dynamicpage.js so ändern, dass es die divs unterhalb des Inhalts nicht in den Anfangsstapel verschiebt?
das ist mein Skript:
$(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');
});
hier ist mein CSS:
.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;
}
Sieht aus wie das ist ein Problem mit der CSS-Positionierung, die Sie haben oder das Skript injiziert wird, wird dies entweder eine funktionierende Demo zu überprüfen oder einen Superhelden benötigt, um – sabithpocker