"More" button style Twitter
Page 1 of 2
In this article I will explain how to recreate the effect of "More" button to Twitter using the jQuery library.
The button that we want to recreate, for the uninitiated, allows you to extend the list of messages displayed by default without any need to refresh the page (which is possible thanks to Ajax technology increasingly used in environments of Web 2.0).
We start by creating a test database consists of a single table:
CREATE TABLE posts ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Message Text );As you can see the table you just built is composed of only two fields:
- msg_id which will identify the message;
- and message that contains the text;
For my convenience I created a php file (which I will use in the inclusion) in which I make only the connection to the database and I called it "dbconfig.php"
<? Php
$ Conn = mysql_connect ("HOST", "USERNAME" "PASSWORD") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
As mentioned the file "dbconfig.php" will be included in the files we create, so as not to rewrite the same code multiple times.
To perform the effect you need to create two files:
- the first used for the display of the first "n" messages;
- and a second that will be made ajax requests (implemented with jQuery) to display the "next message".
<html>
<head>
More <title> Button Twitter style </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. More'). Click (function () {
var element = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton'). Html ('<img src="loading.gif" />');
$. Ajax ({
type: 'POST',
url: 'more_ajax.php',
date: 'lastmsg =' + msg,
cache: false,
success: function (html) {
$ ('# Morebutton'). Remove ();
$ ('# More_updates'). Append (html);
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
include ('dbconfig.php');
$ Sql_check = mysql_query ("SELECT * FROM order by more msg_id DESC LIMIT 2");
while ($ row = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['message'];
?>
<Div id = "<? Php echo $ msg_id;?>" Class = "boxMsg">
<span style="padding:5px;"> <? php echo $ msg;?> </ span>
</ Div>
<? Php
}
?>
<div id="more_updates"> </ div>
<div id="morebutton"> <a id = "<? php echo $ msg_id;?>" class = "more" href = "#"> More </ a> </ div>
</ Div>
</ Body>
</ Html>
As you can see after viewing the first 2 posts (sorted by "msg_id" in descending order), there is an empty div with id "more_update" (there will be "packed" the next message) and a div that represents the next link "More" to which we associate - a method of using jQuery - the action request messages.
Header (<head> ...</ head>) of the document, after calling the jQuery library, we described the javascript function associated with the link "More" (this function is called with the ' click event ).
With this function taken from the "id" of the link identifier ("msg_id") displays the last message, this identifier is sent to the second php file as a parameter after the ajax request , meanwhile, replace the contents of the div container link "More" with a beautiful animated gif with effect "loading" , just to kill time.
If the ajax request was successful (success of the application property) we remove all the div "morebutton" and insert the HTML response (containing other messages) in the container div "more_update" using the append .
 |
ASP Zero (Ebook)
Learning Microsoft ASP and VBScript from scratch. At only 29 €. |
 |
Javascript (Course)
Complete guide to client-side scripting. From 39 €. |
 |
PHP (Course)
Full course for creating dynamic Web sites. From 49 €. |