infinite scroll help

Wed Sep 08, 2010 9:59 pm

Hello,

I was wondering how would I add an infinite scroll effect onto my blog? (if it is even something I need)
My problem is, whenever I add a new header with content on the left side of my site, the room runs out and the new content appears in the middle of my page! How can I fix this?

Here is the messed up blog as an example: http://harmony-dreams.blogspot.com
As you can see, my music player is right on my title because I added a link exchange section with content on the left side...

Here is my template:

<html>
<head>
<link rel="shortcut icon" href="http://i256.photobucket.com/albums/hh176/x3QINGG--/wmxplanhua.gif">

<title>T w i l i g h t ★</title>

<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('welcome').innerHTML=document.getElementById(id).innerHTML}
</script>

<style type="text/css">
::-moz-selection{
background: #f98da2;
color: #ffffff;
}

a:link, a:visited, a:active {
color: #67a1f9;
cursor: default;
text-decoration:none;
}
a:hover {
color: #c988c0;
cursor: help;
border-top: 1px dashed #c1acff;
border-bottom: 1px dashed #c1acff;
}
.nav {
font-size: 11px;
text-align: center;
background-color:#E8F4F8;
color: #777;
display: block;
width: 220px;
border-bottom:1px solid #fff;
padding: 3px;
}
.nav:hover{
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color:#6ccffe;
display: block;
width: 220px;
border-bottom:1px solid #fff;
padding: 3px;
}
body{
background:#ceefff url(http://i256.photobucket.com/albums/hh176/x3QINGG--/twilight-bg-1.jpg);
font-family:verdana, tahoma, sans-serif;
font-size:11px;
color: #888888;
letter-spacing: 0px;
line-height: 14px;
text-align: left;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #fce9ee;
scrollbar-arrow-color: #fce9ee;
}
input, textarea {
background: #ffffff;
font-family: arial;
font-size: 8pt;
color: #6c6461;
border-style: solid;
border-color:#999999;
border-width: 1px;
}
.h4{
font-family:century gothic;
font-size: 17pt;
line-height: 19px;
font-color: #ffffff;
letter-spacing: 1px;
font-weight:none;
background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/nincompoop-title-bg.jpg);
padding: 3px;
border: 0px solid #DACBB1;
text-align:left;
text-transform: none;
}
.h4{
font-family:segoe UI;
font-size: 15px;
line-height: 19px;
color: skyblue;
letter-spacing: 1px;
font-weight:none;
padding: 3px;
border: 0px solid #DACBB1;
text-align:left;
text-transform: none;
}
blockquote {
background:url(http://i256.photobucket.com/albums/hh176/x3QINGG--/nincompoop-title.jpg);
color: #777;
border: 1px dashed #000000;
}
b {
color: #c1acff;
text-decoration: bold;
}
u {
color: #888888;
border-bottom: 1px solid #ba7eb2;
}
i {
color: #9966ff;
}
strong {
text-decoration: bold; background: #ffcd89; color: #888888; }
#navbar-iframe {
display: none;
}
#entry {
text-align: justify;
}
a.navi, a.navi:active, a.navi:link, a.navi:visited {
display:block;
font-family: verdana;
font-size: 8pt;
font-weight: normal;
text-decoration:none;

color: #999999;
text-transform: none;
text-align: left;
padding:1px;
letter-spacing:0px;
border-top: solid 0px #FFffff;
border-bottom: dashed 1px #ba7eb2;
border-left: solid 0px #FFffff;
border-right: solid 1px #ba7eb2;

}

a.navi:hover {
display:block;
background: #ffcd89;
font-family: verdana;
font-size: 8pt;
font-weight: normal;
text-decoration:none;
color: #ffffff;
text-transform: uppercase;
text-align: right;
padding:2px;
letter-spacing:3px;
border-top: solid 0px #FFffff;
border-bottom: dashed 1px #ba7eb2;
border-right: solid 1px #ba7eb2;
border-left: solid 1px #ba7eb2;
}
.peekture{
font-size:10px;
text-align:center;
padding: 5px;
border: 1px solid #eaeaea;
background-color: #7777777;
color: #888;
}

</style>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;">
<img src="http://i256.photobucket.com/albums/hh176/x3QINGG--/nincompoop-twilight.jpg">
</div>

<div style="position:absolute; overflow-x:hidden; overflow-y:hidden; padding:2px;; left:537px; top:137px; width:374px; background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/cyworld/Backgrounds/431107_p-1.png);">
<marquee>Wello! :B
You've stepped into an <u>Idiot</u>'s paradise.
Remember to tag and visit Qing's blog @ <a href="http://little-nincompoop.blogspot.com">little-nincompoop</a>! <i>-chuu-</i> <font color="red">♥</font></marquee>
</div>

<div style="position:absolute; overflow-x:hidden; overflow-y:hidden; padding:2px; left:70px; top:86px; width:225px; background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/cyworld/Backgrounds/391120_p.png);">
<div class="h4"><font color="#ffffff">Disclaimer</font></div>
<img src="http://i547.photobucket.com/albums/hh455/cynna_pictures/manekineko3.gif" align="left">
Welcome to my blog. Before anything else please follow these rules : No ripping, spamming, and any type of childish acts.
Respect is a must. Best-viewed with screen resolutions 1024x768. Enjoy your stay and have fun!<br>
<center>put your site stats here<br><b>bold</b>,<i>italic</i>,<u>underlined</u>,<strong>strong</strong></center>
</div>

