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:

Answer

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>
Answer

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);

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.