CODEWITHSUNDEEP
jquerycss
Mahboob I
Mahboob I

Reputation: 77

Hiding and showing a div when body height is more than the height of the viewport

I have been trying to hide and show a fixed div based on the screen height. It is for a mobile phone wherein when ever a scrollbar shows up, the div appears. This is for screens which are small.

This is the code that I am using

$(document).ready(function () {
    if ($("body").height() > $(window).height()) {
        jquery("textdiv").fadeIn(200);
    } else {
        jquery("textdiv").hide(100);
    }
});

You can see what I have accomplished on this Jsfiddle.

Please let me know if there is anything else you would like from me. I am sure that the code I have used has some errors.

Upvotes: 1

Views: 1763

Answers (4)

Mahboob I
Mahboob I

Reputation: 77

In case someone else is looking for something similar, I have worked further on Explosion Pills' answer and added extra code that makes the code run when ever the window is resized and the div disappears when someone scrolls down to the bottom of the page.

Check out the code below and JS fiddle after that... 

$(window).bind('resize',function () {

    if ($("body").height() > $(window).height()) {
        jQuery(".textdiv").fadeIn(200);
    } else {
        jQuery(".textdiv").hide(100);
    }
});

$(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                    $(".textdiv").css("display","none");
                }else {
                    $(".textdiv").css("display","block");
                }
            });

http://jsfiddle.net/NWusD/

Upvotes: 0

Landon
Landon

Reputation: 4108

If you're looking for a responsive design, css might be a better option that doing things in jquery. You can use media queries as a "if/else" function on various attributes, in your case with screen width. Please read about it here. And here's an example:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  .yourclass {
    display:none;
  }
}

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Selector you are using is looking for a tagname of textdiv which obviously doesn't exist. Add dot prefix for class in a selector

$(".textdiv").fadeIn(200);

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

What you have seems to work fine, you just have some textual errors:

http://jsfiddle.net/NLjqK/1/

jquery -> jQuery

textdiv -> .textdiv

Upvotes: 1

Related Questions