Posts by Jaegers

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says
$(".option.digitalPrice").on("click", function () {
    $(this).toggleClass("selected");
});
36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says

Reminded me of this ..

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says

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

@abhimanyusharma003 Many thanks.

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-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