The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Infinite Scrolling - Tumblr Theme
bouda
post Sep 29 2020, 07:48 AM
Post #1





Group: Members
Posts: 4
Joined: 29-September 20
Member No.: 27,562



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 29 2020, 10:46 AM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



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.

CODE
<button onclick="topFunction()" id="myBtn" title="Go to top" style="display: block;">Top</button>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 29 2020, 11:01 AM
Post #3


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bouda
post Sep 29 2020, 11:08 AM
Post #4





Group: Members
Posts: 4
Joined: 29-September 20
Member No.: 27,562



QUOTE(pandy @ Sep 29 2020, 11: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.

CODE
<button onclick="topFunction()" id="myBtn" title="Go to top" style="display: block;">Top</button>



Thanks for the reply! Yes, I can delete the current "top" button. Looking to replace it with one described in original post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bouda
post Sep 29 2020, 11:10 AM
Post #5





Group: Members
Posts: 4
Joined: 29-September 20
Member No.: 27,562



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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {Tag}</a> {/block:Tags} {/block:HasTags}</div>
{/block:IndexPage}
</div>
{/block:Photoset}

{block:Quote}
<div class="post quote">
<p>&ldquo;{Quote}&rdquo;</p>
{block:Source}<div class="q-source">&mdash; {Source}</div>{/block:Source}
{block:IndexPage}
<div class="permalink_l"><a href="{Permalink}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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}">&times; {block:NoteCount} {NoteCount} {/block:NoteCount}</a> {block:HasTags} {block:Tags} <a href="{TagURL}">&times; {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>

This post has been edited by bouda: Sep 29 2020, 11:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 29 2020, 11:14 AM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



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.

QUOTE(bouda @ Sep 29 2020, 06:08 PM) *

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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bouda
post Sep 29 2020, 01:43 PM
Post #7





Group: Members
Posts: 4
Joined: 29-September 20
Member No.: 27,562



QUOTE(pandy @ Sep 29 2020, 12:14 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.

QUOTE(bouda @ Sep 29 2020, 06:08 PM) *

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. smile.gif



Thanks again for the reply and the knowledge regarding Tumblr. I should probably search out a forum specifically targeted towards that platform!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 1st December 2020 - 05:21 PM