saravmajestic / ionic Goto Github PK

Hello, I am using your plugin in my app. Everything is fine till ionic beta 11. I upgraded to ionic beta 1.1.0 and I am seeing issues like nav bar is not getting updated if I use inside ion-slide.

please have a look at my issue posted inionic forum. Any help with this?
http://forum.ionicframework.com/t/ion-nav-view-inside-ion-view/31463

Here is plunker http://plnkr.co/edit/vE90bN?p=preview. If you observe on change of tab slide, icons are not getting updated. Can you tell me how to fix this?

Hi,

Great work!

I have an issue with::

It points to first icon but it doesn't add the "active" class. Anyone else can replicate?

Thanks, Great work again!

Hi,

Thank you for this great component. I am using and recommending this by the way. It would be great if the scrollable tabs support scrollable content as well. If I understood completely in your examples, you placed the slideboxes inside the ion-content which scroll was set to false. It would be nice if it is the other way around like the ion-content inside the slidebox. Just like the scrollable tabs in android http://developer.android.com/design/building-blocks/tabs.html

Hope you can include this feature in your next version. Thanks once again.

There's a way to set a active slide?

How to use js dynamic switching TAB page , now only re- initialization of the specified page which is currently displayed page .

Hi, on android 4.4/5.0 and 6.0 scroll working perfect, but if launch on 6.0.1 (SM-G935) scrolling in has bounce and 'render' last element to display. any solution?

Platform: Android 5.1.1
After updating to 1.2.1 from 1.1, zooming and pinch seems broken in the ion-scroll, there is my code:
HTML:

<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" active-slide="activeSlide">
            <ion-slide ng-repeat="image in allImages">
                <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
                            zooming="true" min-zoom="{{zoomMin}}" style="width: 100%;height: 100%"
                            delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)"
                            on-release="updateSlideStatus(activeSlide)">
                    <div class="image" style="background-image: url({{image}})"></div>
                    <!--<img class="full-image" ng-src="{{image}}">-->
                </ion-scroll>
            </ion-slide>
        </ion-slide-box>

JS:

$scope.updateSlideStatus = function (slide) {
            var zoomFactor = $ionicScrollDelegate.$getByHandle("scrollHandle" + slide).getScrollPosition().zoom;
            if (zoomFactor == $scope.zoomMin) {
                $ionicSlideBoxDelegate.enableSlide(true);
            } else {
                $ionicSlideBoxDelegate.enableSlide(false);
            }
        };

Hi

Thank you for your ionic-tabbedSlideBox. I've created a bower component for this ionic tabbedSlidebox. The bower component isn't yet registered in the public bower repository.

Take a look at my tabbedSlidebox fork: https://github.com/paroos/ionic-tabbedslidebox

I can make a pull-request, but I don't know if you want more than one specific ionic component in your ionic repo.

Regards, Patrick

My paths are correct and I have the latest version of Ionic running. Any suggestions?

Hi,

The plugin is just perfect on Android but I have troubles in iOS.

Both my tabs and slides are dynamically set using an HTTP service. In iOS the first slide loads perfect and when changing to next slide, I'm fetching the contents from another service. The View binding is working, but the contents just doesn't display on the screen. But, this scenario is perfect in Android and I have dynamic content loading onSlideMove.

On the DOM, I observed that the CSS transform, translate, left etc are not set properly in iOS platform. Could this be the issue? Could you please help?

Thanks.

For use it like the normal ion-tabs

I believe this repo is inappropriately named. This causes collisions with the ionic lib when attempting to install via bower. A simple solution is to rename the repo ionic-tabbed-slide-box.

Hey thanks for this cool module. But there is no licence, so how should I handle this legally?

The second tab here is not scrollable

Hello,
Please add a package.json file in order to install your package from npm.

I've found a solution for the problem of the height of the tabs, otherwise all the tabs have the same height even if one has less element.

Into the controller i've create a function which is called when the tab change and is passed the $index of the element and in this method i've put this lines of code:
`
$scope.update = function(index){

    angular.element(".slider")[0].style.height = "auto";
    var height = angular.element(angular.element("ion-slide")[index]).height();
    angular.element(".slider")[0].style.height = height + "px";

}
`
Try this and let me know if it works.
Hope it could help someone else :)

