Sequence doesn't seem to be respecting my options (next/prev button defaults unclear)

[Kerrick]

Version: 0.5.2 Beta

I've set Sequence up like so:

$(document).ready(function () {
  var sequence = $('#sequence').sequence({
    preloader: false,
    animateStartingFrameIn: true,
    nextButton: true,
    prependNextButton: false,
    prevButton: true,
    prependPrevButton: false,
    pauseIcon: true,
    prependPauseIcon: false
  }).data('sequence');
});

<div id="sequence">
  <ul>
    <li class="sequence-item websites">
      <h2 class="animate-in">Web design and development</h2>
      <p class="animate-in">From a single-page small business website to a full-featured web application, we do it all. Using modern technologies and best practices, we can develop one website that works on computers, smartphones, and tablets! And it's all available at an affordable price.</p>
      <a class="animate-in call-to-action" href="/websites/">Learn More &raquo;</a>
      <img class="animate-in image-one" src="images/devices/phone-kerricklong.png" width="195" height="383" alt="Screenshot of kerricklong.ocm on a phone" />
      <img class="animate-in image-two" src="images/devices/laptop-kerricklong.png" width="440" height="248" alt="Screenshot of kerricklong.com on a laptop" />
    </li>
    <li class="sequence-item photo-video">
      <h2>Photography and Video Services</h2>
      <p>Websites and marketing materials are great, but to really attract customers you need powerful imagery. Our photographers and videographers ready to shoot and film your business so you can bootstrap your marketing with professional, personalized media.</p>
      <a class="call-to-action" href="/photovideo/">Learn More &raquo;</a>
    </li>
    <li class="sequence-item something">
      <h2>Some other service offering</h2>
      <p>Write some copy here!</p>
      <a class="call-to-action" href="/something/">Learn More &raquo;</a>
    </li>
    <li class="sequence-item social-media">
      <h2>Social media strategies</h2>
      <p>Write some copy here!</p>
      <a class="call-to-action" href="/social-media/">Learn More &raquo;</a>
    </li>
  </ul>
  <b class="next"><i class="icon-r" data-icon="&#xf04e;">Next</i></b>
  <b class="prev"><i class="icon-r" data-icon="&#xf04a;">Previous</i></b>
  <b class="pause-icon"><i class="icon-r" data-icon="&#xf04c;">Pause</i></b>
</div>

