Partage
  • Partager sur Facebook
  • Partager sur Twitter

Theme Tumblr : L'endless scroll.

Endless scroll qui ne marche pas.

LiliumCandidum
    7 août 2017 à 0:39:29

    Bonjour, bonsoir,

    Je rencontre un soucis avec le code html de mon tumblr, qui est, le voici sur pastebin : https://pastebin.com/LqpLCUvG.

    Ou ci-dessous :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <!-- THEME BY MIU. ***ano-silence.tumblr.com***
 
Privet. So at first some things:

don't use the theme as a base [look at my blog for the basic code!];
 
tweak the codes however you want but
 
please don't remove the credit or move it to a page!
 
if there are any glitches in this theme please message me off anon and
 
i'll try to correct it right away !
 
thank you and enjoy the theme! 笑顔-->

<html xmlns="http://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="color:background" content="#fff" />
    <meta name="color:Text" content="#444" />
    <meta name="image:background img" content=""/>
    <meta name="image:bottomright" content=""/>
    <meta name="image:bottomleft" content=""/>
    <meta name="color:hover" content="#aaa" />
    <meta name="color:link" content="#999" />
    <meta name="color:link hover" content="#999" />
    <meta name="color:bold text" content="#000">
    <meta name="color:tooltip bg" content="#000000">
    <meta name="color:tooltip" content="#dccbe7">
    <meta name="color:scrollbar" content="#000000"/>
    <meta name="color:scrollbar bg" content="#ffffff"/>
    <meta name="if:onecolumn" content="1"/>
    <meta name="if:twocolumn" content="0"/>
    <meta name="if:show title" content="1"/>
    <meta name="if:post fade" content="1"/>
    <meta name="if:showtags" content="0"/>
    <meta name="if:bordersidebar" content="0"/>
    <meta name="color:border" content="#949494"/>
     
    <meta name="text:Updates" content="well, here are your updates or whatever you     want to write here.  have fun with it!" />
     <meta name="text:UpdatesTitle" content="Updates +" />
    <meta name="text:Link2 URL" content="/"/>
    <meta name="text:Link3 URL" content="/"/>
    <meta name="text:Link4 URL" content="/"/>
    <meta name="text:Link5 URL" content="/"/>
    <meta name="text:Link6 URL" content="/"/>
    <meta name="text:Link7 URL" content="/"/>
    <meta name="text:Link2" content="link 2"/>
    <meta name="text:Link3" content="link 3"/>
    <meta name="text:Link4" content="link 4"/>
    <meta name="text:Link5" content="link 5"/>
    <meta name="text:Link6" content="link 3"/>
    <meta name="text:Link7" content="link 4"/>
     
    
    
    
                <style type="text/css">
                
{block:ifinvertedtumblrcontrols}
iframe#tumblr_controls {
white-space:nowrap;
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
transition: .8s ease-in-out;
-webkit-transition: .8s ease-in-out;
-moz-transition: .8s ease-in-out;
-o-transition: .8s ease-in-out;
}
{/block:ifinvertedtumblrcontrols}
  
::-webkit-scrollbar {
width: 6px; height: 4px; background:{color:scrollbar bg}; 
}

::-webkit-scrollbar-thumb {
background-color:{color:scrollbar};
}

    
    body{
    font-size:10px;
    color:{color:Text};
    font-family:"consolas";
    background-color:{color:background};
    color:{color:body text};
    background-image:url('{image:background img}');
    background-attachment:fixed;
    background-repeat:repeat;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
}

blockquote
{border-left:2px solid;
padding-left:5px;}
 
a
{text-decoration:none;
color:{color:Link}; 
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;
opacity:1;}
 
a:hover
{text-decoration:none;
color:{color:Link hover};
opacity:1;}

#mew {
{block:iftwocolumn}
    width:580px;
    margin-left:300px; height:100%;
    {/block:iftwocolumn}
    {block:ifonecolumn}
    width:298px;
    margin-left:500px; 
    height:100%;{/block:ifonecolumn}
    background-color:{color:background};
    position:relative;
    padding:16px;
    margin-top:20px;
    overflow:hidden;
    float:left;
    border-left:1px solid {color:border};
    border-right:1px solid {color:border};
    border-bottom:1px solid {color:border};
}
 