Amazing Work ! I find difficulty when i use it dynamically adding content for each slide. e.g. let's say top tab bar have tabId & tabText (P.S. I am not talking about onSlideMove data.index of slidebox) is there any way that i can request tabId to get data for slide respectively.

when using dir=''rtl'' on changing tabs it shows wrong slide boxes.

Evrythng worked suprb bt All content in slide tab is centered..how to remove center alignment?

Many thanks for sharing this!
Could you explain how to switch between the icon based appearance (with the arrow) to the text-only based appearance (underlined). It's quite hard to reverse-engineer it.

When I use ng-repeat with {{tab in tabs}}, not add class="active" with tab.text in firstview of default.html.
But There is no problem after I flick.

app.controller("IndexCtrl", ['$rootScope', "$scope", "$stateParams", "$q", "$location", "$window", '$timeout', 
            function($rootScope, $scope, $stateParams, $q, $location, $window, $timeout){
                $scope.tabs = [
                    {"text": "A"},
                    {"text": "B"},
                    {"text": "C"},
                    {"text": "D"},
                    {"text": "E"}
                ]
                $scope.slideBox = [
                {
                    id: 0,
                  title: '0something here',
                  view: "132"
                },
                {
                    id: 1,
                  title: '1text here',
                  view: "232"
                },
                {
                    id: 2,
                  title: '2something here',
                  view: "432"
                },
                {
                    id: 3,
                  title: '3text here',
                  view: "233"
                },
                {
                    id: 4,
                  title: '4something here',
                  view: "1da"
                }
              ];
      }
    ]);

            <tab-slide-box tab="0" >
                        <div class="tsb-icons">
                            <div class="tsb-ic-wrp">
                                    <a ng-repeat="tab in tabs" href="javascript:;">{{tab.text}}</a>
                                </div>
                        </div>
                    <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
                        <ion-slide ng-repeat="slide in slideBox">
                            <h3>{{slide.title}}</h3>
                        </ion-slide>
                    </ion-slide-box>
            </tab-slide-box>

