locked
Horizontal icons moving scrollbar in angularjs RRS feed

  • Question

  • User-1609546788 posted

    Hi Team,

    Can we show 1-20, 21-40 etc. move icons horizontally on scrollbar(volume increase) in angularjs+bootstrapjs

    Thursday, July 25, 2019 10:50 AM

All replies

  • User409696431 posted

    Your requirement is not clear, but it does not seem to be anything related to this forum, which is for Asp.Net.

    Thursday, July 25, 2019 1:35 PM
  • User-1609546788 posted

    Hi Team,

    Inside one div , i have more than 3 hundred Spans(Square)  in horizontal , i need to show first 20 spans on start in angularjs+bootstrap+js+jquery with horozontal scroolbar.

    on click of scroll it keep showing 21 to 40 ,41 to 60 and so on. Any idea for how to add scroll bar and achieve this functionality.

    currently all 3 hundreds are seeing in horizontal line.

    Friday, July 26, 2019 5:05 AM
  • User-719153870 posted

    Hi andry18,

    According to your description, it seems that you are trying to add pagination? Show 20 datas in div at a time?

    If in this case, the horizontal scroll bar would be unecessary and redundant.

    Or you just put all you data into a div and you want to display 20 of them at a time? Like: Here?

    If so, i suggest you can try to make the scroll icon moves a fixed destance(enough to show exactly 20 data) each time you click it.

    You can refer to: Here.

    If it's some other case, please provide some code or images to describe what you really want.

    Best Regard,

    Yang Shen

    Friday, July 26, 2019 9:44 AM
  • User-183374066 posted

    Better use a carousel with multiple items per slide. Google "carousel with multiple items per slide" you will get multiple links.

    Check following example

    https://bootsnipp.com/snippets/zDQkr

    Friday, July 26, 2019 11:33 AM
  • User-1609546788 posted

    yes i am trying to add pagination but in Table td where i have all 300 icons and need to show 1 to 20 horizontally and then click on horizontal 

    scroll bar to right 21 to 40 etc on so on  . i am looking for scroll bar(same like Volume increase)

    Friday, July 26, 2019 11:57 AM
  • User-719153870 posted

    Hi andry18,

    The carousel way Nasser Malik provided is quite situation, in the demo he provided, you just need to see your each 20 data as an item and when you click the button, one item(20 data) will be shown.

    Or, just for a table with horizontal scroll bar, please provide related front-end code in your case. The idea is to change the scroll event of the div to set the distance to a fixed value.

    Only with your code we can make sure the scroll event work.

    Best Regard,

    Yang Shen

    Monday, July 29, 2019 9:50 AM
  • User-1609546788 posted

    Hi Yang,

    Please find the below code:

    In Controller-----------------------------

    model[0].Name=Test

    model[0].Type="B,A,A,A,A,B"

    In Index.cshtml---------------------

    <tr>

    <td>
    <div ng-repeat="s in model.Type.split(',') track by $index">
    <span ng-class="{
    'greenColor': s === 'A',
    'redColor': s === 'B'}">
    </span>
    </div>
    </td>

    </tr>

    So in TD it will show Icons in horizontal manner.

    I have shown here six icons , in actual it is around 3000 icons , so i need to show in Table TD - 1 to 20 ,21 to 40 etc on horizontal scroll click.

    Tuesday, July 30, 2019 7:05 AM
  • User-719153870 posted

    Hi andry18,

    I'm sorry that still can't understand what you really want.

    You said you were trying to add pagination, but in the form of a scroll bar?

    Please refer to below image from:https://datatables.net/examples/basic_init/scroll_x.html.

    In this table you can see a horizental scroll bar and several paging buttons.

    Maybe what you actually want is to make those pading buttons look like a scroll bar and when you click "Previous" or "Next" the scroll bar move to the right position?

    Cause if just use a horizental scroll bar to make pagination doesn't seem logical.

    Best Regard,

    Yang Shen

    Wednesday, July 31, 2019 7:19 AM
  • User-1609546788 posted

    Hi Yang,

    Please see the below output:-

    Type1->  A A A A A A B A B B A A A A A A B A B B   A A A A A A B A B B A A A A A A B A B B   A A A A A A B A B B A A A A A A B A B B 

    Type 2-> B  B A A A A B A B B A A A A A A B B B B  A A A A A A B A B B A A A A A A B A B B   A A A A A A B A B B A A A A A A B B B B

    Name Type
    Test1

     A A A A A A B A B B A A A A A A B A B B 

    Horizontal Scroll Here for next 21 to 40 etc.

    Test2

     B  B A A A A B A B B A A A A A A B B B B 

    Horizontal Scroll Here 

    In Type column i have to show 1 to 20 Icons(here for example purpose i have added Chars.)  at first time .For Next 21 to 40  can we give any Horizontal Scroll like Volume in each Type column at bottom?(Not looking for Carousel may be it will be second option ) 

    Example Purpose:-For Pagination we are showing 1 to 20 and then click again we are showing 21 to 40 etc. Here i will not show pager but something like .as first 1 to 20 done then next 21 to 40 has to show .

    In Bootstrap/Angularjs/Js.

    Wednesday, July 31, 2019 7:45 AM
  • User-719153870 posted

    Hi andry18,

    I believe what you are looking for is a slider in Ajaxtoolkit. It looks like Volume:Slider.

    Please refer to another similar thread :paging using scroll bar.

    Best Regard,

    Yang Shen

    Friday, August 2, 2019 9:16 AM