Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Web Site Functionality _ Infinite Scrolling - Tumblr Theme
Posted by: bouda Sep 29 2020, 07:48 AM
I am very novice so if anyone can help, I will need to know exactly where to put the code into the html. I have searched and tried multiple coding, but nothing has worked for me and maybe I was just putting things in the wrong place. I am looking to do two things to a tumblr site I have started to build out. A sample of the site can be found here: https://workingproject1.tumblr.com
1. add infinite scrolling so that photos load when you scroll down. This use to and now it has stopped.
2. remove the "top" button that pops up after you scroll down some on the site, and add a better version of this button - possible an arrow that hovers, and is more user friendly when someone is on the site on their phone.
I truly appreciate any help you can give!
Posted by: pandy Sep 29 2020, 10:46 AM
Afraid I know nothing about the innards of Tumblr and how its infinite scolling is turned on and off. But when it comes to the button it should be enough that you find the HTML for it in the template and delete it.
Posted by: pandy Sep 29 2020, 11:01 AM
FYI Tumblr isn't straightforward HTML. The source you see in your CP is a template, a mix of HTML and Tumblr's proprietary templating language. What you see if you go to your page with a browser and View Source is pure HTML (and CSS and JS), but that's the result of Tumblr's template engine, the interpreted template. That source doesn't physically exist on the server for you to edit. That's why it can be hard to get help from people that don't use Tumblr themselves. 
Posted by: bouda Sep 29 2020, 11:08 AM
Afraid I know nothing about the innards of Tumblr and how its infinite scolling is turned on and off. But when it comes to the button it should be enough that you find the HTML for it in the template and delete it.
Thanks for the reply! Yes, I can delete the current "top" button. Looking to replace it with one described in original post.
Posted by: bouda Sep 29 2020, 11:10 AM
I have the Tumblr infinite scroll option turned on, however it is not working with the current code below. It use to when I used this theme on a previous site, not sure what changes were made that it doesn't work anymore. Here is the complete code that shows when I log into Tumblr to edit. Infinite scroll code in close to the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="font:Body" content="Georgia, Times New Roman, sans-serif"/>
<meta name="font:Title" content="Georgia, Times New Roman, sans-serif"/>
<meta name="color:Text" content="#353535">
<meta name="color:Links" content="#8C7A94">
<meta name="color:Hover" content="#F7E7FF">
<meta name="color:Background" content="#FFFFFF">
<meta name="color:PostsBackground" content="#FFFFFF">
<meta name="image:Background" content=""/>
<meta name="text:Next Pagination" content="Next"/>
<meta name="text:Previous Pagination" content="Previous"/>
<meta name="text:Tumblr Username" content=""/>
<meta name="if:Infinite Scrolling" content="1"/>
<meta name="if:HighRes Images" content="1"/>
<center>
<iframe width="100%" height="40px" frameborder="0"></iframe>
<script src='https://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
{block:IndexPage}
{block:IfInfiniteScrolling}
<script type="text/javascript" src="https://static.tumblr.com/1s4z8hu/mYolo412c/jquery.infinitescroll.min.js"></script>
{/block:IfInfiniteScrolling}
{/block:IndexPage}
<script type="text/javascript" >
$(window).load(function(){
<script type="text/javascript" >
$(window).load(function(){
$('#posts').infinitescroll({
navSelector : '#footer', // selector for the paged navigation
nextSelector : '#footer a:first-child', // selector for the NEXT link (to page 2)
bufferPx : 2000,
debug: false,
errorCallback: function() { $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal'); }
},
function( newElements ) { setTimeout(function() {
/* repair audio players*/
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: 'https://{text:Tumblr Username}.tumblr.com/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
}
});
});
}, 2000);}
);
});
</script>
<style type="text/css">
body{
background:{color:Background} url('{image:background}') fixed;
font-family: {font:Body};
font-size:20px;
line-height:0px;
letter-spacing:0px;
text-align:justify;
margin:5px;
padding:5px;
color:{color:text};
}
#infscr-loading {
z-index: 5000;
position: fixed;
left: 45%;
bottom: 150px;
height: 40px;
font-size:11px;
letter-spacing:2px;
line-height:14px;
padding: 10px;
background: #fff;
opacity: 0.8;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.clear{
clear:both;
}
a:link, a:visited{
color:{color:links};
text-decoration:none;
}
a:hover{
color:#b6b6b6;
text-decoration:none;
}
}
#wrapper img a{
border:0px !important;
}
#wrapper{
width:700px;
margin:0px auto;
border:0px solid #000;
}
#header{
background:rgba(255,255,255,0.5);
position:fixed;
top:5px;
padding:15px 0px;
width:700px;
z-index:9999;
}
.left_header{
width:350px;
float:left;
text-align:left;
}
.left_header ul{
list-style:none;
margin:5px;
padding:0px;
}
.left_header li{
list-style:none;
font-weight:400;
font-size:16px;
text-transform:lowercase;
letter-spacing:1px;
text-align:right;
letter-spacing:2px;
margin:5px;
padding:0px;
display:inline-block;
}
.right_header{
width:350px;
float:right;
text-align:right;
}
.right_header h1{
font-weight:400;
font-size:16px;
text-transform:lowercase;
letter-spacing:1px;
text-align:right;
letter-spacing:2px;
margin:10px;
padding:0px;
}
#description{
text-align:justify;
font-size:10px;
line-height:13px;
letter-spacing:0px;
text-align:justify;
display:none;
}
#posts{
margin-top:10px;
background:{color:PostsBackground};
}
.post{
margin:10px 0px;
background:{color:PostsBackground};
}
.permalink_l{
position:absolute;
width:7px;
opacity:0;
line-height:12px;
padding:5px;
margin:0px;
font-size:10px;
}
.post:hover .permalink_l{
opacity:0;
}
.text{
font-size:14px;
line-height:27px;
letter-spacing:2px;
text-align:justify;
}
.text p{
margin-bottom:0px;
padding-bottom:0px;
}
.text h3{
margin-bottom:0px;
padding-bottom:0px;
font-weight:400;
font-size:16px;
}
.text img{
border:0px !important;
max-width:500px;
height:auto;
}
.photo img{
width:auto;
height:700px;
}
.quote{
text-align:justify;
}
.link p{
margin-bottom:0px;
padding-bottom:0px;
}
.quote p{
margin-bottom:0px;
padding-bottom:0px;
}
.q-source{
text-align:right;
letter-spacing:1px;
font-style:italic;
font-size:10px;
}
.chat ul, .chat ul li{
list-style:none;
margin:0px;
padding:0px;
}
.chat .label{
font-weight:bold;
font-style:italic;
}
.video embed, .video object, .video iframe{
width:700px !important;
height:394px !important;
}
.player{
text-align:justify;
}
.audio {
height:30px;
overflow-y: hidden;
line-height:1px !important;
}
.audio span {
background:{color:PostsBackground};
font-size:1px;
}
.audio span a{
background:{color:PostsBackground};
font-size:1px;
}
.artist{
text-transform:lowercase;
padding:0px;
}
.question p{
margin-bottom:0px;
padding-bottom:0px;
}
.prev{
float:left;
}
.next{
float:right;
}
.source{
display:none;
}
{CustomCSS}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="left_header">
<ul>
<li><a href="https://instagram.com/b0uda" target="_blank"></a></li>
</ul>
</div>
<div class="right_header">
<h1><!a href="/">{Title}</a></h1>
</div>
<div class="clear"></div>
</div><!--header end-->
<div id="posts">
{block:Posts}
{block:Text}
<div class="post text">
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{Body}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
{block:IfHighResImages}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/>{/block:IfHighResImages}
{block:IfNotHighResImages}<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}{/block:IfNotHighResImages}
<div class="caption">{Caption}</div>
{/block:Caption}{/block:PermalinkPage}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Photo}
{block:Photoset}
<div class="post photoset">
{Photoset-700}
{block:PermalinkPage}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}{/block:PermalinkPage}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Photoset}
{block:Quote}
<div class="post quote">
<p>“{Quote}”</p>
{block:Source}<div class="q-source">— {Source}</div>{/block:Source}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Chat}
{block:Video}
<div class="post video">
{Video-700}
{block:PermalinkPage}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}{/block:PermalinkPage}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Video}
{block:Audio}
<div class="post player">
<div class="audio" id="{postID}">{AudioPlayerWhite}</div>
<div class="artist"><a href="{Permalink}">{block:Artist}<b>{Artist}</b></a>{/block:Artist} {block:TrackName}<em>{TrackName}</em>{/block:TrackName}</div>
{block:PermalinkPage}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}{/block:PermalinkPage}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Audio}
{block:Answer}
<div class="post question">
<p><b>{Question}</b></p>
<p>{Answer}</p>
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">× {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">× {Tag}</a> {/block:Tags} {/block:HasTags} Asked by <em>{Asker}</em></div>
{/block:IndexPage}
</div>
{/block:Answer}
{block:PermalinkPage}
<div class="notestags">{block:NoteCount}{NoteCount} notes{/block:NoteCount} {block:HasTags}
| {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} {/block:HasTags}</div>
<div class="source">
{block:ContentSource}
<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
</a>
{/block:ContentSource}
{block:RebloggedFrom} <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
</div>
{/block:PermalinkPage}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}
</div>
<div id="footer">
{block:NextPage}
<div class="next"><a href="{NextPage}">{text:Next Pagination}</a></div>
{/block:NextPage}
{block:PreviousPage}
<div class="prev"><a href="{PreviousPage}">{text:Previous Pagination}</a></div>
{/block:PreviousPage}
<div class="clear"></div>
</div><!--wrapper end-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" >
<style>
#myBtn {
display: none;
position: fixed;
bottom: 100px;
right: 100px;
z-index: 99;
font-size: 20px;
border: none;
outline: none;
background-color: gray;
color: white;
cursor: pointer;
padding: 25px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 1000px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
</body>
</html>
Posted by: pandy Sep 29 2020, 11:14 AM
Everything within curly braces are Tumblr's proprietary stuff and it means nothing to us. I suspect in some cases it is replaced by chunks of HTML coming from somewhere else.
Thanks for the reply! Yes, I can delete the current "top" button. Looking to replace it with one described in original post.
Well, to start with find an arrow image.
Posted by: bouda Sep 29 2020, 01:43 PM
Everything within curly braces are Tumblr's proprietary stuff and it means nothing to us. I suspect in some cases it is replaced by chunks of HTML coming from somewhere else.
Thanks for the reply! Yes, I can delete the current "top" button. Looking to replace it with one described in original post.
Well, to start with find an arrow image.
Thanks again for the reply and the knowledge regarding Tumblr. I should probably search out a forum specifically targeted towards that platform!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)