#post{
    background-color:{color:background};
    overflow:hidden;
    width:250px;
    float:left;
    margin:20px;
    letter-spacing:1px;
    {block:PermalinkPage}
    width:400px;
    {/block:PermalinkPage}
    {block:ifpostfade}
     opacity:.6;
     {/block:ifpostfade}
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
}

#post:hover {
    opacity:1;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
}

#photoset img {
    {block:PermalinkPage}
    width:400px;
    {/block:PermalinkPage}
    margin-bottom:5px;
}

#photo img {
    width:250px;
    {block:PermalinkPage}
    width:400px;
    {/block:PermalinkPage}
}


#postinfo {
    width:250px;
    padding:0px;
    height:auto;
    font-size:8px;
    text-align:right;
    border-top:1px solid {color:border};
    letter-spacing:2px;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }

    #line {
    height:auto;
    width: 1000%;
    position:fixed;
    top:15px;
    left: 0px;
    opacity:0.8;
    z-index:1;
    background-image:url(https://33.media.tumblr.com/779abe9f6cf87ba4526b983fbd90e659/tumblr_nb4k628MZs1rd9itoo1_r2_500.gif);
background-repeat:repeat-x;
}

#top{
    height:15px;
    width: 100%;
    position:fixed;top:0px;
    opacity:0.8;
    z-index:1;
    background-color:{color:background};
}


#sidebar {
    padding:3px 0px 3px 0px; 
    background:{color:background}; 
    position:fixed; 
    width:75px; 
    font-size: 9px; 
    bottom:220px;
    {block:iftwocolumn}
    left:110px;
    {/block:iftwocolumn}
    {block:ifonecolumn}
    left:340px;
    {/block:ifonecolumn}
    z-index:1; 
    padding: 3px;
    background:transparent;
    font-family: "Times New Roman"; 
    text-align:center;
    {block:ifbordersidebar}
    border-left:1px solid {color:border};
    border-right:1px solid {color:border};
    border-bottom:1px solid {color:border};
    border-top:1px solid {color:border};
    {/block:ifbordersidebar}
    
 }
 
 .hihi {
     opacity:0;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
 }
 
 #sidebar:hover .hihi {
opacity:1;
webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
 }

#s-m-t-tooltip {position:fixed;
    overflow:auto;
    max-width:130px;  
    padding:2px 5px 2px 5px;
    margin:18px 0 0 18px;
    z-index:10;
    display:inline-block;
    font:8px 'calibri';
    letter-spacing:1px;
    text-transform:uppercase;
    background:{color:tooltip bg};
    color:{color:tooltip};}

    #bottomright {
    position:fixed;
    width:370px;
    background-color:transparent;
    bottom:0px;
    right:100px;
    }
    
    #bottomleft {
    position:fixed;
    width:370px;
    background-color:transparent;
    bottom:0px;
    left:0px;
    }

#updates {
    font-size:8px;
    color:{color:Text};
    text-align:left;
    height:13px;
    width:140px;
    padding:4px;
    top:55px;
    {block:iftwocolumn}
    right:270px;
    {/block:iftwocolumn}
    {block:ifonecolumn}
    right:360px;
    {/block:ifonecolumn}
    z-index:10;
    position:fixed;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#updates:hover {
    height:235px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#updatestitle {
    font-size:10px; 
    text-transform:uppercase; 
    font-family:arial; 
    text-align:left;
    color:{color:Text};
}

#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

#links {
    margin-top:7px;
    margin-left:592px;
    text-align:center;
    z-index:9;
    position:fixed;
    font-size:9px;
    width:auto;
    letter-spacing:2px;
    word-spacing:5px;
    
}


    </style>

<style type="text/css">


{CustomCSS] </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>


{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
 
<script type="text/javascript">
$(window).load(function(){
var $wall = $('#mew');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#post, #post_photo',
isAnimated : false
});
});
 
$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '#post, #post_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#mew').show(500);
});
</script>
 
 
{/block:IndexPage}

</head>

<body>



<div id="links">
<big><a href="/" title="home">HOME</a>  <a href="/ask" title="message me">MESSAGE</a> <a href="http://ano-silence.tumblr.com" title="theme credit">CREDIT</a></big>
        
</div>

<div id="top"></div>

<div id="updates">
<div id="updatestitle"> {text:UpdatesTitle}</div> 

