9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, October 11, 2010

New Twitter Design with CSS and JQuery.

The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Take a look at this awesome demo.

New Twitter Design

Download Script     Live Demo

Step 1
First create a DIV element with attribute ID value container. The layar contains of two DIV elements attribute class values right and left.
New Twitter Design
<div id='container'>
<div class='right'></div>
<div class='left'></div>
</div>

Step 2
Now create a panel-frame DIV element inside the container DIV. This layer contain a DIV element attribute class value panel (sliding or rolling).
New Twitter Design
<div id='container'>
<div class='right'></div>
<div id="panel-frame">
<div class="panel"></div>
</div>
<div class='left'></div>
</div>

Step 3
Here the final HTML code ready. Now using jQuery to sliding or rolling the <div class='panel'>...</div>
HTML Code
<div id='container'>
// Right part
<div class='right'>
</div>

<div id="panel-frame">
<div class="panel">
<div class="head"> <a href="#" class="close">Close</a></div>
<div class="data">
// jquery id
</div>
</div>
</div>

//Left Part
<div class="left">
// Message display here
<div class="block" id="1">1</div>
<div class="block" id="2">2</div>
...............................
...............................
</div>

</div>
New Twitter Design
Javascript
$(".block").click(function(){})- block is the class name of DIV tag. Using $(this).attr('id') - calling DIV tag ID value.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$('.block').click(function()
{
var id= $(this).attr('id'); // .block ID
var data_id= $(".data").html(); // .data DIV value
var panel= $('.panel');
var panel_width=$('.panel').css('left'); // rolling panel width


if(data_id==id)
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
}
else
{
// panel width CSS width:340px + border:1px = 341px
if(panel_width=='341px')
{
// No rolling animation
}
else
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
}
}
// passing id value to <div class='data'$gt; </div>
$('.data').html(id);
return false;
});

// panel close link
$('.close').click(function()
{
var panel= $('.panel');
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
return false;
});

});
</script>

CSS
#container
{
width:700px;
margin:0 auto;
background-color:#ffffff;
min-height:500px;
overflow:auto;
-moz-border-radius:5px;
-webkit-border-radius:6px;
border:solid 1px #999999;
}
.left
{
float:left;
background-color:#fff;
width:350px; min-height:300px;
position:relative;
}
.right
{
float:right; width:350px;
}
#panel-frame
{
position:relative;
max-width:700px;
position:fixed;
}
.panel
{
background-color:#f2f2f2;
width:340px;
height:550px;
margin-top:20px;
position:relative;
position:absolute;
border:solid 1px #999999;
border-left:0px;
left:0;
}
.head
{
background-color:#ffc72e;
padding:10px;
text-align:right;
}

Comments
{ 73 comments }
Kathir said...

Nice tutorial.

Anton Junaidi said...

Good Job Srinivas
I Like it....

Request Tutorial:
Auto Suggestion when type @ in TextArea like in NewTwitter
It's Cool//

Thanks

Srinivas Tamada said...

@Anton Junaidi

@Tag Friends with Jquery, Ajax and PHP

http://www.9lessons.info/2010/08/tag-friends-with-jquery-ajax-and-php.html

Amit said...

Good Post.. Nice use of jquery and css.

karthikeyan said...

really ultimate :)

Buzzknow said...

Cool post like usually :D

thanks a lot srivinas :)

Sathish said...

Gud Wrk Srinivas Keep It up

HaMaDo said...

i wanna ask how can i add data :) ,,, I'm new in web design

Srinivas Tamada said...

@Hamado

I will publish part-2 .

Jared said...

Srinivas, great tutorial as always. Think it would be possible to add a unique URL identifier per container? I'd love to have #3 open, for example, and be able to send a link that would directly open #3.

I've attached this example to help explain what I mean:
http://screencast.com/t/1xi0oci92X

Farid S said...

Thank you Srinivas

Jared said...

I apologize. I didn't read the whole tutorial before posting. Looks like you're one step ahead of me :)

Anonymous said...

Sorry to say but the animation is clunky at best. The new layout is quite good but I don't like the default color theme. The left and right panels are handy, though.

Anton Junaidi said...

@srinivas

Thanks.. Cool
but... not work in mozilla ...
Why you use ContentEditable ..???
you should use TextArea like newTwitter...

0y....
Request Tutorial: Creating a Chat Application on Mobile Phone (Symbian)......
Thanks...

HaMaDo said...

Thanks @Srinivas

i well waiting the post part 2

Anonymous said...

Thanks a lot srivinas, it was exaclty what I'm looking for. You save my night.

Nelson said...

Nice dude.....

IzC said...

Wow, great srinivas.....

thanks..

fine art shipping said...

awesome post

Anonymous said...

Not work in ie6 :(

Elamurugan said...

very interestin, i am gonna use it.
thanks

Webby said...

I don't understand how we add separate content to each opening panel??

mark said...

Great post, I was actually looking at doing something like this in my next project.

Any idea when part 2 will be up?

Thanks!

Anonymous said...

This would be awesome if the content on the right got loaded using ajax. Maybe a part 3 idea?

Either way, great post.

racase said...

This is a very nice concept. love it!

Anonymous said...

Not Work in IE6,7. How to fix?

Srinivas Tamada said...

IE is DEAD

Anil Kumar Panigrahi said...

Hi Srinu,

Very Nice script :)

Robert said...

oooh i want the next lesson sooo much. How i fill it with content. Idea, anyone? I can´t work with just the #id's.

