Posts by Jaegers

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says
$(".option.digitalPrice").on("click", function () {
    $(this).toggleClass("selected");
});
36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

For me it is white text on black background. I will immediately close the tab. What about you?
Sticky header, i.e. when header always stays on top when you scroll. This is the worst user experience that went to masses with help of twitter bootstrap.
36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

Reminded me of this ..

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

sweet works a charm thanks
You are welcome. But one more thing I still missed.. =)

Add the animateBoxes() function call. Required for users with pretty large screens.

    ...

    animateBoxes(); // it was missed

    $(window)
        .scroll(animateBoxes)
        .resize(animateBoxes);
36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

Still doesnt work, I must be doing something fundamentally wrong :(
No, my fault. Somehow I completely forgot about events.

You can just copy paste this function and everything should work. It contains isOnScreen method, your existing code, and some my additions.

(function (window, $) {
    "use strict";
    /*jshint validthis: true*/

    $.fn.isOnScreen = function () {
        var $window, viewport, bounds;

        $window = $(window);
        viewport = {
            top : $window.scrollTop(),
            left : $window.scrollLeft()
        };
        viewport.right = viewport.left + $window.width();
        viewport.bottom = viewport.top + $window.height();

        bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return !(
            viewport.right < bounds.left ||
            viewport.left > bounds.right ||
            viewport.bottom < bounds.top ||
            viewport.top > bounds.bottom
        );
    };

    var $boxes = $(".box").hide();

    function animateBox() {
        var $this = $(this),
            time = $this.attr('data-time'),
            name = $this.attr('data-animate');

        window.setTimeout(function () {
            $this.show().addClass(name);
        }, time);

    }

    function animateBoxes() {
        if ($boxes.isOnScreen()) {
            $boxes.each(animateBox);
        }
    }

    $(window)
        .scroll(animateBoxes)
        .resize(animateBoxes);

}(this, this.jQuery));
36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

@Jaegers if I knew how to use that code, it would be great. I added it but Not sure why, but isnt working lol
When added, this function can be used as follows..
(function ($) {
    if ($(".la_products").isOnScreen()) {
        // stuff that animates products
    }
}(jQuery));
36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says


No problem man, i hope you can figure some of it out. Pretty straight forward i guess.

Cheers

Lester

Thankyou, I am using a template off TF.

So far so good, fits the whacky purpose we are aiming for.

Demo here

You should correct this script to run only when portion of the page with flyout products is visible on screen, i.e. is in viewport.

See jQuery solution

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

@phpbits Thank you for your solution, but I asked to advise only the function name =)

@abhimanyusharma003 Many thanks.

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

The function converts string containing spaces into dash separated, lowercase string. For example “A few words” – > “a-few-words” or “A few words” – > “a_few_words”.

The name must be short and meaningful. Thank you =)

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 3 years
Jaegers says

PS: getElementsByClassName does not work in IE8 :s
Try the .querySelectorAll() method, IE8 supports it.
by
by
by
by
by
by