After 5 li's prevent anymore from showing and place `…`
so i have a piece of code which displays medals (img's) in a list, my aim is that once 5 li's have shown, to cut off any more thereafter. ( And also if possible display three ellipsis ... to redirect a user to where they can see all of these medals. ) All help is appreciated!
<div id="medals">
<h3 style="text-decoration:underline;">User medals:</h3>
<ul>
<script>
document.getElementById('medals').getElementsByTagName('li').length >= 5 { } // my first guess at starting something like my question off?
</script>
<li>
<img src="images/medals/startup.png" title="<?php echo $profile_data['display_name']; ?> created a profile!" alt="a medal should be here?">
</li> // a medal that all users get
<?php echo base64_decode($profile_data['medals'] // this code displays all medal <li>'s from MySql database); ?>
</ul>
</div>
Answers:
You can use a couple of strpos() with offsets to get the position of the last </li>.
Then use that position to obtain the substring you want.
<div id="medals">
<h3 style="text-decoration:underline;">User medals:</h3>
<ul>
<li>
<img src="images/medals/startup.png" title="<?php echo $profile_data['display_name']; ?> created a profile!" alt="a medal should be here?">
</li> // a medal that all users get
<?php $medalslist = base64_decode($profile_data['medals']; // this code displays all medal <li>'s from MySql database);
$pos = strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>')+5)+5)+5)+5);
echo substr($medalslist, 0, $pos+5); // get position of last </li>
echo '<li><a href="/USERNAME/MEDALS">...</a></li>';
?>
</ul>
</div>
You don't have to use php to echo the last li-Element that links to the medals page, of course. But I thought you'd probably use php to get the username that is probably part of the url, so I put it like that.
If you want to be able to easily change the amount of medals that are displayed, you can use a for loop:
<div id="medals">
<h3 style="text-decoration:underline;">User medals:</h3>
<ul>
<li>
<img src="images/medals/startup.png" title="<?php echo $profile_data['display_name']; ?> created a profile!" alt="a medal should be here?">
</li> // a medal that all users get
<?php $medalslist = base64_decode($profile_data['medals']; // this code displays all medal <li>'s from MySql database);
$pos = 0; // set offset to zero
for($i=0;$i<5;$i++) { // 5 is the number of medals to display
$pos = strpos($medalslist, '</li>', $pos+5); // set offset to right after where the last "</li>" was found - +5 because "</li>" has five characters
};
echo substr($medalslist, 0, ($pos > 0 ? $pos+5 : $pos)); // get position of last </li> you want to display
echo '<li><a href="/USERNAME/MEDALS">...</a></li>';
?>
</ul>
</div>
This is a short quick example that should get you started..(Beware, by no means this is ready): http://jsfiddle.net/9hH2V/21/
html:
<ul id="list">
<li>anac</li>
<li>anac</li>
<li>anac</li>
<li>anac</li>
<li>anac</li>
<li>anac</li>
<li>anac</li>
</ul>
pure JS:
function showAll(){
var ellipsis = document.getElementsByTagName("a")[0]; // remove ellipsis
ellipsis.parentNode.removeChild(ellipsis);
for(i = 0; i <= list.length ; i++){ // display hidden list elements
document.getElementsByTagName("li")[i].style.display="block";
}
}
function showSome(n, list){// shows only first n out of list elements
var i, tmp,
a = document.createElement("a");
a.href = "#";
a.onclick = showAll;
a.text = "...";
if (list.length > n){
for(i = 0; i <= list.length ; i++){
if (i > n){
tmp = document.getElementsByTagName("li")[i]
if(tmp)
tmp.style.display="none";
}
}
document.getElementById("list").appendChild(a);
}
}
var list = document.getElementsByTagName("li");
showSome(3, list);