Menu icon Foundation
Hiding Orbit Timer makes Orbit stop advancing

I've got my orbit rotator which was working fine. But I added "timer:false" into my HTML and now the timer is hidden AND the rotator does not advance anymore. Any ideas? I've got my starting

    with all the code (the only code I changed) below.

    Thanks.

    <ul class="orbit" data-orbit data-options="slide_number:false; resume_on_mouseout:true; timer: false;">

            

         

Orbittimerslides

I've got my orbit rotator which was working fine. But I added "timer:false" into my HTML and now the timer is hidden AND the rotator does not advance anymore. Any ideas? I've got my starting

    with all the code (the only code I changed) below.

    Thanks.

    <ul class="orbit" data-orbit data-options="slide_number:false; resume_on_mouseout:true; timer: false;">

            

         
Rafi Benkual almost 6 years ago

This is actually the intended behavior. timer: false indicated that you don't want a timer to advance the slide but that you want to use the directionalNav or bullets. To use the timer and not see the graphic you can change:

$orbit-timer-show-progress-bar: false !default;

or use css to hide it:

.orbit-timer {
left: -10000px;
top: auto;
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}


Alex Limenko almost 6 years ago

Hello,

Yes, timer: true/false behaves unexpectedly because documentation says "does the timer visible?"
visibility != functionality

I think there should be two options :

  timer: true/false // turn timer on or off
  timer_visible : true/false, // turn timer visibility on or off

It would make much more sense

Or at least edit the documentation...

Ziad Rahhal almost 6 years ago

Rafi Benkual, the documentation states the following:

timer: true, // Does the slider have a timer visible?

This is a very clear sentence with a misleading result. The sentence clearly talks about visibility and not about functionality. So either change the sentence in http://foundation.zurb.com/docs/components/orbit.html section Advanced, or change functionality. You can add an attribute such as auto:true/false for auto advancement and make timer for visibility.

I like foundation but honestly its documentation is weak.

Paul Wierda almost 6 years ago

Thanks, I was looking for this as well!

TheLoneCuber almost 6 years ago

The Foundation documentation is not weak, but the timer: false; option is questionable. Loading unnecessary and unused code and then hiding it offscreen is hardly best practice (especially on mobile devices) and unexpected. Orbit doesn't hide the navigation arrows or slide numbers when set to "false" does it?

There's no doubt that many users will want Orbit to advance the sliders whilst not showing the timer, so it seems to be a necessary option.

Rafi Benkual almost 6 years ago

Thanks Ziad,
We'll take a look at this.

Oxana over 5 years ago

Thank you so much! Very helpful!