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