Menu icon Foundation

My Posts






  • 1
    Reply
  • Change Orbit animation speed v6+

    By Ste Cro

    animation speedobit

    Hi there,   I have recently started using Foundation 6 and have noticed a few changes. This are working great but as far as the documentation is concerned i cannot find a way to change the animation speed (not the pause) of the slides on screen. I... (continued)

    Last Reply by Brian Tan about 3 years ago


  • 1
    Reply
  • Orbit slider not loading

    By Ste Cro

    foundation orbit slider

    Hi,   Ive been stuck for the past few hours with the latest download of foundation. I have created a standard HTML page and wanted to use Orbit with some content inside. I have used orbit before with previous versions of foundation and have never... (continued)

    Last Reply by Brian Tan about 3 years ago


My Comments

Ste Cro commented on Ste Cro's post about 3 years

As in the Orbit slides load all stacked on top of each other, the data options dont seem to do anything and also when the slides have finished orbit just freezes rather than going back to the first slide.
I have it on my test site here if you wish to take a little look:
goo.gl/pVB86V

Ste Cro commented on Ste Cro's post about 3 years

Thanks Andy, unfortunately that still not done it. I'm not sure why its playing up ive never usually had a problem with it with previous versions of Foundation. This below seems to work, until the Orbit gets to the last slide then and plays it then the entire Orbit slider disappears and never comes back.
Is there any known bugs in foundation 6.2.1 that maybe causing this?
I have a link to my test page here: http://goo.gl/pVB86V
Could there be an issue with the order scripts are loaded?
Thanks for you help!
.orbit-slide {display: none;}

.orbit-slide.is-active {display: block;}

Ste Cro commented on Ste Cro's post about 3 years

Thanks a lot Will,
 
Im not sure what the issue is but that doesn't seem to have done anything. I have some really odd behaviour with this for some reason. Its really annoying.

Ste Cro commented on Ste Cro's post about 3 years

I have just tried both of them and still no luck,
it seems to be ignoring timer-delay for some strange reason.

Ste Cro commented on Ste Cro's post about 3 years

Here is the output HTML just to make things clearer:
 
<div class="large-12 medium-12 columns">
<button class="dropdown-close">Hide</button>
<ul class="tabs" data-tabs="qfboql-tabs" id="example-tabs">
<li class="tabs-title" role="presentation"><a href="#panel1" aria-selected="false" class="twitter-icon" role="tab" aria-controls="panel1" id="panel1-label"> </a> </li>
<li class="tabs-title" role="presentation"><a href="#panel2" class="fb-icon" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label"> </a></li>
<li class="tabs-title is-active" role="presentation"><a href="#panel3" class="linkedin-icon" role="tab" aria-controls="panel3" aria-selected="true" id="panel3-label"> </a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1" aria-hidden="false">
<div class="row">
<div class="large-12 medium-12 columns">
<h2>Get Social </h2>
<p>To help get the conversation started you can use the sample post content.</p>
<p>Feel free to tweak them to reflect who you are. </p>
<div class="panel">
<p>Test here</p>
</div>
</div>
</div>
</div>
<div class="tabs-panel is-active" id="panel2" aria-hidden="false">
<p>TAB 2 - Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
<div class="tabs-panel is-active" id="panel3" role="tabpanel" aria-hidden="false" aria-labelledby="panel3-label">
<p>TAB 3 - Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
</div>
 
As you can see, is-active is being applied to every tab on click meaning they are all visible at the same time

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Ste Cro's post about 3 years

As in the Orbit slides load all stacked on top of each other, the data options dont seem to do anything and also when the slides have finished orbit just freezes rather than going back to the first slide.
I have it on my test site here if you wish to take a little look:
goo.gl/pVB86V

You commented on Ste Cro's post about 3 years

Thanks Andy, unfortunately that still not done it. I'm not sure why its playing up ive never usually had a problem with it with previous versions of Foundation. This below seems to work, until the Orbit gets to the last slide then and plays it then the entire Orbit slider disappears and never comes back.
Is there any known bugs in foundation 6.2.1 that maybe causing this?
I have a link to my test page here: http://goo.gl/pVB86V
Could there be an issue with the order scripts are loaded?
Thanks for you help!
.orbit-slide {display: none;}

.orbit-slide.is-active {display: block;}

You commented on Ste Cro's post about 3 years

Thanks a lot Will,
 
Im not sure what the issue is but that doesn't seem to have done anything. I have some really odd behaviour with this for some reason. Its really annoying.

You commented on Ste Cro's post about 3 years

I have just tried both of them and still no luck,
it seems to be ignoring timer-delay for some strange reason.

You commented on Ste Cro's post about 3 years

Here is the output HTML just to make things clearer:
 
<div class="large-12 medium-12 columns">
<button class="dropdown-close">Hide</button>
<ul class="tabs" data-tabs="qfboql-tabs" id="example-tabs">
<li class="tabs-title" role="presentation"><a href="#panel1" aria-selected="false" class="twitter-icon" role="tab" aria-controls="panel1" id="panel1-label"> </a> </li>
<li class="tabs-title" role="presentation"><a href="#panel2" class="fb-icon" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label"> </a></li>
<li class="tabs-title is-active" role="presentation"><a href="#panel3" class="linkedin-icon" role="tab" aria-controls="panel3" aria-selected="true" id="panel3-label"> </a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1" aria-hidden="false">
<div class="row">
<div class="large-12 medium-12 columns">
<h2>Get Social </h2>
<p>To help get the conversation started you can use the sample post content.</p>
<p>Feel free to tweak them to reflect who you are. </p>
<div class="panel">
<p>Test here</p>
</div>
</div>
</div>
</div>
<div class="tabs-panel is-active" id="panel2" aria-hidden="false">
<p>TAB 2 - Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
<div class="tabs-panel is-active" id="panel3" role="tabpanel" aria-hidden="false" aria-labelledby="panel3-label">
<p>TAB 3 - Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
</div>
 
As you can see, is-active is being applied to every tab on click meaning they are all visible at the same time

Posts Followed

Following

  • No Content

Followers

  • No Content