<div style="padding-top:8px;font-family:calibri;text-transform:uppercase;letter-spacing:1px;color:{color:Text};">
<span style="calibri"> {text:Updates}
</span>
</div></div>

<div id="line"> <img src="https://33.media.tumblr.com/779abe9f6cf87ba4526b983fbd90e659/tumblr_nb4k628MZs1rd9itoo1_r2_500.gif"/></div>

<div id="bottomright"> <img src="{image:bottomright}"></div>
<div id="bottomleft"> <img src="{image:bottomleft}"></div>

<div id="sidebar">
{block:ifshowtitle}<div style="font-size:15px;"><center>{Title}</center></div>{/block:ifshowtitle} <br><i>{description}</i><br><br>
    
 <div class="hihi"><center> <div style="letter-spacing:0px;font-size:9px;font-family:calibri">  {block:ifLink2}<a href="{text:Link2 URL}" title="{text:Link2}">{text:Link2}</a>{/block:ifLink2} - {block:ifLink3}<a href="{text:Link3 URL}" title="{text:Link3}">{text:Link3}</a>{/block:ifLink3} - {block:ifLink4}<a href="{text:Link4 URL}" title="{text:Link4}">{text:Link4}</a>{/block:ifLink4} - {block:ifLink5}<a href="{text:Link5 URL}" title="{text:Link5}">{text:Link5}</a>{/block:ifLink5} - {block:ifLink6}<a href="{text:Link6 URL}" title="{text:Link6}">{text:Link6}</a>{/block:ifLink6} - {block:ifLink7}<a href="{text:Link7 URL}" title="{text:Link7}">{text:Link7}</a>{/block:ifLink7} 
       </div></center></div> 
</div>


<div id="mew">
{block:Posts}

<div id="post">

{block:Text}
{block:Title}<div style="font-size:12px;font-weight:bold;color:{color:link}">{Title}</div>{/block:Title}{Body}
{/block:Text}

{block:Photo}
<div id="photo"> <a href="{Permalink}" ><img src="{PhotoURL-250}"/> </a></div>
{/block:Photo}

{block:Photoset}
{block:Photos}<img src="{PhotoURL-250}">{/block:Photos}
{/block:Photoset}


{block:Quote}
<div style="font-size:12px;text-align:center;letter-spacing:2px;"><b>"{Quote}"</b></div><br>
<div align="right">
{block:Source}-{Source}{/block:Source}
</div>
{/block:Quote}


{block:Video}
{Video-250}
{/block:Video}


{block:Link}
<a href="{URL}" class="link" {Target}><i>{Name}</i></a><BR>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat} 
{block:Lines}
{block:Label}
<br><b>{Label}</b>
{/block:Label}
&nbsp;{Line}
{/block:Lines}
{/block:Chat}

{block:Audio}
{block:TrackName}
<div style="font-size:10px;text-transform:itali;font-family:'Times New Roman';">{TrackName}</div><br>
{/block:TrackName}
{block:AudioPlayer} <div style="width:27px; overflow:hidden;">{AudioPlayerWhite}</div>{/block:AudioPlayer}<div style="text-align:right;margin-top:-26px;width:auto;margin-left:30px;"><i>{block:Artist}Artist: {Artist}<br>{/block:Artist}{block:Album}{Album}{/block:Album}<br>
{block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</i></div>
{block:indexpage}{block:ifshowCaption}{block:Caption}{Caption}{/block:Caption}
{/block:ifshowCaption}{/block:IndexPage}
{/block:Audio}
 

{block:Answer}
<b>{Asker}</b> whispered <i>{Question}</i><Br>
{Answer}
{/block:Answer}

{block:indexpage}<div id="postinfo"><a href="{Permalink}" title="postet on {ShortMonth} {DayOfMonthWithZero}, {Year} with {NoteCount}コメント via {ReblogParentName}" class="not">{NoteCount}コメント</a> <a href="{ReblogURL}" title="reblog?" target="_blank">↺</a><br>
{block:ifshowtags}{block:HasTags}<br><center><i>tags:</i>{block:Tags}<a href="{TagURL}"> {Tag} </a>{/block:Tags}</center>{/block:HasTags}{/block:ifshowtags}
</div>{/block:indexpage}

{block:PermalinkPage}
{block:Caption} {Caption} {/block:Caption}
<br><br><center>{block:NoteCount}Posted on {ShortMonth} {DayOfMonthWithZero}, {Year} with {NoteCount} Notes{/block:NoteCount} {block:RebloggedFrom}<i>via</i> <a href="{ReblogParentURL}" >{ReblogParentName}</a> {/block:RebloggedFrom}
{block:ContentSource}<br><i>Origin: </i><a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}</center><br>{block:HasTags}<br><i>Tags: </i>{block:Tags}<a href="{TagURL}"> {Tag} </a>{/block:Tags}{/block:HasTags}
<br>{block:PostNotes}
{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}
</div>
{/block:Posts}