When executing (demo's as well)

Error: matrix is undefined

Hi While Scrolling the content the content slide is changing but the current tab is in out of view how to solve this ?

Hi Saravmajestic,

Great work on Tabbed slidebox. We are trying it use it with little modifications, We are using ion-content inside of ion-slide so that content is scrollable list. However we also need the tsb icons scroll block to be fixed when list is scrolled in various slides. Can you suggest some clean way of doing it, It seems position fixed wont work in ionic too.

Thanks in adavance.

Hi,
tnx for this amazing library!
I have a problem, the content of the slide (a list of items) it's cut! Any ideas on how to fix it?
thxs

link for error video: http://www.itmakers.it/video-error/rightmeal.mov

Hello, great work by the way!

I saw the initial tab is set up on 0 but on the preview, it starts with the middle tab.

Is there any special way to change that so it will show the first tab? or is it a bug or something?

THanks.

Hi,

I use this component, but it would be nice if the tab change were as Polymer.
http://www.polymer-project.org/components/paper-tabs/demo.html

Hello, I am using tabbed slide box in my app. every thing works fine till beta 13. In beta 14, nav bar is not showing icons based on tab selection. It is always showing nav icons of last tab. Can some help me with this?

I created a plunk and posted this in ionic forum. http://forum.ionicframework.com/t/beta-14-nav-bar-is-not-showing-nav-buttons-with-ion-slide-change/15305.

Here is plunk: http://plnkr.co/edit/bzf6Fj?p=preview

Hello,
after updating to 1.2 ionic component Tabbed Slidebox a bugs.
Here's an example http://codepen.io/dandroid/pen/MKaQOr

ideas for solutions?
Thank you

Pleaseeeeeeeeeee help!!

The dummy data test of the plugin is working perfectly.
But when i generate the tabs dinamically using ng-repeat it doesn't work.

This is a simple example of taking the data from an object:

$rootScope.data_test = {};
$rootScope.data_test.days = ['Day 1','Day 2'];

<tab-slide-box>
     <div class="tsb-icons">
         <div class="tsb-ic-wrp">
            <a href="javascript:;" class="ion-home" ng-repeat="day in data_test.days track by $index"></a>
        {{ day }}
          </div>
     </div>
     <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
             <ion-slide>
                   <h1>Day 1 content</h1>
             </ion-slide>
              <ion-slide>
                    <h1>Day 2 content</h1>
              </ion-slide>
      </ion-slide-box>
</tab-slide-box>

What can i do?
There is something i am missing?
Thank you!

Does it have a bower module?

Thank's.

I'm trying to use on modal in Ionic, but doesn't work. I tried to put the same code on my view and there it's working well... How do I to fix it?

This is my code:

      <tab-slide-box>
              <div class="tsb-icons">
                  <div class="tsb-ic-wrp">
                      <ion-scroll direction="x" class="tsb-hscroll">
                      <a href="javascript:;" class="ion-home1">Home</a>
                      <a href="javascript:;" class="ion-ios-game-controller-b1">Games</a>
                      <a href="javascript:;" class="ion-email1">Email</a>
                      <a href="javascript:;" class="ion-model-s1">Car</a>
                      <a href="javascript:;" class="ion-person1">Profile</a>
                      <a href="javascript:;" class="ion-heart1">Favourites</a>
                      <a href="javascript:;" class="ion-chatbubbles1">Chats</a>
                      <a href="javascript:;" class="ion-gear-b1">Settings</a>
                      <a href="javascript:;" class="ion-camera1">Photos</a>
                      <a href="javascript:;" class="ion-ios-paw1">Pets</a>
                      </ion-scroll>
                  </div>
              </div>
              <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
                  <ion-slide>
                      <h3>Home content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Games content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Mail content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Car content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Profile content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Favourites content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Chats content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Settings content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Photos content</h3>
                  </ion-slide>
                  <ion-slide>
                      <h3>Pets content</h3>
                  </ion-slide>
              </ion-slide-box>
          </tab-slide-box>

Hi,

Thank you for this great plugin!

I've notice that in your example with scrollable content (https://github.com/saravmajestic/ionic/blob/master/tabbedSlideBox/slidingContent.html) the end of the content is not displayed after the scroll. I mean, you can see it if you bounce the content, but then the scroll stops where it is not possible to see the last item.
It seems that the ion-scroll content is higher than its parent viewport.

Can you check this?

Thank you

The data is not rendering if it is from an http call. Once you resize the browser window then everything is working fine. In mobile, as we can't resize the window, it's not showing any data. Please have a look at this plunker.

Hi,
Is there any way to select a particular tab from controller dynamically?

When using scrollable tabs $scope.onSlideMove does not work. matrix is undefined.
everything only works for default/fixed tabs.

has anyone solved this ?

Hello,
When I swipe slide, the previous slide content goes up, I think this is bad for UX.
How can I prevent it to go up ?
Thanks

Hi, this is a great project! It would be amazing if you could somehow add animation to the Tab's border, it will make it look exactly like native :) please add this if you have some time.

Thanks;)

I'm trying to set the intial tab with a $stateParams variable but it's not working. It just shows the first slide but the tab pointer is off, between icons.

Such a shame much needed plugin for ionic.
I would pay for this plugin if it meant that it got updated.

Hello, thanks for your great work, i'm having an issue, i can't use your plugin with each sliding tab having their own infinite-scroll and pull-and-refresh.

Thanks!

<tab-slide-box tab="0">
     <div class="tsb-icons">
     <div class="tsb-ic-wrp">
        <ion-scroll direction="x" class="tsb-hscroll">
            <a href="javascript:;" 
                class="{{tab.icon}}" 
                ng-repeat="tab in home.tabs"
                ng-click="home.goTo($index)"
                ng-class="{'active' : home.currentTab == $index}"
                on-finish-render="home.test()"
            >
                {{tab.text}}
            </a>
        </ion-scroll>
    </div>
     </div>
        <ion-slide-box 
            show-pager="false"
            on-slide-changed="slideHasChanged($index)"
        >
            <ion-slide>

                <ion-content>

                    <ion-list class="noticias-list">
                        <ion-item ng-repeat="homilia in home.homilias">
                            <a class="item item-thumbnail-left item-text-wrap" ui-sref="homiliaDetails({'data' : homilia.id })">
                                  <div class="noticia-image pageBackground" show-once-background-loaded="{{homilia.image}}"></div>
                              <div class="item-text">
                                <h2 ng-bind-html="homilia.titulo"></h2>
                                <p>{{homilia.fecha}}</p>
                              </div>
                            </a>
                        </ion-item>
                    </ion-list>

                    <ion-infinite-scroll 
                  immediate-check="false"
                  ng-if="home.noMoreHomilias"
                  on-infinite="home.getHomilias()"
                  distance="1%">
                </ion-infinite-scroll>

                </ion-content>


            </ion-slide>

