Thursday, 17 July 2014

Facebook style 'see more' text onclick using php, mysql, Ajax and Javascript

This is little usage in the last exercises, as we talked about in the last exercises, we know how to make insert and fetch data from database without refreshing the page, here I’m going to demonstrate to you that, in case I’m entering more number of information or messages in the field that will be abbreviate and make see more connection, and to concentrate the full perspective of content, we need to make JavaScript shroud and show idea for that, let perceive how I made it, in this. In the event that you need to get clear thought from this you must need to see the past exercise.

Most of them seeking this idea to execute to their particular reason. Here I’m going to reveal to you that, really this is extremely basic strategy. i did here. For this you must need to see the last exercises. Here I’m simply demonstrating to you that how make see more catch that is it.
This idea is basically utilized for going out of flood, for that. Made restricted content just have show in the page and make see more or read more connection for that.
As we discussed in the last tutorial. We have to use 3 files to that, they are

1.                DB.PHP
2.                INDEX.PHP
3.                ACTION.PHP
Here I’m going to make some small changes in the ACTION.PHP alone. Let see the changes

ACTION.PHP

Refer the before tutorial for more file details. And we must have included Jquery min file.
<?php
include('db.php');
$check = mysql_query("SELECT * FROM comment order by id desc");
if(isset($_POST['content']))
{
$content=mysql_real_escape_string($_POST['content']);
$ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
mysql_query("insert into comment(msg,ip_add) values ('$content','$ip')");
$fetch= mysql_query("SELECT msg,id FROM comment order by id desc");
$row=mysql_fetch_array($fetch);
$id=$row['id'];
$cont=$row['msg'];
}
?>
 
<div class="showbox"> <?php echo substr($cont,0,25); ?> 
<?php if (strlen($cont) > 25):?>
<span class="<?php echo $id?>readmore" style="color:red; cursor:pointer;">See More</span>
<span class="<?php echo $id?>more" style="display:none;"><?php echo substr($cont,25); ?></span>
<?php endif; ?>
</div>
 
<script type="text/javascript"> 
$(document).ready(function(){
$(".<?php echo $id?>readmore").click(function(){ 
$(".<?php echo $id?>readmore").hide(); 
$(".<?php echo $id?>more").slideToggle("flash");
  });
});
</script>

Refer the previous tutorial ACTION.PHP file details to get apparent idea in that.  Here I just made small changes in <div class="showbox"> </div>. In the last lesson i just echo the row data in that for small view of all data. Here I’m usingsubstr to show limited text form 0 to 25 letters, and php if condition with strlen for stringlength greater than 25 means make this link else defaulting view.
And you must have to create call from the id so you have make class with the name of id.

For you clear idea. I just made CSS in the same line.

No comments:

Post a Comment