The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Infinte Scroll Only Works After Refresh, Please Help
swordedge
post Oct 7 2012, 09:15 PM
Post #1





Group: Members
Posts: 3
Joined: 4-October 12
Member No.: 17,898
>>ganggreensmoke.tumblr.com<<

Hello all! I am having a unique issue and I am hoping someone can help. My Tumblr has infinite scroll but it wont load when you first visit the website. When you refresh however it seems to work fine. To test I clear my history and visit it, and every time on the first full load of the page, images stack at the bottom. Refreshing it is the cure, but I have no idea why such a thing would fix it. I don't want my viewers to have to refresh to view, especially if they don't know to.

Please someone analyze my code to see if I have to move a </div> or something.

Thanks..

inb4 "Wait for page to fully load"....don't worry I am

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html lang="en">

<head>

<!-- --------------------------
Theme NTA by villenoire, 2011.
http://villenoire.tumblr.com/
------------------------------>

<title>{Title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}" />

<meta name="color:Blog title" content="#000000"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Links" content="#5C5C5C"/>
<meta name="color:Links Hover" content="#B1B1B1"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Scrollbar" content="#FFFFFF"/>

<meta name="if:One Column" content="0">
<meta name="if:Two Columns" content="0">
<meta name="if:Three Columns" content="1">
<meta name="if:Four Columns" content="1">
<meta name="if:Show Blog Title" content="1"/>
<meta name="if:Show Background Image" content="1">
<meta name="if:Use Banner" content="0">
<meta name="if:Show Home Link" content="1">
<meta name="if:Show Message Link" content="1">
<meta name="if:Show Submit" content="1"/>
<meta name="if:Show Archive Link" content="1">
<meta name="if:Rounded Scrollbar" content="0"/>
<meta name="if:Underline Hover" content="0"/>

<meta name="font:Title" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>

<meta name="image:Background" content="">
<meta name="image:Banner" content="">

<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:link Four Title" content="" />
<meta name="text:link Five" content="" />
<meta name="text:link Five Title" content="" />
<meta name="text:link Six" content="" />
<meta name="text:link Six Title" content="" />
<meta name="text:link Seven" content="" />
<meta name="text:link Seven Title" content="" />
<meta name="text:link Eight" content="" />
<meta name="text:link Eight Title" content="" />

<meta name="text:Title font size" content="22"/>
<meta name="text:Post title font size" content="18"/>
<meta name="text:Body font size" content="11"/>

{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

<script type="text/javascript" src="http://static.tumblr.com/is5f0mm/B45lrpvaa/one.txt"></script>
<script type="text/javascript" src="http://static.tumblr.com/misqj4e/k3Om6u289/adam.js"></script>

<style type="text/css">

iframe#tumblr_controls {
    top: 0% !important;
    right:0% !important;
    position: absolute !important;
    }

h1 {
color:{color:Blog title};
padding-bottom:30px;
font-weight: normal;
font-size:{text:title font size}px;
text-transform: uppercase;
font-family:{font:Title};
line-height: -4px;
{block:ifusebanner}display:none;{/block:ifusebanner}
}

h1 a {
color:{color:Blog title};
}

body {
height: 100%;
background-color:{color:Background};
color: {color:Text};
font-size: {text:Body font size}px;
font-family:{font:Body};
line-height: 14px;
padding: 30px 0 200px 0;
{block:ifShowbackgroundImage}background-attachment: fixed;
background-image:url('{image:Background}');
{/block:ifshowbackgroundimage}
}

a {
color: {color:Links};
text-decoration:none;
}

a:hover {
color: {color:Links Hover};
{block:IfUnderlineHover}text-decoration: underline;{/block:IfUnderlineHover}
-webkit-transition-duration: 0.5s;
}

a.title {
color: {color:Links};
text-decoration:none;
}

::-webkit-scrollbar-thumb:vertical {
background-color:{color:Scrollbar};
height:100px;
{block:IfRoundedScrollbar}
-moz-border-radius:20px;
-webkit-border-radius:20px;
{/block:IfRoundedScrollbar}
}

::-webkit-scrollbar-thumb:horizontal {
background-color:{color:Scrollbar};
height:10px;
{block:IfRoundedScrollbar}
-moz-border-radius:20px;
-webkit-border-radius:20px;
{/block:IfRoundedScrollbar}
}

::-webkit-scrollbar {
height:10px;
width:8px;
background-color:{color:background};
{block:IfRoundedScrollbar}
-moz-border-radius:20px;
-webkit-border-radius:20px;
{/block:IfRoundedScrollbar}
}

#container {
width: 1050px;
margin: auto auto auto auto;
position: relative;
}

#container .header {
width: 1050px;
margin: auto auto;
}

#container .description {
padding: 5px 0px 5px;
clear: both;
position: relative;
text-align:center;
width:500px;
margin-left: auto;
margin-right: auto;
}

#container .posts {
width: 1050px;
width: 1050px;
clear: both;
position: relative;
margin-left: auto;
margin-right: auto;
padding-top:15px;
}

#container .box {
width: 345px;
{block:ifonecolumn}width: 600px; padding-left:21%;{/block:ifonecolumn}
{block:iftwocolumns}width: 500px;{/block:iftwocolumns}
{block:iffourcolumns}width: 250px; margin-bottom:20px;{/block:iffourcolumns}
margin-left: 5px;
margin-left: 5px;
float: left;
margin-bottom: 30px;
margin-bottom: 30px;
position: relative;
}

#container .box a{
-webkit-transition-duration: 0.5s;
}

#container .box img {
max-width: 100%;
border:0px;
-webkit-transition-duration: 0.5s;

opacity:1;
}

#container .title {
font-size:{text:Post title font size}px;
line-height: 18px;
text-decoration: none;
display: block;
color:{color:Title};
padding: 8px;
}

#container .ask {
font-size:{text:Post title font size}px;
line-height: 18px;
text-decoration: none;
display: block;
color:{color:Title};
padding: 8px;
}

#container .audio {
width: 207px;
}

#container .columnHolder {
width: 800px;
margin: 5px 0 0 5px;
overflow: hidden;
}

#container .columnHolder .column {
width: 225px;
min-height: 1px;
float: left;
}

#container .columnHolder .column.middle {
margin: 0 0px;
}

#arrow {
font-size:15px;
padding-left:20px;
color:{color:background};
margin-top:-5px;
padding-bottom:5px;
}

{block:PermalinkPage}

.box {
width: 600px !important;
padding-left: 21%;
}

p.answer_form_container {
width: 580px;
}

ol.notes {
width: 600px;
position:relative;
padding-left:21%;
list-style-type: none;
margin: 0px 0 10px 0;
padding: -10px -90px;
}

ol.notes li.note {
margin: 0px 0 2px 0;
padding: 0;
}

ol.notes a {color:Links}

ol.notes img.avatar {
display: true;
padding:2px 0 0 2px;
border:0px;
}

ol.notes blockquote {
margin: 0;
}

ol.notes blockquote a {
text-decoration: none;
}

{/block:PermalinkPage}

.video{
text-align: center;
background-color:black;
}

#top-link {
position:fixed;
right:5px;
bottom:5px;
color:white;
font-weight:bold;
text-decoration:none;
padding:10px;
border:0px;
}

#audiotest {
background-image:url('http://static.tumblr.com/2w7y46r/gPklc94jg/play.png');
margin-top: -27px;
display:block;
height:27px;
z-index:-1000;
width:250px;
}

#adam {
    position:absolute;
    top:26px;
    right:3px;}

.box:hover .back {
{block:indexpage}{/block:indexpage}z-index:1000;
}

.back {
margin-top: -25px;
width:100%;
opacity: 0;
z-index: 1000;
}

{block:PermalinkPage}

.back img{
width:500px;
height:20px;
}

{/block:PermalinkPage}

{block:ifonecolumn}
.back img{width:600px; height:20px;}
{/block:ifonecolumn}

{block:iftwocolumns}
.back img{width:500px; height:20px;}
{/block:iftwocolumns}

{block:iffourcolumns}
.back img{width:100%; height:20px;}
{/block:iffourcolumns}

</style>

<style type="text/css">{CustomCSS}</style>

<script src="http://static.tumblr.com/ubmlcww/CVqlrvww0/two.txt"></script>
<script src="http://static.tumblr.com/is5f0mm/oBolrpvgf/infinite_scroll.txt"></script>
<script src="http://static.tumblr.com/ubmlcww/Bhflrvwwe/three.txt" type="text/javascript"></script>
<script src="http://static.tumblr.com/is5f0mm/JOdlrpvsh/four.txt" type="text/javascript"></script>
<script src="http://static.tumblr.com/is5f0mm/cuOlrpvzp/five.txt" type="text/javascript"></script>


</head>

{block:indexpage}
<script src="http://static.tumblr.com/is5f0mm/PT0lrpwjq/six.txt" type="text/javascript"></script>

{/block:indexpage}
<br>


<div id="container">
<div class="header">

<div style="text-align: center;">{block:ifusebanner}<img style="max-width:1500px; max-height:300px" src="{image:banner}"/>{/block:ifusebanner}<h1 class="bebas"><a href="/">{block:ifshowblogtitle}{Title}{/block:ifshowblogtitle}</a></h1></div>

<div style="text-align: center; font-size:12px; margin-top:-35px; {block:ifusebanner}margin-top:10px; {/block:ifusebanner}text-transform: lowercase;">

{block:ifshowhomelink}<a href="/">home</a>&nbsp;&nbsp;&nbsp;{/block:ifshowhomelink}