</ion-slide-box>
</tab-slide-box>

hi,saravmajestic
how to used into the ionic2 or have one of the support v2 --ts version?

Hi,

Line 134

$timeout(function(){$scope.onSlideMove({"index" : eval(index)});},100);

reports undefined. I commented it out but not sure if it's doing something very crucial.

Please advise. Thanks.

While the user scrolls a scrollable content vertically the tabs get changed . like the slides are too sensitive ,

its a annoying experience when user tries to scroll vertically but the tabs are changed ! It doesnt give android like feel.

Nice work btw ! Hope this can be solved

Hi,

I have a toggle in my app.
If I choose the third element (for example) and then I click on my toggle, the tab returns in initial position...

Do you know this issue ?

It's possible <tab-slide-box> inside another </tab-slide-box>?

Hi there, thank you for your plugin! I'm finding it very useful for now, apart from the fact that ionSlideBox it's deprecated now.

The ion-slide-box have a bouncing effect on Chrome for Windows like the rest of the components, but on Android every scrollable item stops bouncing excepting the slide. This wouldn't be a big problem, but on my boss' iPad the bounce on that component is behaving crazy...

I'm not getting results with the property hasBounce. My view structure right now is the following (a little weird, but I found it the only way to make my structure and scrolls as I wanted with few CSS tweaks)

<ion-view view-title="Carta">
    <tab-slide-box tab="0" class="carta">
      <div class="tsb-icons" style="margin-top: 44px;">
        <div class="tsb-ic-wrp">
          <ion-scroll direction="x" class="tsb-hscroll scroll-view ionic-scroll" >

              <div class="tabs">
                <a class="tab-item active">Favoritos</a>
                <a class="tab-item">Bocadillos</a>
                <a class="tab-item">Hamburguesas</a>
                <a class="tab-item">Bebidas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
              </div>

          </ion-scroll>
        </div>
      </div>
      <ion-content style="margin-top: 68px;">
        <ion-slide-box show-pager="false" on-slide-changed="updateTab($index)">
          <ion-slide>
            <ion-list>
              <div class="row">
                  <ion-item ng-repeat="article in articles" href="#/playlists/{{playlist.id}}" class="categories-item col-25"  on-hold="holdItem()">
                    <!-- {{playlist.title}} -->
                    <div class="card card--expand categories-card">
                      <div class="item item-divider categories-image" style="height: 200px; color: white;" ng-style="{'background': 'url(/img/categories/{{article.image}})  center / cover'}">
                        <div class="categories-text-overlay">
                          <h2 text-scroll>{{ article.name }}</h2>
                          <p>{{ article.subtitle }}</p>
                        </div>
                      </div>
                    </div>
                  </ion-item>
              </div>
            </ion-list>
          </ion-slide>
          <ion-slide><h1>Bocadillos</h1></ion-slide>
          <ion-slide><h1>Hamburguesas</h1></ion-slide>
          <ion-slide><h1>Bebidas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
        </ion-slide-box>
      </ion-content>


    </tab-slide-box>


</ion-view>

As the title

I use the tabbedSlideBox with 3 tabs, each of them containing an ion-list. If i scroll a list and change the slide page, the list scroll back to the top.

I've checked you're demo and it does the same thing...so it's a bug of this repo, because as far as i know common ionic slide box should remember scroll position by default

Thanks for this awesome library.
It was working very well before the Ionic 1.3 release. But it has some problem after I updated ionic.
It flicks the page towards upside and also the next page does not show on slide until we select the tab . Can you please guide what changes could work.