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.
ReplyDeleteGood Job Srinivas
ReplyDeleteI Like it....
Request Tutorial:
Auto Suggestion when type @ in TextArea like in NewTwitter
It's Cool//
Thanks
@Anton Junaidi
ReplyDelete@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.
ReplyDeletereally ultimate :)
ReplyDeleteCool post like usually :D
ReplyDeletethanks a lot srivinas :)
Gud Wrk Srinivas Keep It up
ReplyDeletei wanna ask how can i add data :) ,,, I'm new in web design
ReplyDelete@Hamado
ReplyDeleteI 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.
ReplyDeleteI've attached this example to help explain what I mean:
http://screencast.com/t/1xi0oci92X
Thank you Srinivas
ReplyDeleteI apologize. I didn't read the whole tutorial before posting. Looks like you're one step ahead of me :)
ReplyDeleteSorry 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.
ReplyDelete@srinivas
ReplyDeleteThanks.. 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
ReplyDeletei well waiting the post part 2
Thanks a lot srivinas, it was exaclty what I'm looking for. You save my night.
ReplyDeleteNice dude.....
ReplyDeleteWow, great srinivas.....
ReplyDeletethanks..
awesome post
ReplyDeleteNot work in ie6 :(
ReplyDeletevery interestin, i am gonna use it.
ReplyDeletethanks
I don't understand how we add separate content to each opening panel??
ReplyDeleteGreat post, I was actually looking at doing something like this in my next project.
ReplyDeleteAny 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?
ReplyDeleteEither way, great post.
This is a very nice concept. love it!
ReplyDeleteNot Work in IE6,7. How to fix?
ReplyDeleteIE is DEAD
ReplyDeleteHi Srinu,
ReplyDeleteVery 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.
ReplyDeleteThanks for example. Spain
ReplyDeleteIn the CSS, what the purpose of declaring position twice in .panel?
ReplyDeleteHelp Me Please!!!!
ReplyDeleteThis 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 [email protected]
wew...like a door can open and close...hohohoho
ReplyDeleteits a cool
Awesome!!!
ReplyDeleteHi srini,
ReplyDeleteI 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
ReplyDeleteThanks for u r information
ReplyDeleteits 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.
ReplyDeleteOnly reason I can see position being in this example twice to to show how position:relative will contain position: absolute.
Hi There,
ReplyDeletequick question...what software are you using to create the images?
Hello Srinivas,
ReplyDeleteFirst 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
ReplyDelete<div class='right'>
<div class='rightdata'>
//right side data here
</div>
// javascript
(".rightdata").hide()
and
(".rightdata").show()
</div>
@Srinivas
ReplyDeleteThanks :), keep up the good work
good stuff!
ReplyDeleteI am getting a 404 for the Demo page. Any idea why?
ReplyDeletetrust 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?
ReplyDeletehehehe can't believe this, I instantly found this solution, thanx to Srinivas
ReplyDeleteAnna super.. chala bagundi.. keep going
ReplyDeleteanna.. can you plz explain this code..i am unable to understand...
ReplyDeletepanel.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:
ReplyDeleteif( parseInt(panel.css('left'),0) == 0 )
left += +panel.outerWidth();
else
left = 0;
hope this help
Hi, nice tutorial, I have a question:
ReplyDeleteWhy 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.
ReplyDeleteYou 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??
ReplyDeleteHow would you make it so you can replace #1 with thumbnail image and slide out to bigger image on the right side?
ReplyDeleteDisplaying 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 :)
ReplyDeletedoes anyone know how to make it so the right slide out, slides down instead of to the right?
ReplyDelete@Dave
ReplyDeleteAny 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.
ReplyDeleteHow do you make the panel come out of hiding if the left panel is smaller?
Thanks
nice script man two thumbs up
ReplyDeleteThank You Srinivas
ReplyDeleteHow 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.
ReplyDelete+
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
ReplyDeleteHi,
ReplyDeleteGreat 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...
ReplyDeletehow 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
ReplyDeletefirst 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:)
ReplyDeleteMany Thanks for the code. Very Useful, Saved my countless number of hours :)
ReplyDeleteThanks ^^
ReplyDeletehow about new twitter timeline sir....
ReplyDeletewhen 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?
ReplyDeleteHOw to load the fields in panel from my sql database at runtime
ReplyDeleteThats 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.
ReplyDelete@shrini how to make the right side scrollable ?
ReplyDeletepls do that when the content is more ...pls paste a small code for that pls
Thanks ^^
ReplyDeleteThank you very much
ReplyDeleteVery Nice Tutorial !
ReplyDelete