Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery scroll to certain height problem

    Hi, need help on this one getting real bald here :P
    Im working on this website that one a page there has to be a restriction on how high you can scroll.
    I have this div that is only showing a part of its content, and when i scroll I want it to stop scrolling at a height or position.

    This is the code:

    Code:
    $(window).scroll(function() {   
    if($('#servicediv').length) {
     $(window).scroll(function() {
    if ($(window).scrollTop() >=380) {
    $(window).scrollTop(380);
     }
     });
    }
    });
    But the problem is that if you keep trying to scroll either with the scrollbar or with the mouse it glitches and the div keeps "twitching".

    Is there anyway to make it stop twitching? I just want it to STOP and that you shouldnt be able to scroll it up anymore but you could scroll it back down again.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are binding to the scroll() event twice in quick succession which may in part account for the twitching.

    If '#servicediv' exists on the page then there is no need to check its length.

    Code:
    $(window).scroll(function () {   
        if ($(window).scrollTop() < 380) {
            $(window).scrollTop(380);
        }
    });
    but you'll need to test this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now it looks like this:

    Code:
    $(window).scroll(function() {   
    if($('#servicediv')) {
    $(window).scroll(function () {   
        if ($(window).scrollTop() > 380) {
            $(window).scrollTop(380);
        }
    });
    }
    });
    But it still twitches when you try to scroll more. Is there a way to make stop the function if you keep scrolling?

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are still attaching a handler to the scroll() event twice
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry!
    Changed it to

    Code:
    if($('#servicediv')) {
    $(this).scroll(function () {
    if ($(window).scrollTop() > 380) {
    $(this).stop().scrollTop(380);
    }
    });
    }
    But it still twitches when you try to scroll it further. Works great in firefox. But twitches on safari, chrome and IE

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I recall that certain browsers trigger the scroll() event for every single movement, whereas others trigger it once when the scroll is complete (or after a certain interval..?). But this information may be out of date.

    I would have thought jQuery would equalise this behaviour on the scroll() event. Otherwise, there is a de-bouncing jQuery plug-in somewhere.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. actually, it just occurred to me that it may be possible to convince the browsers that a certain area (top or bottom of page?) is not scrollable using just CSS.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm de-bouncing script . I will look into that.

    BUT.

    I changed the code around and got this:

    Code:
    $(window).scroll(function(){
        if  ($(window).scrollTop() > 380){
             $('#servicediv').css({position:'relative',top:380});
        } else {
             $('#servicediv').css({top:0});
            }
    });
    Now it dosent twitch while scrolling down. But it twitches a bit when I want to scroll up (scroll the div down).
    Dont think I cant get a css function that dosent let you scroll. I have pages that you need to scroll on also.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I was speculating to use absolute position, negative, and/or large margins so that the DIV is not part of a scrollable region - but I'm just thinking out loud

    There are quite a number of jQuery scroll-plugins but it would require some investigation as I suspect most are to intended to achieve snazzy effects, rather than solving issues.

    de-bounce
    Last edited by AndrewGSW; 11-14-2012 at 11:22 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the link, will check it out.

    I have this now:

    Code:
    $(window).scroll(function(){
        if  ($(window).scrollTop() > 400){
             $('#servicediv').css({position:'relative',top:400});
        } else {
             $('#servicediv').css({'top':30%});
            }
    });
    It basically does what I want it to do. BUT the div that scrolls up ends after the text. I have a large bg image that cover up the site. but when the div scrolls up you can see that the image is revealed behind it. I dont know how to fix this. If I have height : 100% on the div it just scrolls upp way to much.

    And I dont know what height to set because on other resolution it will look weird.

    Any good advice? I think it still has to do with my script

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Height, 100% does not work as most people would anticipate: it requires all parent elements to also have this height setting, but this possibly introduces other display-concerns.

    In general it is better, and easier, to explore CSS solutions before resorting to JS. I would experiment with margins, negative margins, and overflow css properties. I appreciate, however, that you might wish to experiment with the JS code that you already have. But, of course, I can only speculate as I haven't seen your page.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I appreciate all the help you´ve given me

    I think I finally did it!

    this is the JS:

    Code:
    $(window).scroll(function(){
        if  ($(window).scrollTop() > 200){
             $('#servicediv').css({position:'relative',top:200});
        } else {
             $('#servicediv').css({'top':30% });
            }
    });
    and this is the CSS:

    Code:
    #servicediv {
    margin-top: 100px;
    top:80%;
    width: 100%;
    background:url(images/content_bg.png);
    height: auto;
    position: relative;
    z-index: 800;
    bottom: 0;
    min-height: 450px;
    }
    #servicewrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: auto;
    }
    Im guessing a all-time css and js programmer would go - FACEPALM on this. But it seems to be doing what I want in IE, Chrome, Firefox and Safari.

    So moderators can close this topic as solved

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Well done

    You can mark it as solved when creating (or possibly editing) a post.. but I'm not sure where the option is hidden; I think it's in the options underneath the smilies.

    Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

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