What's wrong with this slideDown?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tdrsam
    New Member
    • May 2015
    • 97
    #1

    What's wrong with this slideDown?

    I have a jQuery function that is supposed to slide the page to a particular place, but it won't go.

    This is it:

    Code:
    $(document).ready(function(){
$(".col2 h1:first").slideDown("slow");
});
    As you can see it's supposed to slide to the first h1 in the section with the class of col2. Do animations not work on <section>'s? Is there something wrong with my function?
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      I have a jQuery function that is supposed to slide the page to a particular place, but it won't go.
      that’s because .slideDown() does not scroll to a position. it’s an animated version of .show().

        Comment

        • tdrsam
          New Member
          • May 2015
          • 97
          #3
          Thanks. After some googling I found that the function I need is 'animate'. Actually, this is the solution:

          Code:
          $(document).ready(function (){
$('html, body').animate({
scrollTop: $(".col2 h1:first").offset().top
}, 1000);
});

            Comment

            • tdrsam
              New Member
              • May 2015
              • 97
              #4
              I just wanted to add one more thing. I wanted this only for mobile devices, so I added a bit extra. It's now like this:

              Code:
              if (document.documentElement.clientWidth < 400) {
$(document).ready(function (){
$('html, body').animate({
scrollTop: $(".col2 h1:first").offset().top
}, 1000);
});
}

                Comment

                • tdrsam
                  New Member
                  • May 2015
                  • 97
                  #5
                  Actually, I had ANOTHER issue with this. This function was breaking the rest of my js file when the element didn't exist on a page, so I made the (hopefully) final code this:

                  Code:
                  if (document.documentElement.clientWidth < 400) {
if($(".col2 h1:first").length){
$(document).ready(function (){
$('html, body').animate({
scrollTop: $(".col2 h1:first").offset().top
}, 1000);
});}}
                  Last edited by tdrsam; Jun 22 '15, 01:14 AM. Reason: Had double [code] tags

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      Code:
                      if($(".col2 h1").length){
                      would suffice, if you can find any <h1> under that class, you will automatically have a first <h1> there (and additionally you don’t need at this point the overhead of the :first selector)

                        Comment

                        • tdrsam
                          New Member
                          • May 2015
                          • 97
                          #7
                          I've tested this and your right. In fact, I don't think I even have a second h1 on any pages, anyway.

                            Comment

                            • Dormilich
                              Recognized Expert Expert
                              • Aug 2008
                              • 8694
                              #8
                              Code:
                              $('html, body')
                              here it would suffice to do either $('body') or $(document.body ) since no <h1> is allowed outside <body>.

                                Comment

                                • tdrsam
                                  New Member
                                  • May 2015
                                  • 97
                                  #9
                                  Right again. And, to keep the file a few bytes smaller I left it simply as $("body')

                                    Comment

                                    Previous template Next
                                    Working...