SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Make something appear/disappear as it approaches top of window

    Long story short, I have a slider with a next/prev on the edge of the window in the vertical center of a page. For visual element clipping reasons, I'd like to make the item disappear when the element is X pixels (or less) from the top of the window when users start to scroll down.

    I'm guessing I would need to bind something to the scroll of the body to check the distance, and if too low, fade the elements out.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    I'm guessing I would need to bind something to the scroll of the body to check the distance, and if too low, fade the elements out.
    A good way to achieve that is to set up a timer that checks the distance on a regular basis, such as on a 500ms basis.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is that considered a safe amount of time that wouldn't burden most browsers/computer setups?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    Is that considered a safe amount of time that wouldn't burden most browsers/computer setups?
    Yes, half a second is plenty of time to not burdon a browser. They can even handle 50ms, but for the task that you have in mind, 500ms (half a second) is plenty enough. Feel free to increase it though to whatever you feel comfortable with. By experimenting with different delay speeds, you can check on how that will affect things with the effect that you want to apply.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi aaron.martone,

    My opinion would be to bind event on scroll, something like :

    $(window).bind("scroll", function(){
    //your code
    });

    before that unbind the event : $(window).unbind("scroll");
    PHP Programming Its more than just writing code

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jimmybrion View Post
    Hi aaron.martone,

    My opinion would be to bind event on scroll, something like :

    $(window).bind("scroll", function(){
    //your code
    });

    before that unbind the event : $(window).unbind("scroll");
    Using the onscroll event would result in extreme performance problems, because that function will be called every single time that the page scrolls. It's been known to grind IE to a halt, for example.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Really?
    So are you saying that it's computationally less expensive to fire a function that checks an element's position (where a reference to the element is cached) every 500ms, than to attach an onscroll event handler to the main window?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Really?
    So are you saying that it's computationally less expensive to fire a function that checks an element's position (where a reference to the element is cached) every 500ms, than to attach an onscroll event handler to the main window?
    It would be interesting to see a performance comparison of the different techniques when something is being faded in and out, perhaps with http://jsperf.com/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It would be interesting to see a performance comparison of the different techniques when something is being faded in and out, perhaps with http://jsperf.com/
    I agree.

    The reason I ask this, is because I had to do something similar recently and wasn't sure of the right way to go.
    I contemplated both techniques and ended up using onscroll.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Using the onscroll event would result in extreme performance problems, because that function will be called every single time that the page scrolls. It's been known to grind IE to a halt, for example.
    I deal with that simply by comparing the time between calls. If the difference is too small, don't execute the handler's code.
    Tab-indentation is a crime against humanity.


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
  •