<div style="position:absolute; overflow-x:hidden; overflow-y:hidden; padding:2px;; left:70px; top:333px; width:225px; background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/cyworld/Backgrounds/391120_p.png);">
<div class="h4"><font color="#ffffff">Navigations</font></div><br>
<span class="nav" style="cursor: pointer;" onMouseover="showtext('')" onMouseout="hidetext();" onClick="changeNavigation('blog')">Home</span>
<span class="nav" style="cursor: pointer;" onMouseover="showtext('')" onMouseout="hidetext();" onClick="changeNavigation('about')">About</span>
<span class="nav" style="cursor: pointer;"onMouseover="showtext('')" onMouseout="hidetext();"onClick="changeNavigation('joined')">Joined</span>
<span class="nav" style="cursor: pointer;" onMouseover="showtext('')" onMouseout="hidetext();" onClick="changeNavigation('profile')">Profile</span>
<span class="nav" style="cursor: pointer;" onMouseover="showtext('')" onMouseout="hidetext();" onClick="changeNavigation('links')">Links</span>
<span class="nav" style="cursor: pointer;" onMouseover="showtext('')" onMouseout="hidetext();" onClick="changeNavigation('credits')">Credits</span>
</div>

<div style="position:absolute; overflow-x:hidden; overflow-y:hidden; padding:2px;; left:70px; top:587px; width:225px; background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/cyworld/Backgrounds/391120_p.png);">

<div class="h4"><font color="#ffffff">Webmistress</font></div>
<img src="http://i256.photobucket.com/albums/hh176/x3QINGG--/peek-thumbnail.jpg" align="left" class="peekture">
Name's <b>QING</b> for short. Colours <font color="#c1acff">lavender</font>, <font color="#67a1f9">blue</font>, <font color="#8deea1">greenish-green</font>
are my faves. Wants to try some <u>social work</u>. <i>And,</i> i idolise <b>Ashin 阿信</b> and <b>Mayday</b>. <u>Stay Real</u> rawks.<br><br>

<div class="h4"><font color="#ffffff">Blabberings</font></div>
Shout mix or cbox? abything just decide for yourself. width="210px" for sure

<br>

<div class="h4"><font color="#ffffff">Daily Reads</font></div>
<a href="http://little-nincompoop.blogspot.com">QING</a>
<br>

<div class="h4"><font color="#ffffff">Moosic</font></div>
<center>Music Here! (I recommend mixpod.com)</center><br></div>
</div>

<div id="welcome" style="position:absolute; overflow-x:hidden; overflow-y:auto;padding:7px;left:395px; top:241px; width:520px; background: url(http://i256.photobucket.com/albums/hh176/x3QINGG--/cyworld/Backgrounds/391120_p.png);">
<Blogger>
<div class="h4"><img src="http://i387.photobucket.com/albums/oo320/myhideout_photos/tenki8.gif"align="left"><font color="#ffffff"><$BlogItemTitle$></BlogItemTitle$></font></div>
<div align="right"><small>Written at <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <a href="javascript:scroll(0,0)">back to top</a></small></div> <br>
<div id="entry">
<$BlogItemBody$>
</div>
</blogger>
</DIV>

<div id="profile" style="display:none">
<div class="h4"><img src="http://i387.photobucket.com/albums/oo320/myhideout_photos/tenki8.gif"align="left"><font color="#ffffff">Webmistress</font></div><br>
<center><big>your lovely profile goes here</big></center>
maybe like this:<br>
Hi. my name is _____ and i'm currently residing in _______. I'm about _____ years old and i love to <u>blog</u>.<br>
there's still more about me.. it's for you to <b>find out</b> and for me to <b>know</b>
</div>
<div id="blog" style="display:none">
<Blogger>
<div class="h4"><img src="http://i387.photobucket.com/albums/oo320/myhideout_photos/tenki8.gif"align="left"><font color="#ffffff"><$BlogItemTitle$></BlogItemTitle$></font></div>
<div align="right"><small>Written at <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <a href="javascript:scroll(0,0)">back to top</a></small></div> <br>
<div id="entry">
<$BlogItemBody$>
</div>
<br>
</blogger>
</div>
</Blogger>
</div>

<div id="about" style="display:none">
<div class="h4">about my site</div><br>
yada yada. your site history here?<br><br>

<div class="h4">link me?</div><br>
<center><img src="http://i256.photobucket.com/albums/hh176/x3QINGG--/button.jpg">
<textarea>
<a href="http://little-nincompoop.blogspot.com"><img src="http://i256.photobucket.com/albums/hh176/x3QINGG--/button.jpg"></a>

Sun Sep 12, 2010 2:57 am

I don't see any problem with your template, and doesn't have such a ting called "infinite scroll" the scroll will be created according to the size of the page, that process is automatic, so it will work on any page size.