CODEWITHSUNDEEP
javascriptcssanimationgoogle-plus
amiry jd
amiry jd

Reputation: 27585

Google+ like border

I want to understand how Google+'s stream items border-left works? Can every body explain it or suggest any link and/or article?

More: When you focus on a stream, you'll see that the left-border of stream gone to blue, and when you focus on another stream, the border will animate to new focused item.

  1. focus on element a
  2. a's left-border gone to blue
  3. focus on element b
  4. the blue-border animate to element b's left-border

Thanks to any suggestion.

Upvotes: 3

Views: 328

Answers (5)

ThinkingStiff
ThinkingStiff

Reputation: 65351

Here's one if you don't want to use jQuery and only target the latest browsers.

Demo: http://jsfiddle.net/ThinkingStiff/9UUb9/

HTML:

<div id="posts-frame">
    <div id="highlight"></div>
    <ul id="posts">
        <li class="post">post one</li>
        <li class="post">post two</li>
        <li class="post">post three</li>
        <li class="post">post four</li>
    <ul>
</div>

CSS: 

#highlight {
    border-left: 1px solid #4D90F0;    
    height: 0;
    margin-left: 1px;
    position: absolute;
    top: 0;
    transition:             top 200ms ease, height 200ms ease;
        -moz-transition:    top 200ms ease, height 200ms ease;
        -ms-transition:     top 200ms ease, height 200ms ease;
        -o-transition:      top 200ms ease, height 200ms ease;
        -webkit-transition: top 200ms ease, height 200ms ease;
}

.post {
    border: 1px solid lightgray;
    display: block;
    height: 45px;
    padding-left: 4px;
}

.post:nth-child( 2 ) {
    height: 70px;    
}

#posts {
    padding: 0;
    margin: 0;  
    width: 400px;
}

#posts-frame {
    position: relative;       
}

Script:

function selectPost( event ) {

    var highlight = document.getElementById( 'highlight' );
    highlight.style.height = event.target.clientHeight + 'px';
    highlight.style.top = ( event.target.offsetTop + 1 ) + 'px';

};

document.getElementById( 'posts' ).addEventListener( 'click', selectPost, false);

Upvotes: 2

Pierre
Pierre

Reputation: 19071

there you go: http://dev.pierre-cholhot.com/gplus-border.html

Upvotes: 5

Ernest
Ernest

Reputation: 8829

If you look at HTML and CSS code, you will see that blue border is defined by hr CSS class. When you click specific stream post, JavaScript will add hr class to this <div>. Here comes the fun part. When you click on another <div> few things will happen:

  • hr class will be removed from previous stream post
  • A new <div> will added to the bottom of a page, it looks like this:

<div class="rh kA" style="left: 0px, top: 73px, width: 572px, height: 318px;"></div>

  • So this newly created div tag will have the position and size of previous... em... div.
  • JavaScript is now in control, changing the top CSS property, until it will match position of currently clicked post. The height of div is also changed. This part gives you "animation".
  • hr class is now added to new (clicked) stream post.
  • The div that was responsible for animation is deleted from DOM (or hidden).

Of course this all may be wrong, I just know it from playing with Firebug for a while, and so I advise it to you :)

Upvotes: 1

abraham
abraham

Reputation: 47843

Google+ adds the blue border on selected posts by listening for clicks within the outer div. When a click happens the highlight class is removed from the previously highlighted item and added to the current item. The class will add a border width/color/style to the side you want highlighted.

Upvotes: 0

Jared
Jared

Reputation: 6025

This is probably using CSS transitions and the :focus pseudo-class.

Upvotes: 0

Related Questions