How to identify is a blog post has been selected or not?

Question

I am working with a Tumblr blog template in which I need to differentiate between blog articles/posts in their collapsed and expanded state. Specifically, I am trying to apply a CSS property (for border) which must only apply to the blog posts when they are being shown in the grid in the collapsed state and must not apply when the visitor selects the blog to read it further.

This is the change I have made to the template:

    div.posts-holder article:hover
    {
        border: 1px #BDBDBD solid;
        box-shadow: 7px 7px 3px #D8D8D8;
    }

Also, this is how the div.posts-holder looks like (not the complete code, only a snippet to give an idea)

<section class="the-posts">

    <div class="posts-holder
    {block:IndexPage} posts-grid{/block:IndexPage}">


        {block:IndexPage}<div class="grid-sizer"></div>{/block:IndexPage}


        {block:Posts}

        <article id="{PostID}" class="type_{PostType} {TagsAsClasses}" rel="{ReblogURL}">

            <div class="article-content">

Here's a link to a dummy blog I created to illustrate the problem: Example Blog Link Observe that on hover, each blog post gets a shadowed border. I don't need this once I am actually reading one of these posts.

How can I do this using JavaScript or any other technique? Is there a way I can look for the state of the post?

Answer 1

From looking at your example page, the posts-holder div also has a posts-grid class on the grid page, but it doesn't on the pages that only show one article. So you just have to change your CSS hover rule from

div.posts-holder article:hover

to

div.posts-holder.posts-grid article:hover

That way it will only be applied to the articles when they're in a grid.

Answer 2

here is a answer of the main heading of the question:

How to identify is a blog post has been selected or not?

this can be achieve by making an object... just look at this code:

HTML

   <div id="article1" onclick="selected("article1")"> </div>

Javascript

   var click= {};
    var selected = function(a){


          click[a] = "selected";
}

so when ever you want to know that if this div is selected then just check that in click object, is a property named article1 is present or not if true then do stuff else then dont