Javascript - hide event after checking if user is mobile won't work

Question

I'm adding a hide event to this script so the button doesn't show in mobile and it won't work. Can anybody tell me why it is so, please?

<SCRIPT>
      var $ = jQuery.noConflict();
      jQuery(document).ready(function( $ ){
      scrollToTop.init( );
      });
      var scrollToTop =
      {

    init: function(  ){
//Check to see if the window is top if not then     display button
      $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
      } else {
      $('.scrollToTop').fadeOut();
      }
      });
 // Click event to scroll to top
      $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
      });

 // Check to see if window is mobile, if yes then      hide button
      $(window).on('resize', function()
      {
      if($(this).width() > 600)
      {
      $('.scrollToTop').hide();
      }
      });
// Check to see if window is mobile, if yes then      hide button

      }
      };
</SCRIPT>

And these are the styles:

<STYLE>
      .scrollToTop{
      width: 100px;
      height: 130px;
      padding: 10px;
      text-align:center;
      background: whiteSmoke;
      font-weight: bold;
      color: #444;
      text-decoration: none;
      position:fixed;
      bottom: 75px;
      right: 40px;
      background: url('../_images/icons/arrow_up.png') no-repeat 0 20px;
      }
</STYLE>

And this is the what the html looks like:

 <HTML>
   <BODY>
      <NAV>
      <a href='#top_of_page' class='scrollToTop' style='display: inline;'>Scroll To Top</a>
      </NAV>
  </BODY>
</HTML>

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

Beside other considerations, it seems to work if you remove the </p> after the end of the init function (already done in your edit) and add a reference to the jQuery library in the head of your HTML, like this:

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js</script>
  </head>

You may also check the scroll function, which is showing the arrow again every time the page is scrolled down and put your hide condition also there:

$(window).scroll(function(){
    if (!isMobile) {
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    }
});

You may also consider to put in your page a better check for mobile devices like one of these described here: What is the best way to detect a mobile device in jQuery? because your .scrollTop arrow will be displayed also when the page is loaded in portrait mode.

edited May 23 '17 at 12:08

Community

1
1

answered Dec 02 '16 at 07:35

deblocker

7,277
2
18
49

I'm sorry the
got into the code when I was trying to format it for posting.For some reason it just doesn't work
– Ramon D Marin Dec 02 '16 at 13:53
Try this fiddle: https://jsfiddle.net/fxb8q5t0/ resize the output window and you will see the link disappearing, Maybe the problem is elsewhere. Where is in the html the reference to jQuery? – deblocker Dec 03 '16 at 09:48
I think there's a typo in your script reference. I put the reference though and it still doesn't hide in mobile. I'd appreciate it very much if you could take a look at the page:http://future-of-humanity.orgfree.com/_testing/home.html – Ramon D Marin Dec 04 '16 at 01:59
Hi Ramon, every time you scroll down, the arrow will be displayed again by the `$(window).scroll(function()`, maybe you should put the check for the window width also there. You may also consider to combine script_toggle.js and script.js, both will do a check for window.width to perform some actions, so you have more control about what you are doing. – deblocker Dec 04 '16 at 06:36
Hi deblocker, I changed the check for mobile devices and still nothing. I guess that's not where the problem is because the check and hide event work perfectly in the "mobile_script.js" – Ramon D Marin Dec 06 '16 at 02:02
Hi Ramon, the fadeIn() function will show the arrow again every time you scroll down. Please see my code sample. – deblocker Dec 06 '16 at 07:08
Thank you so much deblocker, the script is working perfectly now after I put the code you provided. God bless you – Ramon D Marin Dec 06 '16 at 12:21
PS: I apologize for not believing that was where the problem was – Ramon D Marin Dec 06 '16 at 12:50
I'm sorry I'm new to Stackoverflow and I can't see the green mark probably because I'm on mobile. I'll look for it as soon as I have access to a computer – Ramon D Marin Dec 06 '16 at 13:57
I don{t understand how the green marks work. Hope I did it right – Ramon D Marin Dec 07 '16 at 19:44
Hi Ramon, if this answer is useful for you, pease accept it. See here: [What does it mean when an answer is "accepted?"](http://stackoverflow.com/help/accepted-answer) – deblocker Dec 07 '16 at 20:21
Yesterday I was sure the mark had to be turned to gray, today I suppose it has to be green. Would you please advise me on that one? – Ramon D Marin Dec 09 '16 at 01:38

Javascript - hide event after checking if user is mobile won't work

1 Answers1