Read more using javascript

Posted in: javascript by musiitwa joseph 2014-12-06 at 20:47:47

image for Read more using javascript Read more can be used when you want to show part of the content from the database. It has four files: readmore.php, readmore.js, readmore.css and index.php

<?php

function readmore($string, $more, $less, $character_numbers, $id){
/*
$string - the lengthy message you want to be altered by this function
$character_numbers - the numbers of characters you want to display
$id - mostly used when looping for example when you are fetching values from the database
$more - word to show before showing more
$less - word to show after showing less
*/
if(strlen($string) > $character_numbers ){
$string_reduced = substr($string,0,$character_numbers);
$string_in_func = "";
$string_in_func .= '<span id="reduced'.$id.'">'.$string_reduced.'...</span>';
$string_in_func .= '<a href="#" id="all'.$id.'" class="link" onclick="all_less(''.$id.'');return false;">'.$more.'</a>';
$string_in_func .= '<span id="'.$id.'" class="more">';
$string_in_func .= '<span>'.$string.'</span>';
$string_in_func .= '
<a href="#" class="link" onclick="all_less(''.$id.'');return false;">'.$less.'</a></span>';

}
else
$string_in_func = $string;

return $string_in_func.'';
}

?>




readmore.js

//function to get any element by its id
function _(x){
return document.getElementById(x);
}

function all_less(ID){
//this function take in a parameter ID, used to show less or more at the quote clicked
if (_('all'+ID).style.display != 'none') {//checking if all the content is displaying
_('all'+ID).style.display = 'none';
_('reduced'+ID).style.display = 'none';
_(ID).style.display = 'inline';
}
else{
_('all'+ID).style.display = 'inline';
_(ID).style.display = 'none';
_('reduced'+ID).style.display = 'inline';
}

}


readmore.css

..container{
width:100%;
max-width:500px;
margin:auto;
}
.quote_section{
border-radius:5px;
box-shadow:0 0 8px #000;
background-color:#F7F7F7;
margin:15px 5px;
padding:10px;
}
.more{
display: none;
}

a.link:hover{
color:#F00;
}


index.php

this uses the files above

<?php
// including the readmore function on the index page
include("readmore.php");

//connecting to the database
//takes in 4 parameters: server, username, password and databasename
$connect = mysqli_connect("localhost","root","","demo");

//checking if there is successful connection to database
if(mysqli_connect_error())
die("Database connection failed");

?>
<html lang="en">
<head>
<title>Read more</title>
<link type="text/css" rel="stylesheet" href="readmore.css">
<script type="text/javascript" src="readmore.js"></script>
</head>
<body>
<div style="text-align:center"><h2>QUOTES</h2></div>
<div class="container">
<?php
$uid = 0;

//selecting the data from the database
$select = mysqli_query($connect,"select description from quotes");
while($row = mysqli_fetch_assoc($select)){
?>
<div class="quote_section">
<?php
/*
FUNCTION CALL
the function take in 4 parameters
$uid is incremented since we have to give each quote a unique id
if you are using read more for once, just assign the fourth parameter any integer
*/
echo readmore($row['description'], "Read more", "less", 100, ++$uid);
?>
</div>
<div class="clear"></div>
<?php } ?>
</div>

</body>
</html>



Also the database file is attached within the download
Tags:
css
html
mysqli
php
Related Posts


Search

Comments(2)


Flustration on downloading the code

from: alonzee at: 2015-05-01 , 10:54:11 AM

Sorry... You wanted to click the download link and...Read moreSorry... You wanted to click the download link and downloading starts there and then? Due to small storage space, we decided to upload files for downloading on another site.
less

from: Musiitwa Joseph at: 2015-05-03 , 03:06:52 AM


Leave a comment

Fields with * are required
Your email address will not be displayed
4 + 3 =