SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Encounter problems with Scrolldeck.js

    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. #2
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    Dear Pullo,

    Thank for your the warming welcome 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

    Cheers

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 . Really appreciate !

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code JavaScript:
    $(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. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pullo View Post
    I couldn't reproduce your other issue on Firefox. Sorry.
    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. #8
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

    Code JavaScript:
    $(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.
    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. #9
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kurosagi View Post
    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.
    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. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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:

    HTML Code:
    <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:

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •