Infinte Scroll Only Works After Refresh, Please Help |
Infinte Scroll Only Works After Refresh, Please Help |
swordedge |
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> {/block:ifshowhomelink} {block:ifshowmessagelink}<a href="/ask">message</a> {/block:ifshowmessagelink} {block:ifLinkOneTitle} <a href="{text:Link One}" class="link">{text:Link One Title}</a> {/block:ifLinkOneTitle} {block:ifLinkTwoTitle} <a href="{text:Link Two}" class="link">{text:Link Two Title}</a> {/block:ifLinkTwoTitle} {block:ifLinkThreeTitle} <a href="{text:Link Three}" class="link">{text:Link Three Title}</a> {/block:ifLinkThreeTitle} {block:ifLinkFourTitle} <a href="{text:Link Four}" class="link">{text:Link Four Title}</a> {/block:ifLinkFourTitle} {block:ifLinkFiveTitle} <a href="{text:Link Five}" class="link">{text:Link Five Title} </a> {/block:ifLinkFiveTitle} {block:ifLinkSixTitle} <a href="{text:Link Six}" class="link">{text:Link Six Title} </a> {/block:ifLinkSixTitle} {block:ifLinkSevenTitle} <a href="{text:Link Seven}" class="link">{text:Link Seven Title} </a> {/block:ifLinkSevenTitle} {block:ifLinkEightTitle} <a href="{text:Link Eight}" class="link">{text:Link Eight Title} </a> {/block:ifLinkEightTitle} {block:Pages} <a href="{URL}" title="{Label}">{Label}</a> {/block:Pages} {block:IfShowSubmit}<a href="/submit">submit</a> {/block:IfShowSubmit} {block:ifshowarchivelink}<a href="/archive">archive</a> {/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">©</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"> {Title} </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"> {Question} </a></div><div id="arrow">▼</div> <img style="border:1px solid white;" src="{AskerPortraitURL-16}"/><span style="vertical-align: 25%;"> {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}> {Name} </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} {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"> {Title} </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> |
Frederiek |
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. |
swordedge |
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
|
Sorryboss |
Oct 8 2012, 08:38 PM
Post
#4
|
Member Group: Members Posts: 41 Joined: 2-September 12 Member No.: 17,724 |
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 |
Frederiek |
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ą. |
Lo-Fi Version | Time is now: 26th April 2024 - 02:21 PM |