#sequence{-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;background:#222222;padding:24px;color:#ffcc00;height:384px;position:relative;overflow:hidden;}
#sequence > b{position:absolute;bottom:24px;right:24px;}
#sequence > b.prev{right:72px;}
#sequence > b.pause-icon{right:48px;}
.sequence-item > *{-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-ms-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;position:absolute;}
.sequence-item > *.animate-in{-webkit-transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;}
.sequence-item > *.animate-out{-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-ms-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;}
.sequence-item h2{text-transform:uppercase;font-family:"Oswald Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:700;font-size:48px;line-height:60px;left:480px;top:-216px;width:432px;height:144px;text-align:center;}
.sequence-item h2.animate-in{top:24px;}
.sequence-item h2.animate-out{top:456px;}
.sequence-item p{font-size:24px;line-height:36px;left:960px;top:156px;width:432px;height:192px;}
.sequence-item p.animate-in{left:480px;}
.sequence-item p.animate-out{left:-432px;}
.sequence-item .call-to-action{height:48px;width:192px;background:#ffcc00;color:#222222;left:504px;top:432px;}
.sequence-item .call-to-action.animate-in{top:360px;}
.sequence-item .call-to-action.animate-out{top:-48px;}
.sequence-item .image-one{left:24px;top:-408px;}
.sequence-item .image-one.animate-in{top:24px;}
.sequence-item .image-one.animate-out{top:432px;}
.sequence-item .image-two{left:-480px;top:168px;}
.sequence-item .image-two.animate-in{left:24px;}
.sequence-item .image-two.animate-out{left:960px;}
.sequence-item img{border:0;}

You can view it in action here: http://zaltin.com/ (Note I've let the images 404 so you can see the next/prev buttons through them.)

Sequence doesn't seem to be respecting my options. It inserts a previous, next, and pause button even though I've told it not to. Plus, the pause button appears and disappears based on where your mouse cursor is. Further, it won't advance past slide one.

Am I doing something wrong, or is this a bug in sequence?

[IanLunn]

Hi Kerrick,

The next/prev buttons could either do with being explained better in the documentation or changed to prevent the understandable confusion you've pointed out here.

When using nextButton: true, the default buttons will be used wether you've specified they should be prepended or not. So for now, please change your nextButton/prevButton options to:

nextButton: ".next",
prevButton: ".prev",

That will get your custom buttons working.

Usually when frames won't advance, it's because Sequence is waiting on elements to stop animating (and it won't advance until they have). To make it easier to debug this situation, I usually comment out all but two of the frames, then comment out each element within a frame to find out which one is preventing Sequence from advancing. It appears your paragraph tag within the frames is doing this.

I'll investigate further and get back to you.

[IanLunn]

Ok, the latter is a bug in Sequence (or more accurately, me not thinking!).

Each element at the moment requires a class attribute. Please give your paragraph and h2 elements classes to workaround this. They don't need to be referenced in the CSS but a class MUST exist for Sequence to be able to count each element when waiting for animations to complete.

I'll add this as a bug.

Also, if you're not using the default next/prev/pause buttons, you can get rid of this code:

<img class="pause-icon" src="./Zaltin Technologies_files/pause-icon.png" alt="undefined" style="display: block; "><img class="prev" src="./Zaltin Technologies_files/bt-prev.png" alt="&amp;#lt;"><img class="next" src="./Zaltin Technologies_files/bt-next.png" alt="&amp;#gt;">

Thanks for your feedback. That's a big bug that can be quashed!

[Kerrick]

Actually, that pause-icon image isn't in my HTML file, it's being inserted by JS, I'm guessing by Sequence. However, changing pauseIcon to '.pause-icon' rather than true seems to have gotten rid of it.

Thank you for the debugging! Do you think class-less elements will come in the future?

That said, after adding classes to the elements and changing the nextButton, prevButton, and pauseIcon options to selectors rather than booleans, almost everything is working wonderfully. The diffs are below, and the changes are live at http://zaltin.com/ so you can see them in action.

However, I am a bit confused about the way the pause icon acts. It seems that the icon disappears until you hover over the slider, when it appears--I'm guessing because the slider is pausing. However, if I try to hover over the pause button itself, it disappears again. This seems to mean that the pause icon is less of a button and more of an indicator... Is this the intended functionality? If so, is there a plan to add a play/pause toggle button so the slideshow can be paused/resumed without worrying about hovering over the sequence area?

Diffs:

index.html

@@ -44,25 +44,25 @@
                <div id="sequence">
                    <ul>
                        <li class="sequence-item websites">
-                           <h2 class="animate-in">Web design and development</h2>
-                           <p class="animate-in">From a single-page small business website to a full-featured web application, we do it all. Using modern technologies and best practices, we can develop one website that works on computers, smartphones, and tablets! And it's all available at an affordable price.</p>
-                           <a class="animate-in call-to-action" href="/websites/">Learn More &raquo;</a>
-                           <img class="animate-in image-one" src="images/devices/phone-kerricklong.png" width="195" height="383" alt="Screenshot of kerricklong.ocm on a phone" />
-                           <img class="animate-in image-two" src="images/devices/laptop-kerricklong.png" width="440" height="248" alt="Screenshot of kerricklong.com on a laptop" />
+                           <h2 class="heading animate-in">Web design and development</h2>
+                           <p class="copy animate-in">From a single-page small business website to a full-featured web application, we do it all. Using modern technologies and best practices, we can develop one website that works on computers, smartphones, and tablets! And it's all available at an affordable price.</p>
+                           <a class="call-to-action animate-in" href="/websites/">Learn More &raquo;</a>
+                           <img class="image-one animate-in" src="images/devices/phone-kerricklong.png" width="195" height="383" alt="Screenshot of kerricklong.ocm on a phone" />
+                           <img class="image-two animate-in" src="images/devices/laptop-kerricklong.png" width="440" height="248" alt="Screenshot of kerricklong.com on a laptop" />
                        </li>
                        <li class="sequence-item photo-video">
-                           <h2>Photography and Video Services</h2>
-                           <p>Websites and marketing materials are great, but to really attract customers you need powerful imagery. Our photographers and videographers ready to shoot and film your business so you can bootstrap your marketing with professional, personalized media.</p>
+                           <h2 class="heading">Photography and Video Services</h2>
+                           <p class="copy">Websites and marketing materials are great, but to really attract customers you need powerful imagery. Our photographers and videographers ready to shoot and film your business so you can bootstrap your marketing with professional, personalized media.</p>
                            <a class="call-to-action" href="/photovideo/">Learn More &raquo;</a>
                        </li>
                        <li class="sequence-item something">
-                           <h2>Some other service offering</h2>
-                           <p>Write some copy here!</p>
+                           <h2 class="heading">Some other service offering</h2>
+                           <p class="copy">Write some copy here!</p>
                            <a class="call-to-action" href="/something/">Learn More &raquo;</a>
                        </li>
                        <li class="sequence-item social-media">
-                           <h2>Social media strategies</h2>
-                           <p>Write some copy here!</p>
+                           <h2 class="heading">Social media strategies</h2>
+                           <p class="copy">Write some copy here!</p>
                            <a class="call-to-action" href="/social-media/">Learn More &raquo;</a>
                        </li>
                    </ul>

script.js

@@ -7,11 +7,11 @@ $(document).ready(function () {
   var sequence = $('#sequence').sequence({
     preloader: false,
     animateStartingFrameIn: true,
-    nextButton: true,
+    nextButton: '.next',
     prependNextButton: false,
-    prevButton: true,
+    prevButton: '.prev',
     prependPrevButton: false,
-    pauseIcon: true,
+    pauseIcon: '.pause-icon',
     prependPauseIcon: false
   }).data('sequence');
 });

[IanLunn]

Ah right. I downloaded your page locally, hence thinking those buttons were a part of your page. Yes, they are infact inserted by Sequence.

Yes, class-less was intended from the start and is clearly an error in the code which you've brought to light. I'll aim to fix this either in 0.6 or the version after that.

The pause icon is an indicator as opposed to a button. I will certainly add a default pause button in the future. I am yet to test a custom pause button myself but you should be able to create your own using the startAutoPlay and stopAutoPlay functions.

Thanks again for your feedback. Your slider is looking great!

[Kerrick]

You're welcome, and thank you for Sequence! :D

I may try to help with the code in the future, once I'm better with JS, but the least I can do is submit bug reports. <3 FOSS!

[IanLunn]

The class issue should now be fixed, courtesy of redclov3r's fix #75.

I ran it on your current instance of Sequence and the one I tested yesterday. Seems to be working as expected now.

I'll change how the next/prevButton options work in 0.6.2 so they make more sense.

[Kerrick]

:+1: :cool: :smile:

[IanLunn]

Made minor changes to v0.6.4 that makes the nextButton/prevButton options work as described in the documentation.