CODEWITHSUNDEEP
jquery
psvj
psvj

Reputation: 8840

Create a Div that appears at the bottom of a page & closes on click using Jquery

I have been trying to create a div that appears when a user scrolls to a certain height above the bottom of the page-- and can then be closed by clicking a close button.

In order to facilitate the animation of this div (the appearing and closing on click) I am using two jquery functions:

here is the first function:

jQuery(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
$('.bpop-res').fadeIn();
}
});
});

which makes the div appear a certain height above the bottom of the page

Here is the second function:

jQuery(document).ready(function(){
jQuery('#bpop-close').live('click', function(event) {        
jQuery('.bpop-res').toggle('hide');
});
});

to close the div on click of a button.

While each of these functions work fine individually on separate pages, I can't seem to get them to work together on the same page.

Here is a fiddle with both functions-- you'll notice that only the first one (the function that makes the div appear on scroll) works

Here is a fiddle with only the close on click function. You'll notice that it works fine here.

I am pretty new to jquery and programming in general-- so is there anything obvious that I have done wrong here when trying to combine these two functions?

Upvotes: 0

Views: 44

Answers (3)

AmanVirdi
AmanVirdi

Reputation: 1685

Your code is correct. just remove the jQuery with $ sign.

$(document).ready(function(){
   $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
           $('.bpop-res').fadeIn();
       }
    });
    $('#bpop-close').on('click', function(event) {     //Change .live() to .on()
        alert("hide");
         $('.bpop-res').hide();
    });
});

Upvotes: 0

Nischaal Cooray
Nischaal Cooray

Reputation: 210

I think your issue was that you were using the keyword 'jquery' instead of '$'. This fiddle should work for both functions!

$(document).ready(function () {
    var closed = false;
    $(window).scroll(function () {

        if ($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
            if (closed === false) $('.bpop-res').fadeIn();
        }
    });
    $('#bpop-close').click(function () {
        $('.bpop-res').hide();
        closed = true;
    });
});

I also added a condition to ensure that the box remains closed after it's been closed once, but you can remove this if you want.

Upvotes: 1

AlexJaa
AlexJaa

Reputation: 389

Replace jquery to $... Change your code to this:

$(document).ready(function(){
    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 900) {
           $('.bpop-res').fadeIn();
       }
    });
    $('#bpop-close').click(function(event) {        
         $('.bpop-res').toggle('hide');
    });
});

Just edit your JSFiddle...

Upvotes: 0

Related Questions