loggo Posted May 8, 2015 Share Posted May 8, 2015 (edited) 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 May 8, 2015 by loggo Link to comment Share on other sites More sharing options...
Ingolme Posted May 8, 2015 Share Posted May 8, 2015 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 More sharing options...
loggo Posted May 8, 2015 Author Share Posted May 8, 2015 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 More sharing options...
Ingolme Posted May 8, 2015 Share Posted May 8, 2015 Well, you start off with that CSS, then use Javascript to deal with the overflow and add the paging buttons. Link to comment Share on other sites More sharing options...
loggo Posted May 8, 2015 Author Share Posted May 8, 2015 Ok, thanks, but I don't have any idea how to realize this in Javascript, especially if the Window size changes :/ Link to comment Share on other sites More sharing options...
Ingolme Posted May 9, 2015 Share Posted May 9, 2015 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 More sharing options...
loggo Posted May 9, 2015 Author Share Posted May 9, 2015 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 More sharing options...
Ingolme Posted May 9, 2015 Share Posted May 9, 2015 Almost all elements have an offsetWidth property you can use to determine their width. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2015 Share Posted May 11, 2015 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 More sharing options...
loggo Posted May 12, 2015 Author Share Posted May 12, 2015 (edited) 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 May 12, 2015 by loggo Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now