Menu icon Foundation
Orbit inside tabs

Hi,

I'm using Orbit but i have an image and then below the image i have inserted some Foundations Tabs. This is all contained in the orbit slider. I notice on mobile i often accidentally swipe to the next li tag element. This usually happens when im trying to scroll down to read some text contained in the Tabs.

I want to change the Swipe behaviour to only work when the image at the top is swiped. If i wrap the image in a container div does anyone know how i modify the orbit JS to use this instead?

Thanks!

Orbittabs

Hi,

I'm using Orbit but i have an image and then below the image i have inserted some Foundations Tabs. This is all contained in the orbit slider. I notice on mobile i often accidentally swipe to the next li tag element. This usually happens when im trying to scroll down to read some text contained in the Tabs.

I want to change the Swipe behaviour to only work when the image at the top is swiped. If i wrap the image in a container div does anyone know how i modify the orbit JS to use this instead?

Thanks!

Rafi Benkual almost 6 years ago

Can you post the code or the example page?

Ronan almost 6 years ago

Here's the code:

<div id="panel1" class="small-12 medium-9 xlarge-12 columns content noPadding floatLeft">
    <ul class="orbitBuildFarm" data-orbit data-options="timer:false; timer_container_class: hide; timer_paused_class: hide; timer_progress_class: hide; bullets: true; slide_number: false;">
        <li>
            <div class="clear45"></div>
            <div class="prevNextArrowContainer">
                <img src="<?php echo $this->_data['baseUrl']; ?>/static/image/products/test/2.jpg" alt="slide 1" class="whiteBorder"/>
            </div>
            <div class="clear5"></div>
            <div class="row">
                <div class="small-12 column text-right">
                    <i class="fi-shopping-cart"> Cow (Kr400) x Quantity =</i> <span class="productAmount2">0</span> &nbsp;<div class="basketButton2 buildFarmButtonClassGreen">+</div> &nbsp; <div class="basketButton2 buildFarmButtonClassOrange">-</div>&nbsp;
                </div>
            </div>
            <div class="clear5"></div>
            <div class="small-12 columns noPadding">
                <dl class="tabs" data-tab>
                    <dd class="active"><a href="#panel1-1" class="noLinkOutline"><i class="fi-info white"></i> Product</a></dd>
                    <dd><a href="#panel1-2" class="noLinkOutline"><i class="fi-torso white"></i> Farmer</a></dd>
                    <dd><a href="#panel1-3" class="noLinkOutline"><i class="fi-map white"></i> Delivery</a></dd>
                    <dd><a href="#panel1-4" class="noLinkOutline"><i class="fi-pencil white"></i> Tips</a></dd>
                </dl>
                <div class="tabs-content whiteBg">
                    <div class="content active" id="panel1-1">
                        <div class='small-12 columns'>
                            <h4><i class="fi-info"></i> Product Information</h4>
                            <p>First panel 1-1. Text Here</p>
                        </div>
                    </div>
                    <div class="content" id="panel1-2">
                        <div class='small-12 columns'>
                            <h4><i class="fi-torso"></i> Farmer Information</h4>
                            <p>First panel 1-2. Text Here</p>
                        </div>
                    </div>
                    <div class="content" id="panel1-3">
                        <div class='small-12 columns'>
                            <h4><i class="fi-map"></i> Delivery Information</h4>
                            <p>First panel 1-3. Some text here about deliveries!</p>
                        </div>
                    </div>
                    <div class="content" id="panel1-4">
                        <div class='small-12 columns'>
                            <h4><i class="fi-pencil"></i> Tips</h4>
                            <p>First panel 1-4. Some articles or tips here about the product.</p>
                        </div>
                    </div>
                </div>  
            </div>

        </li>
        <li>
            <div class="clear45"></div>
            <div class="prevNextArrowContainer">
                <img src="<?php echo $this->_data['baseUrl']; ?>/static/image/products/test/3.jpg" alt="slide 1" class="whiteBorder"/>
            </div>
            <div class="clear5"></div>
            <div class="row">
                <div class="small-12 column text-right">
                    <i class="fi-shopping-cart"> Pig (Kr300) x Quantity:</i> <span class="productAmount3">0</span> &nbsp;<div class="basketButton3 buildFarmButtonClassGreen">+</div> &nbsp; <div class="basketButton3 buildFarmButtonClassOrange">-</div>&nbsp;
                </div>
            </div>
            <div class="clear5"></div>
            <div class="small-12 columns noPadding">
                <dl class="tabs" data-tab>
                    <dd class="active"><a href="#panel2-1" class="noLinkOutline"><i class="fi-info white"></i> Product</a></dd>
                    <dd><a href="#panel2-2" class="noLinkOutline"><i class="fi-torso white"></i> Farmer</a></dd>
                    <dd><a href="#panel2-3" class="noLinkOutline"><i class="fi-map white"></i> Delivery</a></dd>
                    <dd><a href="#panel2-4" class="noLinkOutline"><i class="fi-pencil white"></i> Tips</a></dd>
                </dl>
                <div class="tabs-content whiteBg">
                    <div class="content active" id="panel2-1">
                        <div class='small-12 columns'>
                            <h4><i class="fi-info"></i> Product Information</h4>
                            <p>First panel 2-1.  Text Here</p>
                        </div>
                    </div>
                    <div class="content" id="panel2-2">
                        <div class='small-12 columns'>
                            <h4><i class="fi-torso"></i> Farmer Information</h4>
                            <p>First panel 2-2. Text Here</p>
                        </div>
                    </div>
                    <div class="content" id="panel2-3">
                        <div class='small-12 columns'>
                            <h4><i class="fi-map"></i> Delivery Information</h4>
                            <p>First panel 2-3. Some text here about deliveries!</p>
                        </div>
                    </div>
                    <div class="content" id="panel2-4">
                        <div class='small-12 columns'>
                            <h4><i class="fi-pencil"></i> Tips</h4>
                            <p>First panel 2-4. Some articles or tips here about the product.</p>
                        </div>
                    </div>
                </div>  
            </div>
        </li>
    </ul>
</div>

Rafi Benkual almost 6 years ago

Sean Timm provided this solution with JS. Thanks Sean!


You'll need to hook into the tab change event and then call the logic from your own javascript (something like the following):

  $('#myTabs').on('toggled', function (event, tab) {
    $(document).foundation('orbit', 'reflow');
  });

This tells the JS to restart Orbit again after the tab is called.

Rafi Benkual almost 6 years ago

You can put the script above before you closing scripts:

Example:

https://www.evernote.com/shard/s304/sh/7845fc09-8cd1-44bd-aec1-6ef79519aab0/92e5bd777f43c3561c5457e658b515fd

 <script>
$(document).foundation({
       tab: { 
       callback: function () {
       alert('yay!');
       }
    }
});
</script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>