Hide posts in tumblr

Asked

Viewed 514 times

-2

I made a theme pro tumblr, and what I wanted to do is provide 3 buttons fixed at the top of the screen: all (shows all posts), text (shows only texts) and images (only images).

I was able to do something, but the problem is that it only works in the first post, since the page is in infinite load. I wanted help to do this. I’ll rebuild what I did and put the code in later, but someone thinks it’s possible?

<script type="text/javascript" charset="utf-8">
function control(mostra) {
    if(mostra == "all"){
        document.getElementsByClassName("image").style.display="block";
        document.getElementsByClassName("text").style.display="block";
    }else if(mostra == "image"){
        document.getElementsByClassName("image").style.display="block";
        document.getElementsByClassName("text").style.display="none";
    }else{
        document.getElementsByClassName("image").style.display="none";
        document.getElementsByClassName("text").style.display="block";
    }
}
</script>

and the buttons:

<input id="tudo" type="button" value="All" onclick=control("all") />
<input id="imagem" type="button" value="Image" onclick=control("image") />
<input id="texto" type="button" value="Text" onclick=control("text") />

here the block of posts:

<div id="posts">
{block:Posts}
    <div class="text">
        {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}

        {block:Quote}
            <div id="postquote">“{Quote}”</div><br>
            {block:Source}<div id="sourcequote"> — {Source}</div>{/block:Source}
        {/block:Quote}

        {block:Link}<a href="{URL}"><h1>{Name}</h1></a>
        {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
        {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}

        {block:Answer}
        <table width="500px" cellspacing="0" cellpadding="0">
        <tr>
        <td width="415px" class="question">{Question}</td>
        <td width="30px"><span class="questionarrow">◤</span></td>
        <td width="64px" class="asking"><img src="{AskerPortraitURL-64}"><br>{Asker}</td>
        </tr>
        </table>
        <div class="answer">{Answer}</div>
        {/block:answer}

        {block:Audio}<span class="audio"><center>{AudioPlayerBlack}</center></span>{block:Caption}{Caption}{/block:Caption}{/block:Audio}

    </div>


        <div class="image">
            {block:Photo}<center><img src="{PhotoURL-500}"/></center>
            {block:Caption}{Caption}{/block:Caption}{/block:Photo}

            {block:Photoset}<center>{Photoset-500}</center>
            {block:Caption}{Caption}{/block:Caption}{/block:Photoset}

            {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
        </div>

        <div id="ssource">
            {block:ContentSource}
                <a href="{SourceURL}">{lang:Source}:{block:SourceLogo}
                <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
                {/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}</a>
            {/block:ContentSource}
        </div>
</div>
    <div id="perma">
        <a href="{ReblogURL}" target="_blank">reblog</a>{block:HasTags}<br>{block:Tags} <a href="{TagURL}"><b>#</b>{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}
    </div>
{/block:Posts}
</div>
javascript
  • 1

    You could put the current code, the current address, to see what can be done.

  • Hi Rodrigo, welcome to [en.so]. What you want to know seems possible yes. I believe your question is being denied because you can’t help without seeing your code. The format here of the site is to give complete answers that actually solve the problem, and not just tips (I suggest a look at [tour]). For this to be possible, the question needs to be focused. I recommend [Dit] your question and supplement with relevant code snippets.

  • Create a DIV with a class before each block and does the show/Hide with JS. In theory it should work.

  • thank you very much, because I had stopped with the porojeto when a friend said of this site, so I was already with a different theme, I’m going back to here, doing what you said works only in the first ones, because it works with an infinite scroll... but I’ll try, if I’m not mistaken I tried it with div... I had thought of by div as a variable and each post would be "div"+a+1, for example, so I would stay, div1, div2... and use a for i<a... I think I understood, but it will only work in the first ones too...

  • I believe that what is needed is to make that when you load more post, the function is triggered, it is possible?

1 answer

1

Thank you so much for the help, I discovered the problem, I was picking up class, so the result is a list and the right one would be like this:

<script type="text/javascript" charset="utf-8">
    var imgm = document.getElementsByClassName('image');
    var txt = document.getElementsByClassName('text');
    function control(mostra) {
    if(mostra == "all"){
        for (var i=0;i<imgm.length;i+=1){
        imgm[i].style.display = 'block';
    }
    for (var i=0;i<txt.length;i+=1){
        txt[i].style.display = 'block';
    }
}else if(mostra == "image"){
    for (var i=0;i<imgm.length;i+=1){
        imgm[i].style.display = 'block';
    }
    for (var i=0;i<txt.length;i+=1){
        txt[i].style.display = 'none';
    }
}else{
    for (var i=0;i<imgm.length;i+=1){
        imgm[i].style.display = 'none';
    }
    for (var i=0;i<txt.length;i+=1){
        txt[i].style.display = 'block';
    }
}
}

  • Still only the first ones, I put here to test: http://exage-rado.tumblr.com/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.