New Twitter Design Expanding URLs with Jquery, Ajax and PHP
Wall Script
Follow Me:
Thursday, October 21, 2010

New Twitter Design Expanding URLs with Jquery, Ajax and PHP

My last post explained about New Twitter design basic layout with CSS and Jquery. In this post I want to explain how to expand URLs like new Twitter user interface using jquery, ajax and PHP. It is very easy just implementing with oembed jquery media plugin. Take a look at this demo link.

New Twitter Design

Download Script     Live Demo

Database
MySQL messages table contains two columns msg_id and message
CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);

New Twitter Design CSS layout

Index.php
Contains simple HTML and PHP code. In left class contains messages table records.
<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">// Message id</div>
<div class="final">// Message </div>
<div class="expand_box">// Expanding URL area</div>
</div>
</div>

//Left Part
<div class="left">
// Message display here
<?php
include('db.php');
include('tolink.php');
$sql=mysql_query("select msg_id,message from messages order by msg_id desc");
while($row=mysql_fetch_array($sql))
{
$id=$row['msg_id'];
$message=$row['message'];
$message=tolink($message); // tutorial link click here
?>
<div class="block" id="<?php echo $id;?>">
<?php echo $message;?&gt;
</div>
<?php
}
?>
</div>


Javascript
$(".block").click(function(){})- block is the class name of DIV tag. Using $(this).attr('id') - calling DIV tag ID value and $(this).html() - calling DIV tag data. Here you have to include jquery.oembed.js plugin download link
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

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

function expanding_url()
{
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "newtwitterajax.php", // Expanding URL
data: dataString,
cache: false,
success: function(data)
{
$('#expand_box').show();
$('#expand_box').html(data);
}
});
}

//---------------------------------

if(data_id==id)
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
//--------------------------------
if(panel_width=='341px')
{
$('#expand_box').hide();
}
else
{
expanding_url();
}
//--------------------------------
}
else
{
expanding_url();
// 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});
$('#expand_box').hide();
return false;
});

});
</script>

newtwitterajax.php
Contains PHP and javascript code. Here calling message record from messages table where msg_id = .block id and calling oembed JavaScript function. If you want to display more details about message(Retweet information) write your code.
<?php
include('db.php');
if($_POST)
{
$id=$_POST['id'];
$sql=mysql_query("select message from messages where msg_id='$id'");
$row=mysql_fetch_array($sql);
$message=$row['message'];
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#expand_url<?PHP echo $id; ?>").oembed("<?php echo $message; ?>", {maxWidth: 300, maxHeight: 200});
});
</script>
<div id='expand_url<?php echo $id; ?>' ></div>
<?php
}
?>

CSS
.data
{
font-size:16px;
display:none;
}
.final
{
overflow:hidden;
padding:20px;
font-size:24px;
}
#expand_box
{
position:relative;
position:absolute;
padding-left:30px;
}
#expand_box img { width:250px; }

db.php
PHP database configuration file
<?php

$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


31 comments:

  1. Cool .. convert link on the fly :D

    ReplyDelete
  2. kindly look at d design in IE 7.. it sucks

    ReplyDelete
  3. Hi Srinivas

    I have tested this script in IE7 and IE6. The floating window is not appearing as expected.

    Thanks

    ReplyDelete
  4. I have a Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource here:

    while($row=mysql_fetch_array($sql))

    How can i fix it :(?

    ReplyDelete
  5. I have found the error:

    $sql=mysql_query("select msg_id,message from messages where order by msg_id");

    Bye "where"

    $sql=mysql_query("select msg_id,message from messages order by msg_id");

    Greetings ^^

    ReplyDelete
  6. IE is the only thing under 10 that michael jackson didn't get his hands on.

    ReplyDelete
  7. Demo Modification @Danilo Thanks!

    $sql=mysql_query("select msg_id,message from messages where order by msg_id");

    Bye "where"

    $sql=mysql_query("select msg_id,message from messages order by msg_id");

    ReplyDelete
  8. its a cool...
    thumbsup...
    we...ee...eee...^^

    ReplyDelete
  9. Will the picture is how to design? Use what software?

    ReplyDelete
  10. great one ! Thanks for sharing. I have added this code to fix the IE 7 issue.... agree that IE is dead but few clients still using and can not go back and tell them "IE is the only thing under 10 that michael jackson didn't get his hands on." like PuaHate suggested :-)

    ReplyDelete
  11. Hello, what is the code tolink.php file?

    ReplyDelete
  12. This is awesome. Just wondering how to make the block active when the slider is open and inactive with it closes. Maybe an addClass().

    ReplyDelete
  13. How can I expand the panel´s width? Doing in the CSS makes a problem with the open/close effect.
    Help!

    ReplyDelete
  14. This is awesome. Just wondering how to make the block active when the slider is open and inactive with it closes? Maybe an addClass().

    ReplyDelete
  15. This is awesome. Just wondering how to make the block active when the slider is open and inactive with it closes? Maybe an addClass().

    Could someone solve this problem?

    Pleaseeeeee :P

    ReplyDelete
  16. yep... you can do that with an addClass and removeClass used acordingly

    ReplyDelete
  17. How can we add a loader.gif while opening the data on the window?


    thanks

    ReplyDelete
  18. It's cool but there is no infinite scroll implemented...for example

    ReplyDelete
  19. oembed jquery for jquery 1.4.4

    On line 200:

    var oembed = $.extend(data);

    You could just write

    var oembed = data;

    as the $.getJSON already returns a js object.

    Leeas =)

    ReplyDelete
  20. Srinivas,

    To learn more about using jquery, whats the reason for not working in IE7, for example? Is it because a part of the code? Which? I would like to understand why,meven knowing that IE is dead.

    Thanks from Brasil and your blog is the best!

    ReplyDelete
  21. how do i add data to the sql bases

    ReplyDelete
  22. i've found error like this :
    Fatal error: Call to undefined function tolink() in C:\xampp\htdocs\test\9lessons\NewTwitter_Expand\index.php on line 241

    i think you missed "tolink" function

    ReplyDelete
  23. @Budi

    To_link function available here

    http://www.9lessons.info/2009/09/urls-as-links-with-regular-expressions.html

    ReplyDelete
  24. Hi, i am trying to implement the twitter load more link with this script but once you load more it does not allow me to expand the new div's loaded.

    regards

    ps. great work

    ReplyDelete
  25. As I see only Vimeo video display, youtube and others DO not is it any error or it was not made wor youtube and etc ... ?

    ReplyDelete
  26. I GET THIS ERROR CAN ANYONE HELP ME.



    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/content/42/8839342/html/twitter/index.php on line 236

    ReplyDelete

Make in India