{block:ifshowmessagelink}<a href="/ask">message</a>&nbsp;&nbsp;&nbsp;{/block:ifshowmessagelink}

{block:ifLinkOneTitle}
<a href="{text:Link One}" class="link">{text:Link One Title}</a>&nbsp;&nbsp;
{/block:ifLinkOneTitle}

{block:ifLinkTwoTitle}
<a href="{text:Link Two}" class="link">{text:Link Two Title}</a>&nbsp;&nbsp;&nbsp;
{/block:ifLinkTwoTitle}

{block:ifLinkThreeTitle}
<a href="{text:Link Three}" class="link">{text:Link Three Title}</a>&nbsp;&nbsp;&nbsp;
{/block:ifLinkThreeTitle}

{block:ifLinkFourTitle}
<a href="{text:Link Four}" class="link">{text:Link Four Title}</a>&nbsp;&nbsp;&nbsp;
{/block:ifLinkFourTitle}

{block:ifLinkFiveTitle}
<a href="{text:Link Five}" class="link">{text:Link Five Title}&nbsp;&nbsp;&nbsp;</a>
{/block:ifLinkFiveTitle}

{block:ifLinkSixTitle}
<a href="{text:Link Six}" class="link">{text:Link Six Title}&nbsp;&nbsp;&nbsp;</a>
{/block:ifLinkSixTitle}

{block:ifLinkSevenTitle}
<a href="{text:Link Seven}" class="link">{text:Link Seven Title}&nbsp;&nbsp;&nbsp;</a>
{/block:ifLinkSevenTitle}

{block:ifLinkEightTitle}
<a href="{text:Link Eight}" class="link">{text:Link Eight Title}&nbsp;&nbsp;&nbsp;</a>
{/block:ifLinkEightTitle}

{block:Pages}
<a href="{URL}" title="{Label}">{Label}</a>&nbsp;&nbsp;&nbsp;
{/block:Pages}

{block:IfShowSubmit}<a href="/submit">submit</a>&nbsp;&nbsp;&nbsp;{/block:IfShowSubmit}

{block:ifshowarchivelink}<a href="/archive">archive</a>&nbsp;&nbsp;&nbsp;{/block:ifshowarchivelink}

<a href="http://villenoire.tumblr.com/">theme</a>


<div style="bottom:2px; right:2px; position:fixed; opacity:0.8; text-style:italic; color:{color:Text}; "><a href="http://villenoire.tumblr.com">&copy</a></div>

</div>

<div class="description">{description}<br style="clear:both"></div></div>

<div class="posts" id="allposts">
{block:Posts}
<div class="box">

{block:Photo}
{block:IndexPage}
<a href="{Permalink}" target="_blank">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img style="min-width:100%;" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">


<div class="back"></div>
<div class="perma">
<a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Photo}

{block:Audio}
<div class="curve">
<div style=" width:100%; height:27px; font-size:1px; color:black; background-color:black;">
{AudioPlayerBlack}
</div><a href="{Permalink}" target="_blank" id="audiotest"></a></div><div id="arrow" style="color:black;">▼</div>


{block:AlbumArt}<img style="border:1px solid white; width:50px; margin-left:5px;" src="{AlbumArtURL}"/>{/block:AlbumArt}

{block:indexpage}<div style="{block:AlbumArt}min-height:40px; padding-left:70px;margin-top:-60px;{/block:AlbumArt}">{block:Caption}{Caption}{/block:Caption}</div>{/block:IndexPage}

{block:IndexPage}
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a>
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a>{block:ExternalAudio}<a href="{ExternalAudioURL}"></a>{/block:ExternalAudio}</div>{/block:IndexPage}

{/block:Audio}

{block:Video}
<div class="video">
{block:iffourcolumns}{Video-250}{/block:iffourcolumns}
{block:ifthreecolumns}{Video-250}{/block:ifthreecolumns}
{block:iftwocolumns}{Video-500}{/block:iftwocolumns}
{block:ifonecolumn}{Video-500}{/block:ifonecolumn}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</div>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Video}

{block:Text}
<div class="curve">{block:Title}<a href="{Permalink}" class="title">&nbsp;{Title}&nbsp;</a>{/block:Title}</div>{block:Title}<div id="arrow">▼</div>{/block:Title}

<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Body}</div>
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>

{block:More}<br><br> <a href="{Permalink}" class="readMore">Read More</a>{/block:More}
{/block:Text}

{block:Answer}

<div class="curve"><a href="{Permalink}" class="ask">&nbsp;{Question}&nbsp;</a></div><div id="arrow">▼</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="border:1px solid white;" src="{AskerPortraitURL-16}"/><span style="vertical-align: 25%;">&nbsp;&nbsp;{Asker}</span>
<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Answer}</div>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a></div>
{/block:Answer}

