0

I basically have a script that initiates 700px from a div however just realized it doesn't work if the browser is resized. Can I use a percentage to make it responsive?

        $(window).scroll(checkY);

    function checkY() {
        //save this value so we dont have to call the function everytime
        var top = $(window).scrollTop();
        $(".title").each(function () {
            var target = $(this).closest(".content");
            var tTop = target.offset().top - 700; 
            var tBottom = target.offset().top + target.outerHeight();
            if (top >= tTop && top <= tBottom) {
                console.log("Show");
                $(this).show();
            } else {
                console.log("Hide");
                $(this).hide();
            }
        });
    }
    checkY();

I've tried adding this

var tTop = target.offset().css("height", height + margin.top + "12%");
user2252219
  • 835
  • 3
  • 17
  • 41
  • You could calculate the percentage as pixels .... – Jeremy J Starcher Jul 14 '14 at 04:03
  • But if its pixels then it doesn't change when the browser is resized? – user2252219 Jul 14 '14 at 04:10
  • 1
    There is a `resize` event and you re-call your function on that event. You might want to throttle it though so you don't call your event for every pixel the image is resized. See this discussion: http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac – Jeremy J Starcher Jul 14 '14 at 04:11
  • Google is your best friend: http://stackoverflow.com/questions/2460662/how-to-set-width-of-a-div-in-percent-in-javascript – EGOrecords Jul 14 '14 at 07:06

0 Answers0