Excluding jQuery script in a responsive layout

Question

I have a jQuery script for a "Back to Top" button as listed below:

<script type="text/javascript">
$(document).ready(function(){

// hide #back-top first
$("#TopButton").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#TopButton').fadeIn();
        } else {
            $('#TopButton').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('#TopButton, #logo').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

});
</script>

I have two stylesheets one for desktop and one for mobile. I am trying to hide the back to top button when the mobile stylesheet is used as so:

#TopButton {
display: none;
}

but it still appears. Is there anyway around this without having mess with the HTML?

Thanks in advance.

Matt Johnston · Accepted Answer · 2012-09-12 17:56:35Z

1

Your current method is having trouble because your javascript code .fadeIn() will override your display: none;

You need to set a CSS value that won't be affected by the jquery code. I'm assuming your #TopButton is absolutely positioned? If it is, try setting a property such as

left: -9999px;

That will keep it off the page, and it won't be affected at all when jQuery tries to fade it in.

Hopefully that helps you out

answered Sep 12, 2012 at 17:56

Matt Johnston

4124 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bntrns Over a year ago

Absolutely! Have to wait 4 minutes though!

user694844 · Accepted Answer · 2012-09-12 18:02:54Z

If you don't want to have to change your HTML or CSS your code could look like

if ($('#TopButton').css('display')!='none')
{
    // hide #back-top first
    $("#TopButton").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#TopButton').fadeIn();
            } else {
                $('#TopButton').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#TopButton, #logo').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });

    });

Collectives™ on Stack Overflow

Excluding jQuery script in a responsive layout

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related