New Twitter Design with CSS and JQuery.
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;
}

Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


75 comments:

  1. Good Job Srinivas
    I Like it....

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

    Thanks

    ReplyDelete
  2. @Anton Junaidi

    @Tag Friends with Jquery, Ajax and PHP

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

    ReplyDelete
  3. Good Post.. Nice use of jquery and css.

    ReplyDelete
  4. Cool post like usually :D

    thanks a lot srivinas :)

    ReplyDelete
  5. Gud Wrk Srinivas Keep It up

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

    ReplyDelete
  7. 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

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

    ReplyDelete
  9. 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.

    ReplyDelete
  10. @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...

    ReplyDelete
  11. Thanks @Srinivas

    i well waiting the post part 2

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

    ReplyDelete
  13. Wow, great srinivas.....

    thanks..

    ReplyDelete
  14. Not work in ie6 :(

    ReplyDelete
  15. very interestin, i am gonna use it.
    thanks

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

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

    Any idea when part 2 will be up?

    Thanks!

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

    Either way, great post.

    ReplyDelete
  19. This is a very nice concept. love it!

    ReplyDelete
  20. Not Work in IE6,7. How to fix?

    ReplyDelete
  21. 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.

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

    ReplyDelete
  23. 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

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

    ReplyDelete
  25. 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

    ReplyDelete
  26. Thanks for u r information

    its very useful

    ReplyDelete
  27. @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.

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

    ReplyDelete
  29. 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

    ReplyDelete
  30. @Ben

    <div class='right'>

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

    // javascript

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

    </div>

    ReplyDelete
  31. @Srinivas

    Thanks :), keep up the good work

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

    ReplyDelete
  33. 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?

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

    ReplyDelete
  35. Anna super.. chala bagundi.. keep going

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

    ReplyDelete
  37. @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

    ReplyDelete
  38. 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.

    ReplyDelete
  39. 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/

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

    ReplyDelete
  41. 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

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

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

    ReplyDelete
  44. @Dave

    Any screen shot or wire-frame

    ReplyDelete
  45. 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

    ReplyDelete
  46. nice script man two thumbs up

    ReplyDelete
  47. 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

    ReplyDelete
  48. 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

    ReplyDelete
  49. great...

    how to integrate this with a bootstrap template?

    so when screen is mobile this will also work?

    thanks

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

    ReplyDelete
  51. 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:)

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

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

    ReplyDelete
  54. 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?

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

    ReplyDelete
  56. 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.

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

    ReplyDelete

Make in India