{block:Link}
<div class="curve"><a href="{URL}" class="title" {Target}>&nbsp;{Name}&nbsp;</a>
</div><div id="arrow">▼</div>
{block:Description}<div style="padding-left:8px; padding-top:2px; padding-right:8px;">{Description}</div>{/block:Description}

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Link}

{block:Quote}<div class="curve"><a href="{Permalink}" class="title">"{Quote}"</a></div><div id="arrow">▼</div>{block:Source}&nbsp;&nbsp;{Source}<br>{/block:Source}
<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>{/block:Quote}

{block:Chat}
<div class="curve">{block:Title}<a href="{Permalink}" class="title">&nbsp;{Title}&nbsp;</a>{/block:Title}</div>{block:Title}<div id="arrow">▼</div>{/block:Title}

<table class="chat" style="padding-left:5px;"cellspacing="0">{block:Lines}<tr>{block:Label}<td class="name line{UserNumber}">{Label}</td>{block:Label}<td class="words line{UserNumber}">{Line}</td></tr>{/block:Lines}</table>

<div class="back"></div>
<div class="perma"><a href="{Permalink}" target="_blank"></a>
{block:NoteCount}<a href="{Permalink}" target="_blank">{/block:NoteCount}</a><a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank"></a></div>
{/block:Chat}

{block:PermalinkPage}<block:Caption>
<BR>{Caption}</block:Caption><BR><BR>
{block:NoteCount}{notecountwithlabel}{/block:NoteCount}{/block:PermalinkPage}


{block:PermalinkPage}</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}

    
</div>{/block:Posts}
</div>


{block:IndexPage}
<div class="columnHolder footer"><div class="column navigation" id="navigation">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}



{block:PermalinkPagination}
{block:NextPost}<a href="{NextPost}" class="navigate">{/block:NextPost}{block:NextPost}</a>{/block:NextPost}
{block:PreviousPost}<a href="{PreviousPost}" class="navigate">{/block:PreviousPost}{block:PreviousPost}</a>{/block:PreviousPost}{/block:PermalinkPagination}</div></div>
{/block:IndexPage}</div>


<script type="text/javascript" src="http://static.tumblr.com/is5f0mm/T5klrpwms/autoscale.txt"></script>

<object type="application/x-shockwave-flash" width="1" height="1" data="https://www.youtube.com/v/CkNj7Aujme4?version=2&autoplay=1&loop=1&theme=dark" style="visibility:hidden;display:inline;"><param name="movie" value="https://www.youtube.com/v/CkNj7Aujme4?version=2&autoplay=1&loop=1&theme=dark" /><param name="wmode" value="transparent" /></object>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 8 2012, 03:56 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I have to refresh each time at the bottom of the page (Safari 6/Mac). And I never see the vertical scrollbar on the right.

Why do nearly all your script files have a .txt extension instead of .js?
Besides, I see a ; at the beginning of the infinite-scroll script that shouldn't be there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swordedge
post Oct 8 2012, 08:57 AM
Post #3





Group: Members
Posts: 3
Joined: 4-October 12
Member No.: 17,898
I downloaded the theme so I am unaware as to why they are .txt rather then .js ...and to be honest I do not even know the difference that would make to the page. Interesting though about the extra ; in the infinite scroll. Ill check it out and see if that's the issue
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sorryboss
post Oct 8 2012, 08:38 PM
Post #4


Member
***

Group: Members
Posts: 41
Joined: 2-September 12
Member No.: 17,724
QUOTE(swordedge @ Oct 9 2012, 12:57 AM) *

I downloaded the theme so I am unaware as to why they are .txt rather then .js ...and to be honest I do not even know the difference that would make to the page. Interesting though about the extra ; in the infinite scroll. Ill check it out and see if that's the issue


If you reference a file called "file.txt" and the actual file is called"file.js" then that file will not be found. That's a big problem, because your javascript will not run at all.

This post has been edited by Sorryboss: Oct 8 2012, 08:38 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 9 2012, 03:00 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I get a javascript error:
Reference Issue:Can't find variable: autoscale in autoscale.txt.
I have no idea what the script does. It doesn't seem to have anything to do with the jQuery Autosize plugin ( http://www.jacklmoore.com/autosize ).
BTW, Untitled-2.png can't be found.

Where did you download those files from? Not from https://github.com/paulirish/infinite-scroll where you can d/l a .zip file with the proper extensions of files?
Besides, you seem to be using the jQuery plugin, but you don't have a reference to the jQuery framework itself in your page.

@Sorryboss
The references are to .txt files, not .js.

Sometimes if I save a file from the web, I get two extensions, e.g. .js.txt. I then just get rid of .txt. My Mac then alerts me to ask if I want to use .js or .txt. I simply choose .js and voilą.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 11:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC