Last post Aug 02, 2019 09:16 AM by Yang Shen
Jul 25, 2019 10:50 AM|andry18|LINK
Can we show 1-20, 21-40 etc. move icons horizontally on scrollbar(volume increase) in angularjs+bootstrapjs
Jul 25, 2019 01:35 PM|KathyW|LINK
Your requirement is not clear, but it does not seem to be anything related to this forum, which is for Asp.Net.
Jul 26, 2019 05:05 AM|andry18|LINK
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.
Jul 26, 2019 09:44 AM|Yang Shen|LINK
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.
Jul 26, 2019 11:33 AM|Nasser Malik|LINK
Better use a carousel with multiple items per slide. Google "carousel with multiple items per slide" you will get multiple links.
Check following example
Jul 26, 2019 11:57 AM|andry18|LINK
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)
Jul 29, 2019 09:50 AM|Yang Shen|LINK
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.
Jul 30, 2019 07:05 AM|andry18|LINK
Please find the below code:
<div ng-repeat="s in model.Type.split(',') track by $index">
'greenColor': s === 'A',
'redColor': s === 'B'}">
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.
Jul 31, 2019 07:19 AM|Yang Shen|LINK
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.
Jul 31, 2019 07:45 AM|andry18|LINK
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
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.
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 .
Aug 02, 2019 09:16 AM|Yang Shen|LINK
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.