Encounter problems with Scrolldeck.js

JavaScript
1

Hello everyone,

I’ve been working on a single page website recently and trying to put things together with Scrolldeck.js (by John Polacek) and integrate some accordion contents into some sections of the page. Once i added the accordion content, i’ve found there are unknown spaces at the bottom of each sections of content that is hidden (it was hidden because i hide them all and let the first one display only until user click on it). And i assume the reason why it’s happened was because the height has been calculated when the page was load. If that’s the case is there anyway that i could make the height to become a variable?

Another issue that i’ve got which happen in firefox only is the navigation does not stop precisely on where the user clicked. The content does scroll to destination where user clicked but the “active” status / class does not added to the selected navigation menu and always 1 step behind. It will only stop at where the user clicked if i scroll a few pixels down with mouse, or else the “active” state will be stop at the previous section. Does anyone know why is that happening? i’ve tried open John’s example script on firefox and there is no problem at all.

Thank you.

2

Seems like my poor explanation confused everybody lol 147 views, non reply.

Please allow me to try again.

I’m having two problems while using scrolldeck.js to build a website.
1 - Navigation buttons’ active state (user clicked) does not stop at where it suppose to be in firefox
2 - Height size of each slides with variable content does not fill up the gap / empty space when user interacted.

3

Hi kurosagi,

Welcome to the forums!

The reason you didn’t get any answers to your question is that you gave us nothing to go on.

You would get a more favourable response if you could provide some code with which we can reproduce your problem?
Also, it would be helpful if you could post a link to a page where we can see this happening.

4

Dear Pullo,

Thank for your the warming welcome :slight_smile: Been joined the forum for a year and this is my first time to made a post.

Thank you for your tips and advices, i thought the reason why i’m not receiving any response was because of my poor english did not clarify the question enough. I apologize for my clumsy action that i did not provide any sample of code or links for references. Unfortunately i do not have the files with me at the moment as it left in my computer in the office. I’ll definitely organise everything and provide link on Monday.

Thank you for the attention. Wish you all have a great weekend :slight_smile:

Cheers

5

Hello everyone,

I apologize for did not provide any references of code earlier. Please check the following URL for the site that i’m having problem with:
http://kurosagi.x10.mx/

Thanks for the help :slight_smile: . Really appreciate !

6

Hi there,

In your file “main.js” you initialize the scrolldeck before you hide the accordion.
This means that scrolldeck calculates the height of the containing elements to include the accordion’s hidden content.

Just swap these two things round and all will be well.

$(document).ready(function(){ 
  var deck = new $.scrolldeck({
  buttons: '.nav-button',
  slides: '.page',
  offset: -247,
  duration: 2000,
  easing: 'easeInOutExpo'
  });
  
  //Accordion
  $('.accordion').hide();
  $('acc_trigger:first').addClass('expanded').next().show();
  $('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
      $('.acc_trigger').removeClass('expanded').next().slideUp(); //Remove all "active" state and slide up the immediate next container
      $(this).toggleClass('expanded').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
    }
    return false;
  });
  
  //Rest of your code ...
});

I couldn’t reproduce your other issue on Firefox. Sorry.

7

I managed to reproduce. Sorry, I was looking at the wrong thing.

Anyway, this effect is being caused by the declaration body{margin:0} in your normalize.css file

Remove that and it will work as expected.

8

Hello Pullo,

Thank you for your help! Actually i’ve tried that about 10 hours ago swapping the accordion to the top before the scrolldeck around. The height size of those “slide” which contain accordion content does not expand to the full. Unfortunately i was unable to make changes on the code now and i left in the office again. I should have bring them back home today, i’m sorry. I’ll do a backup tomorrow and try again.

Thank you very much!

9

Thanks for the tips Pullo, I’ll definitely try that later. Apologize for being so stubborn >.< i’m still very noob to the role

10

Oops, you’re right!
I’m afraid that’s more of a CSS issue, however.
It’s probably a good idea to head over to the CSS forum and see if anyone can tell you why this is happening.
Once we understand the cause, maybe we can remedy this using JS (for example, it’s quite easy to apply CSS properties to elements on the fly)

11

Hi again,

I’ve just been playing around with this and I’ve managed to boil your problem down a little more.

The thing is that scrollorama is assigning each of your scroll elements (sections) an absolute position which it uses for calculating where it has to scroll from and to.
If you remove this, then your scrolling breaks and you get your funny spacing back.

If the sections have an absolute position, then the accordions will always expand behind or on top of them, but not push them down.

To make an accordion expand on the top of its neighbouring section, add the following inline CSS to the section containing the accordion.

For example:

<section id="why-jo" class="page" style="overflow:visible; z-index:9999;">

So, there you have it.
I’ve made a minimal version for you which reproduces the problem, if you want to go ask in the CSS forum:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!--<link rel="stylesheet" href="http://kurosagi.x10.mx/css/main.css">-->    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <style>
    body {font-size: 62.5%; font-family:Arial,Helvetica,sans-serif; line-height: 1.4; background:#fff;}
    .page { display:block; width:100%; margin:0 auto; padding:0 0 85px 0; }
    #why-jo { color:#fff; background:#3d3934; }
    #about { background:#bbb641; }
    #why-jo .row { width:746px; margin:0 auto; padding:0 84px; }
    #about { color:#fff; }
    </style>
  </head>
  
  <body>
    <section id="why-jo" class="page">
      <header><h1>Contact</h1></header>
      <h2>Adipiscing Sem Nibh, Tortor<br />Malesuada Tellus Vestibulum Fusce.</h2>
      <div id="accordion" style="width:532px;">
        <h3>Section 1</h3>
        <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
          ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
          amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
          odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </p>
        </div>
        <h3>Section 2</h3>
        <div>
          <p>
          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
          purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
          velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
          suscipit faucibus urna.
          </p>
        </div>
        <h3>Section 3</h3>
        <div>
          <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
          Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
          ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
          lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
          </p>
          <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
          </ul>
        </div>
        <h3>Section 4</h3>
        <div>
          <p>
          Cras dictum. Pellentesque habitant morbi tristique senectus et netus
          et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
          faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
          mauris vel est.
          </p>
          <p>
          Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos.
          </p>
        </div>
      </div>      
    </section>
    
    <!-- SECTION :: #why-jo -->
    <section id="about" class="page">
      <header><h1>Condimentum Sit Amet Fusce Magna</h1></header>
      <h2>Adipiscing Sem Nibh, Tortor<br />Malesuada Tellus Vestibulum Fusce.</h2>
    </section>    
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://kurosagi.x10.mx/js/vendor/jquery.scrollTo-1.4.3.1.min.js"></script>
    <script src="http://kurosagi.x10.mx/js/vendor/jquery.scrollorama.js"></script>
    <script src="http://kurosagi.x10.mx/js/vendor/jquery.easing.1.3.js"></script>
    <script src="http://kurosagi.x10.mx/js/vendor/jquery.scrolldeck.js"></script>
    <script>
      $(document).ready(function(){
        $( "#accordion" ).accordion({
          heightStyle: "content",
          collapsible: true,
          active: false
        });
          
        var deck = new $.scrolldeck({
          buttons: '.nav-button',
          slides: '.page',
          duration: 2000,
          easing: 'easeInOutExpo',
          offset: -247
        });
      });
    </script>
  </body>
</html>