</div></div>
    
      {block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}   
    
    
</div></div>




<!-- hey there! >please< don't remove the credit or move it to anywhere else. it's just a tiny text in a corner. i worked hard on this theme and i hope you understand ! さようなら. -miu; -->
 
<a href="http://ano-silence.tumblr.com" style="left:0px;bottom:-1px;position:fixed;z-index:99999999;background-color:#ffffff;color:{color:Text};padding:1px;font-size:13px;" title="theme by miu-">❥</a>




</div>

</body>
</html>



    L'infinite scroll ne semble pas fonctionner, j'ai essayé de résoudre le soucis avec certains réajustements de codes (infinite scroll masonry), qui étaient proposés sur des sites, mais sans succès.

    L'infinite scroll est sur cette partie, où je me suis essentiellement penchée pour résoudre l'affaire :

    <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
 
<script type="text/javascript">
$(window).load(function(){
var $wall = $('#mew');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#post, #post_photo',
isAnimated : false
});
});
 
$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '#post, #post_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#mew').show(500);
});
</script>

    Serait-ce donc cette partie où il y aurait un problème ? Car j'ai eu beau me tenter à la modifier, ce fut de vains efforts (et de longues minutes, heures).


    Je ne suis pas très douée, en html, de base, j'essaye de m'y lancer petit à petit. Je sais faire de petites choses. Mais, là, cela me prend sérieusement la tête.

    Merci pour votre attention, espérant que vous pourriez m'aider ~

    -
    Edité par LiliumCandidum 7 août 2017 à 0:43:11

    • Partager sur Facebook
    • Partager sur Twitter
    HadockB
    • HTML / CSS
      8 août 2017 à 12:31:45

      Edit : il semblent que le soucie viennent de sont thème, j'ai tester sans rien toucher et ça ne fonctionne pas non plus. Le créateur précise d'aller sur sont blog pour comprendre le code utilisé tu est aller voir?

      Bonjour :) c'est étrange car chez moi ça semblent fonctionner correctement. Peux tu me décrire le soucie exactement (hésite pas à mettre des captures d'écrans!)

      -
      Edité par HadockB 8 août 2017 à 12:57:28

      • Partager sur Facebook
      • Partager sur Twitter
      - My Website - 
      LiliumCandidum
        8 août 2017 à 20:21:01

        Coucou, merci de m'avoir répondu ~ 

        Où as-tu vu cette précision ? Car même en allant sur son blog à thèmes, je n'ai pas du tout trouver d'explications, et, malheureusement, je ne peux même pas lui envoyer un message, car le ask est désactivé sur son tumblr.

        Ici, c'est le blog où j'ai trouvé le thème : http://cry-plant.tumblr.com/post/118659277373/ano-silence-theme-tai-by-miu-rules-dont

        C'est si frustrant...

        • Partager sur Facebook
        • Partager sur Twitter
        HadockB
        • HTML / CSS
          8 août 2017 à 21:43:08

          J'ai trouver ça dans le code au début c'est écrit en commentaire en faite :( après j'ai fait pas mal de recherche sur google et à chaque fois les gens disent que l'infinite scrool à du mal à marcher avec tumblr mais sur ton code le script pointe vers la bonne url donc normalement ça doit pas venir de ce "problème courant". 

          Pour l'erreur j'ai vue ça dans la console du navigateur (f12 puis console). J'ai l'impression que certaine déclaration pointe vers "rien" et que certain script passe pas à cause du https...

          • Partager sur Facebook
          • Partager sur Twitter
          - My Website - 

          Theme Tumblr : L'endless scroll.

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown