Search code examples
javascripthtmlcsstumblr

displaying a div only on tumblr blog homepage?


I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.

I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.

Here's the code I have, which successfully does not show the div on permalink pages:

{block:IndexPage}
    <div class="mid2">
        <div class="midLeft2">  
            <p>test</p>
        </div>   
    </div>
{/block:IndexPage}  

Any ideas? Any help is much appreciated!


Solution

  • I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:

    <div id="splashbox" class="mid2" style="display:none">
    

    Followed by this script:

    <script type="text/javascript">
    window.onload=showsplashbox();
    function showsplashbox() {
       //alert('location identified as ' + location.href);
       if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
               //alert('location match, show the block');
               document.getElementById('splashbox').style.display='block';
       }
    }
    </script>