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.
Download Script 
Live DemoStep 1
First create a DIV element with attribute ID value container. The layar contains of two DIV elements attribute class values right and left.
<div id='container'>
<div class='right'></div>
<div class='left'></div>
</div>
<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).
<div id='container'>
<div class='right'></div>
<div id="panel-frame">
<div class="panel"></div>
</div>
<div class='left'></div>
</div>
<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>
// 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>
$(".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>
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;
}
{
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;
}
Nice tutorial.
Good Job Srinivas
I Like it....
Request Tutorial:
Auto Suggestion when type @ in TextArea like in NewTwitter
It's Cool//
Thanks
@Anton Junaidi
@Tag Friends with Jquery, Ajax and PHP
http://www.9lessons.info/2010/08/tag-friends-with-jquery-ajax-and-php.html
Good Post.. Nice use of jquery and css.
really ultimate :)
Cool post like usually :D
thanks a lot srivinas :)
Gud Wrk Srinivas Keep It up
i wanna ask how can i add data :) ,,, I'm new in web design
@Hamado
I will publish part-2 .
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
Thank you Srinivas
I apologize. I didn't read the whole tutorial before posting. Looks like you're one step ahead of me :)
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.
@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...
Thanks @Srinivas
i well waiting the post part 2
Thanks a lot srivinas, it was exaclty what I'm looking for. You save my night.
Nice dude.....
Wow, great srinivas.....
thanks..
awesome post
Not work in ie6 :(
very interestin, i am gonna use it.
thanks
I don't understand how we add separate content to each opening panel??
Great post, I was actually looking at doing something like this in my next project.
Any idea when part 2 will be up?
Thanks!
This would be awesome if the content on the right got loaded using ajax. Maybe a part 3 idea?
Either way, great post.
This is a very nice concept. love it!
Not Work in IE6,7. How to fix?
IE is DEAD
Hi Srinu,
Very Nice script :)
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.
Thanks for example. Spain
In the CSS, what the purpose of declaring position twice in .panel?
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
wew...like a door can open and close...hohohoho
its a cool
Awesome!!!
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
awesome srini...brilliant explanation
Thanks for u r information
its very useful
@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.
Hi There,
quick question...what software are you using to create the images?
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
@Ben
<div class='right'>
<div class='rightdata'>
//right side data here
</div>
// javascript
(".rightdata").hide()
and
(".rightdata").show()
</div>
@Srinivas
Thanks :), keep up the good work
good stuff!
I am getting a 404 for the Demo page. Any idea why?
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?
hehehe can't believe this, I instantly found this solution, thanx to Srinivas
Anna super.. chala bagundi.. keep going
anna.. can you plz explain this code..i am unable to understand...
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
@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, 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.
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/
what is the meaning two position in one class?? does not only the last one would effect??
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
Do you have PHP and CSS will help you guys? message recording system? Thanks :)
does anyone know how to make it so the right slide out, slides down instead of to the right?
@Dave
Any screen shot or wire-frame
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
nice script man two thumbs up
Thank You Srinivas
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
Cool! Can't wait to try it :D
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
great...
how to integrate this with a bootstrap template?
so when screen is mobile this will also work?
thanks
I'm going to publish a tut about application design using bootstrap
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:)
Many Thanks for the code. Very Useful, Saved my countless number of hours :)
Thanks ^^
how about new twitter timeline sir....
when the status clicked, they expand below
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?