Eduardo said...

Thanks for example. Spain

Darren said...

In the CSS, what the purpose of declaring position twice in .panel?

Anonymous said...

Help Me Please!!!!


This script is greats, but i need invert direction of slide panel and show panel from right to left!

Please, helpme is urgent!!!

Thanks to all!!!

My email is avalos.ricardo@gmail.com

Beben said...

wew...like a door can open and close...hohohoho
its a cool

Chada said...

Awesome!!!

Elamurugan said...

Hi srini,

I have made a same ui using your idea.

Please take a look at this.

http://hostingcouponz.com/twitter-like-ui-expand-url-using-php-and-jquery/


and comment me please

learnersreference com said...

awesome srini...brilliant explanation

Anonymous said...

Thanks for u r information

its very useful

Josh Minnich said...

@Darren: I think having position twice in the CSS is a typo. The example will still work because postion: absolute will overwrite the position: relative declaration.

Only reason I can see position being in this example twice to to show how position:relative will contain position: absolute.

jciocci said...

Hi There,
quick question...what software are you using to create the images?

Ben said...

Hello Srinivas,
First of all thanks for sharing your knowledges, it is very appreciated.

I have a question regarding the right column, how is it possible to hide the content when the door is sliding (like Twitter actually do it)?

Have a good day,
Ben

Srinivas Tamada said...

@Ben

<div class='right'>

<div class='rightdata'>
//right side data here
</div>

// javascript

(".rightdata").hide()
and
(".rightdata").show()

</div>

Ben said...

@Srinivas

Thanks :), keep up the good work

simboyz said...

good stuff!

saptarshi said...

I am getting a 404 for the Demo page. Any idea why?

Rob said...

trust me, i hate ie, but I want to use this in a promotion on our site, @Srinivas or anyone else, do you know what's causing the issue is IE?

Anonymous said...

hehehe can't believe this, I instantly found this solution, thanx to Srinivas

Mihir said...

Anna super.. chala bagundi.. keep going

Mihir said...

anna.. can you plz explain this code..i am unable to understand...
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});

SkyintheSeA Duc said...

@Mihir: that's a shortcut of using" if else " in programming. I think it'd be clearer if you see it like this:
if( parseInt(panel.css('left'),0) == 0 )
left += +panel.outerWidth();
else
left = 0;

hope this help

Hi said...

Hi, nice tutorial, I have a question:
Why do you add two positions (relative, and fixed) for "div#panel-frame" and (relative, and absolute) for "div.panel" I know that the browser reads only the last added one.

..I also have a suggestion:
How about adding a resizer based on window size, like twitter, when you resize the window, the box become smaller or bigger based on the browser's window size. That would be a great addition.

Arif said...

nice tutorial.
You can use my jquery plugin for twitter like restriction in text box.
http://learneveryday.net/jquery/plugins/twitter-like-textboxs-text-restriction-and-disable-submit-button-with-jquery/

arief nur said...

what is the meaning two position in one class?? does not only the last one would effect??

Anonymous said...

How would you make it so you can replace #1 with thumbnail image and slide out to bigger image on the right side?

Displaying thumbnail is easy but getting the bigger image to show in id=1 is tough. Probably simple to tough for me

NameCo said...

Do you have PHP and CSS will help you guys? message recording system? Thanks :)

Dave said...

does anyone know how to make it so the right slide out, slides down instead of to the right?

Srinivas Tamada said...

@Dave

Any screen shot or wire-frame

Andrew said...

How do you hide behind a smaller panel? Like if the right panel is bigger (in width size) than the left panel? I can only think of .hide() and .show() but in my head, it will come out of hiding from the width set which won't look like its coming out from behind the smaller panel.

How do you make the panel come out of hiding if the left panel is smaller?

Thanks

Anonymous said...

nice script man two thumbs up

Adhie said...

Thank You Srinivas

Anonymous said...

How about adding a resizer based on window size, like twitter, when you resize the window, the box become smaller or bigger based on the browser's window size. That would be a great addition.

+

will wait second titorial based on this script, do not understand how to add information to right side

neki chan said...

Cool! Can't wait to try it :D

Anonymous said...

Hi,

Great work - quick question:
How do we make the panel moving to the right to be aligned with the element, as currently for me when i click on an element it opens but all the way at the top of the page.

Any help would be appreciated.
Thanks

Anonymous said...

great...

how to integrate this with a bootstrap template?

so when screen is mobile this will also work?

thanks

Srinivas Tamada said...

I'm going to publish a tut about application design using bootstrap

Anoop D S said...

first of al tel thank 4 this code....you people did the good job.i need som information about this code.Actualy i convert php 2 jsp and the code a working only in chrome not in other browser can u help me:)

Jagan Krishnaraj said...

Many Thanks for the code. Very Useful, Saved my countless number of hours :)

Anonymous said...

Thanks ^^

Ari Julianto said...

how about new twitter timeline sir....
when the status clicked, they expand below

Emma said...

How would this work using responsive css like bootstrap? Would this function still work. Also, how to do animate your images. That is awesome. Was this a psd that you animated?

Suresh Chaudhari said...

HOw to load the fields in panel from my sql database at runtime

kyle11 said...

Thats pretty cool but i have one question how do i post other data and content in the right hand box through php . And not just common data for all, respective data for each different right panel with different id's.

Shiva Surya said...

@shrini how to make the right side scrollable ?
pls do that when the content is more ...pls paste a small code for that pls

webdesign said...

Thanks ^^

Post a Comment