3

I'm trying to create a bottom aligned navigation bar that contains "prev" and "next" buttons for moving through a list of links, something similar to what you might see at the bottom of a long forum thread.

The number of links will vary through different sections of the site and I'd like to be able to fix the number of links (6 plus prev + next buttons) displayed at any one time. There would always be more than 6 links to display (minimum 15).

This is what I want to achieve:

enter image description here

There's not much HTML and I don't have any other code (apart from some aesthetic stylings which aren't really relevant). I'm happy to use any combination of CSS and JavaScript that could make this work.

My HTML is as follows:

<div class="bottom_nav page_width">
        <ul>
            <li><a href="#"><i class="icon-chevron-left icon-large"></i></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li><a href="#">16</a></li>
            <li><a href="#"><i class="icon-chevron-right icon-large"></i></a></li>
        </ul>
    </div>
Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
Jonny
  • 59
  • 1
  • 7
  • 1
    use http://imgur.com/ - i'll post your image. Are you talking about creating pagination effect? http://getbootstrap.com/components/#pagination – odedta May 18 '15 at 11:55
  • 1
    I think the work you are looking for is `pagination`...try searching for that. – Paulie_D May 18 '15 at 11:55
  • @odedta and Paulie_D I want to do something slightly different stylistically but functionally speaking pagination is exactly what I'm looking for and having an accurate search term definitely makes that a lot easier to look into. Thanks for the direction guys. Alvaro - thanks for the edit, made my post much more comprehensible – Jonny May 18 '15 at 14:55

1 Answers1

0

Firstly you can use CSS property white-space:nowrap; to align all the links in one single line.

That will enable the horizontal scrollbar which you can hide by using overflow: hidden;

Now you can use a JavaScript function that can scroll the content of the div or ul. It may be scrollBy(x, y).

This is how you can achieve what you want to, as I understood your question. If not, please explain with images or a better description.

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
Meeshal
  • 397
  • 1
  • 6
  • 10
  • Meeshal I'll have a look at what you're describing, I'm pretty new to this game so it's always helpful to have a couple of different approaches to try, helps improve my knowledge base. Thanks for the response. – Jonny May 18 '15 at 14:59
  • Hey if that is the picture you want then you have to use a scripting language like Php, Jquery, JavaScript, Perl, python etc to say the html that how many buttons you want and what page should they linked with. And if you want a dynamic one your might also want to use MySQL database along with your script. JavaScript can be a bit complicated for a beginner but you can try. best will be to use php. – Meeshal May 19 '15 at 20:55