Need help evenly spacing a number of objects

programming web dev
1

Hello,

I am trying to make a ‘page selector’ which would allow a user to jump ahead in a series of html pages. In other words, the user can click ‘next’ to go to the next page in the series or use this selector to jump ahead several pages. The selector will have a number of tick marks, each representing an available page. The number of pages changes so this all needs to be dynamic.

What I am trying to do is space these tick marks evenly inside a div using jQuery, js, css. So, once I get a number representing the number of pages available how can i use this number to space these tick marks?

I am not married to this special character for the tick marks. Any advice would be greatly appreciated at this point!


.scrubberBtn{
    cursor:default;
    font-size:1em;

}

#scrubber{
    cursor:default;
}



    <div id="floatingConsol" name='floatingConsol'>
        
        <div id="scrubber">
        <span id="googleSearch Button" class="scrubberBtn">& #124</span>
        <span id="youtubeSearch Button" class="scrubberBtn">&#124</span>
        <span id="wikiSearch Button" class="scrubberBtn">&#124</span>
        <span id="DrudgeSearch Button" class="scrubberBtn">&#124</span>
        <span id="TownHallSearch Button" class="scrubberBtn">&#124</span>
        <span id="BenelliSearch Button" class="scrubberBtn">&#124</span><br/>
        </div>

        <div id="page_display">test text</div>

        <script type="text/javascript" language="JavaScript">
            createListeners();
        </script>
        
    </div>



function createListeners(){
    $('.scrubberBtn').click(function(){alert(this.id);});
    
    $(".scrubberBtn").mouseenter(function () {$('#page_display').html(this.id);});
    
    $(".scrubberBtn").mouseleave(function () {$('#page_display').html("");});
}