Grow your CSS skills. Land your dream job.

Small JS bump needed

  • # January 27, 2013 at 3:58 pm

    Hey all,

    fiddled for several hours now but can’t find a solution to this simple thing.

    I got a fullscreen image that is put in by [backstretch.js](http://srobbin.com/jquery-plugins/backstretch/ “”). The preloader for this image is this:

    jQuery(function($){
    $(window).on(“backstretch.show”, function () {
    $(“#preload”).fadeOut(‘slow’);
    });
    });

    works fine.

    On another page i have an image stretched into a div with id=”letterbox” by backstretch.

    if i change (window) to (“#letterbox”) it does not work. Isn’t this the right approach?

    I’ll never get JS :(.

    # January 28, 2013 at 12:13 pm

    i dont think that you can use the .on event here. if you go to there [homepage](http://srobbin.com/jquery-plugins/backstretch/ “homepage”) there is a section for using on block level elements. here is that code

    $(“#letterbox”).backstretch(“path to your image”);

    # January 28, 2013 at 12:21 pm

    Yes and that’s working quite well. I only need my preloader set so he knows when the image is isloaded inside the div.

    the backstretch itself is perfectly okay..

    # January 28, 2013 at 1:12 pm

    Okay sorry. didnt read the question that well. can you post some screenshots or a codepen so i can se what the exact problem is? :)

    # January 28, 2013 at 3:44 pm

    yeah sure. I’ve put it up: [Tingeltangel](http://tingeltangel.megavillain.org/?p=59 “”)

    you see? the preloader image won’t fade. :(

    I think it’s only a small thing somehow…

    # January 28, 2013 at 5:02 pm

    the only thing i could see was an extra . infront of backstretch. it sould be

    $(window).on(“backstretch.show”

    as it is now you are listening for the wrong event.
    hope that helped. i have no way to test if that’s working, but let me know.

    # January 29, 2013 at 1:11 am

    That’s it. I’m embarrassed. Thank you, Carl!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".