Jump to content
loggo

Horizontal list paging

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Well, you start off with that CSS, then use Javascript to deal with the overflow and add the paging buttons.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Almost all elements have an offsetWidth property you can use to determine their width.

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...