Jump to content

Horizontal list paging


loggo
 Share

Recommended Posts

Hi!

 

I would like to create a horizontal list and fill its elements dynamically, so I don't know how many elements the list will contain of. The width of the list is 100% and I'd like to have just one single line. If there are too many elements I would like to make pages, i.e. the list slides to the left and shows the next elements. Is it possible to create such a paging option using css or do I have to code this in Javascript. If its only possible to do it in javascript, how could I realize this?

 

Thank you in advance for your help.

loggo

Edited by loggo
Link to comment
Share on other sites

You can certainly force all elements in a list to be horizontal, but you'll need Javascript to slide the list or divide it into pages.

 

Given a structure like this:

<ul class="horizontal">    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>    <li>Item 4</li>    <li>Item 5</li>    <li>Item 6</li></ul>

You can force all the items to be horizontal to each other like this:

.horizontal {    margin: 0;    padding: 0;    list-style-type: none;    white-space: nowrap;}.horizontal li {    display: inline-block;}

Setting the overflow property of .horizontal you can decide whether you want to hide elements that get outside the page, show them, or put a horizontal scrollbar.

Link to comment
Share on other sites

Thank you for this idea but that's actually not what I want to have. I know how to create an horizontal list and that I get a scrollbar with the overflow attribute but I don't want a scrollbar. What I like to create is a sort of paging. That means that if there is an overflow, there apears a button wich then shows the next elements.

Link to comment
Share on other sites

I think a good idea might be to float the inputs to the left and give them a percentage width. If you make them 12.5% wide, 8 of them will show at a time. If there are more than eight, you use Javascript to hide all the remaining ones. Clicking on an arrow button should add or subtract 8 from a number used to indicate which if the first element to display, then it would hide all the elements and only show eight of them starting from the current index.

 

I don't know how experienced you are with Javascript, if you're new to it, you probably should do some more learning before trying something like this. It involves an understanding of arrays, the DOM and changing CSS styles with Javascript.

Link to comment
Share on other sites

I have a good basic knowledge of javascript, so I think I could realize this. The only thing is that I want to have the elements fixed size. Therefore I have an idea but I would need the width of the div that contains the ul, which is 100%. Is it possible to get the width of that div tag in pixels?

Link to comment
Share on other sites

Something like this?

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            var slide_delay = 50;            var perpage = 7; //litst items to show            var page_count = 1;            var greatest_height = 0;            var current_page = 1;            var outer_page_container = "";            var child_ul = "";            var current_child_ul = "";            window.onload = function() {                page_lists();            };            function page_lists()            {                outer_page_container = document.getElementById("pagenation_container");                var parent_for_copy = document.getElementById("original_page_list");                var page_links = document.getElementById("page_links");                var child_li = parent_for_copy.getElementsByTagName('li');                for (i = 0; i < child_li.length; i++)                {                    if (i % perpage === 0)                    {                        var ul_Element = document.createElement('ul');                        ul_Element.id = "page_" + page_count;                        ul_Element.className = "calc_width";                        outer_page_container.appendChild(ul_Element);                        page_count++;                    }                    cln = child_li[i].cloneNode(true);                    ul_Element.appendChild(cln);                }                outer_page_container.removeChild(parent_for_copy);                child_ul = outer_page_container.getElementsByTagName('ul');                for (i = 0; i < child_ul.length; i++)                {                    if (child_ul[i].offsetHeight > greatest_height)                    {                        greatest_height = child_ul[i].offsetHeight;                    }                    if (child_ul[i].className === "calc_width")                    {                        if (i === 0)                        {                            child_ul[i].style.width = "auto";                        }                        else                        {                            child_ul[i].style.display = "none";                            child_ul[i].style.width = 0;                        }                    }                }                for (i = 0; i < child_ul.length; i++)                {                    if (child_ul[i].className === "calc_width")                    {                        var page_link_Element = document.createElement('a');                        page_link_Element.href = "#" + child_ul[i].id;                        child_ul[i].style.height = greatest_height + "px";                        child_ul[i].style.minHeight = greatest_height + "px";                        page_links.appendChild(page_link_Element);                        page_link_Element.innerHTML = (i + 1);                        page_link_Element.onclick = function()                        {                            gotopage(this);                        };                    }                }            }            function gotopage(elem)            {                if (parseInt(elem.innerHTML) !== parseInt(current_page))                {                    for (i = 0; i < child_ul.length; i++)                    {                        if (child_ul[i].className === "calc_width")                        {                            child_ul[i].style.display = "none";                            child_ul[i].style.width = 0;                        }                    }                    current_child_ul = document.getElementById("page_" + parseInt(elem.innerHTML));                    // alert(parseInt(current_page))                    if (parseInt(elem.innerHTML) > current_page)                    {                        current_child_ul.style.cssFloat = "right";                    }                    else                    {                        current_child_ul.style.cssFloat = "left";                    }                    current_page = parseInt(elem.innerHTML);                    t = setTimeout(function() {                        current_child_ul.style.display = "block";                        width_increase(current_child_ul);                    }, slide_delay);                }            }            timer_s = 0;            function width_increase(elem) {                elem.style.width = timer_s + "%";                if (timer_s < 100)                {                    t = setTimeout(function() {                        width_increase(current_child_ul);                    }, slide_delay);                }                else                {                    clearInterval(t);                    elem.style.cssFloat = "none";                    elem.style.width = "auto";                    timer_s = 0;                }                timer_s += 20;            }        </script>        <style type="text/css">            body, html {margin:0; padding:0;}            #pagenation_container {overflow:hidden;}            #pagenation_container ul, #pagenation_container li {padding:0; margin: 0; list-style-type: none;}            #pagenation_container ul {margin: 1%;overflow: hidden;}            #pagenation_container li {margin: 0.9em 0;}            #pagenation_container ul.calc_width { float: left;}            #page_links {text-align: center;}            #page_links a {padding: 0 5px;}        </style>    </head>    <body>        <div id="pagenation_container">            <ul id="original_page_list">                <li> 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>2  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>3  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>4  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li> 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>6  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>7  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>8  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>9  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>10  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>11  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>12  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>13  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>14  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>15 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>16  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>17  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>18  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>19  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>20  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>21  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>22  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>23 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li> 24 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>25  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>26  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>                <li>27  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>            </ul>        </div>        <div id="page_links"><p>Pages</p></div>    </body></html>
Link to comment
Share on other sites

Well, in fact yes, but my list is horizontal and I do not know how many elements fit in one line. Thank you! But I could make it on my own now.

function slide(dir, kat){	var pos = document.getElementById("resultlist").offsetLeft;	var disp = Math.floor((document.getElementById("inhalt3").offsetWidth - kat * 135) /94);		if (dir == 0) {			if (document.getElementById("resultlist").offsetLeft + document.getElementById("resultlist").offsetWidth >= document.getElementById("inhalt3").offsetWidth) {				document.getElementById("resultlist").style.left = (pos - 94 * disp) + "px";			}		}	else {			if (document.getElementById("resultlist").offsetLeft < kat * 135) {				document.getElementById("resultlist").style.left = Math.min(kat*135,(pos + 94 * disp)) + "px";			}		}}

I did the sliding effect with the transition property of my list.

 

If you want to see it go to http://www.ttc-oberpullendorf.net/neu and see it by clicking the third link in the left menu (the link says "Turniere"). What do you think of it? It also changes its layout if the space gets too less, so that it is displayed well on mobile devices, too.

Edited by loggo
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...