Forums

DesignLady94

I am wanting to disable an Overlay Slider script that I downloaded from ThumbsFX for mobile devices (smaller than 768px). I tried the following script but it's not disabling.

  $(document).ready(function() {
  if ( $(window).width() > 767) {
    $('.code-trigger').click(function(){
      $(this).next().slideToggle();
    });
  }

});

AndyHowells

Can you create a codepen

DesignLady94

Here's the link to the codepen...however I am not sure if it will help because I couldn't see where to upload the image.

http://codepen.io/anon/full/xmfbj

DesignLady94

Here's the link to the site so you can see this in action:

debbierking.com/bootstrap

JoshBlackwood

I'm not entirely sure what I'm looking at here. As far as I can tell, the class used in the quoted script is not present on the page, so I'm not sure what the script is supposed to be controlling, exactly?

Also, are you wanting this to work on window resize, or only on page load?

DesignLady94

Josh,

I was using the script from their demo and then adding a window resize option. Since the overlay function worked, I figured that their plugin .js file (jQuery.thumbFX.js) referred to .code-trigger in some way.

But I have changed that now to .overlayer .overlay to refer directly to the HTML and CSS...but am still having the same problem.

And yes, I do want it this to be disabled on both window resize and loading in mobile devices.

$(document).ready(function() {
  if ( $(window).width() > 767) {
    $('.overlayer .overlay').click(function(){
      $(this).next().slideToggle();
    });
  }

});

JoshBlackwood

Okay, the first problem I'm seeing is that the script you're basing this on has absolutely no relation to the plugin. That bit of code on their demo page allows an h3 below an example under the "Advanced Examples" section to, on click, open a small code preview.

I'm not positive how to do this, as the script doesn't need initialization from the HTML page, per se. You can initialize it, but it effectively seems to just serve to set the various options. Plus, you'd need a way to un-initialize it if the window resized smaller.

Here's a basic example of what you need to do to get resizing working in the first place, but there's no guarantee this is going to do what you want it to:

var $winWidth = {
  width: null
};

$(function () {

  $(window).bind( "resize", function ( event ) {
    var $this = $(this);
      $.each( $winWidth, function (key) {
        $winWidth[ key ] = $this[ key ]();
    });
    if ( $winWidth.width > 767 ) {
      $('[data-overlayer]').overlayer();
    } else {
      // May need a method to disable/unitialize the script?
    }
  });

});

A Codepen to demonstrate basically how the code is supposed to work, with live width reading: http://codepen.io/JoshBlackwood/pen/DvuKq

JoshBlackwood

Oops, nevermind. I'll edit this post when I get results.

DesignLady94

Thanks Josh for all your efforts on this. I tried both of these but neither work... :(

DesignLady94

And thanks for the code pen ...that's awesome! Will be very helpful.

JoshBlackwood

Aha! I had it backwards. It's the class that activates the overlay, not the attribute. Can you try this?

var $winWidth = {
  width: $(window).width()
};

function removeOverlay() {
  if ( $winWidth.width < 768 ) {
    $('a[data-overlayer]').removeClass('overlayer');
  } else {
    $('a[data-overlayer]').addClass('overlayer');
  }
};

$(function () {

  $(window).bind( "resize", function ( event ) {
    var $this = $(this);
      $.each( $winWidth, function (key) {
        $winWidth[ key ] = $this[ key ]();
    });
    removeOverlay();
  });

  removeOverlay();

});

I consolidated a few things down, made a new function, and tidied up all 'round. Also fixed it so that it'll work on page resize AND on page load/reload. You can see the CodePen for an example of how it dynamically adds/removes the class on resize (open Developer Tools and watch the p tag): http://codepen.io/JoshBlackwood/pen/DvuKq

DesignLady94

I'm afraid that didn't work either :( I'm trying to get it so that anything smaller than an ipad will display the text automatically, rather having it slide up only on hover.

JoshBlackwood

This is the problem:

$function removeOverlay() {

Should be:

function removeOverlay() {

This is line 330 of your source code.

I'm trying to get it so that anything smaller than an ipad will display the text automatically, rather having it slide up only on hover.

Additionally, I really wish you'd made that goal more clear early on . . . that's a whole 'nother animal, honestly. You could probably go about it in roughly the same way, but you'll have to look closely at how the plugin shows/hides the overlay. It's not as simple as setting the display property, as it involves positioning.

DesignLady94

The width thing just isn't working for some reason, either on this script or the overlay script. I tried a variation of what you wrote here yesterday and it didn't work either...Now no padding is added even for > 980.

DesignLady94

ooops that comment was meant to be on the other post. I'm sorry I about not making my goal more clear. I made the fix but the sliding is still happening at < 767.

DesignLady94

am a bit confused..this is what I have now...should I remove this line?

$(document).ready(function() {

DesignLady94

Sorry...thought I had clicked code...let me try this again.

JoshBlackwood

Hmm, I must admit, I'm pretty stumped.

This is what it should look like, at this point:

var $winWidth = {
  width: $(window).width()
};

function removeOverlay() {
  if ( $winWidth.width < 768 ) {
    $('a[data-overlayer]').removeClass('overlayer');
  } else {
    $('a[data-overlayer]').addClass('overlayer');
  }
};

$(function () {

  $(window).bind( "resize", function ( event ) {
    var $this = $(this);
      $.each( $winWidth, function (key) {
        $winWidth[ key ] = $this[ key ]();
    });
    removeOverlay();
  });

  removeOverlay();

  $('.nav li a').click(function() {
    if ( $winWidth.width < 980 ) {
      $('h1, h2').addClass('toppad');
    } else {
      $('h1, h2').removeClass('toppad');
    };
  });

});

(If you paste the code in, then select the block you just pasted before pressing the "Code" button, it'll format right. You can also go back and edit posts -- there is a very small grey link just beneath the timestamp on your messages.)

DesignLady94

It's interesting...the slide still is enabled for the smaller screen sizes, but the styling for the text is now picking up the correct styling for the smaller sizes, as opposed to the styling (in white) for the full width screen. So this is getting somewhere...we just need to get the slider disabled.

DesignLady94

So in other words, it seems the browser width change is being picked up since the browser is detecting the styling responsive media queries for the smaller widths. But I am thinking that there is some code in the ThumbFX plugin that is overriding the removal of the slider function. I looked at this plugin but can't make heads nor tails of it.

Here's the code:

/*

* jQuery ThumbFx Overlayer Function * Usage : jQuery('[data-overlayer]').overlayer(options); * Based on jQuery tipTip by Drew Wilson */

<

div>").addClass(a.overlayDefault).appendTo(c)); b.css({ position: "absolute",

      visibility: "hidden",
      display: "block"
    }).wrapInner("<div>");
    c.css({
      position: "relative",
      overflow: "hidden"
    }).addClass(a.cls);

    if(a.invert){
      d(window).load(function(){
        b.stop().css({
          visibility: "visible",
          width: c.width(),
          height: a.effect == "top" || a.effect == "bottom" ? "auto" : c.height()
        });
        switch(a.effect) {
        case "right":
          b.css({
            right: b.width() * -1,
            top: 0,
            bottom: 0
          }).animate({
            right: 0
          }, a.duration, a.easing);
          break;
        case "left":
          b.css({
            left: b.width() * -1,
            top: 0,
            bottom: 0
          }).animate({
            left: 0
          }, a.duration, a.easing);
          break;
        case "top":
          b.css({
            left: 0,
            top: b.height() * -1
          }).animate({
            top: 0
          }, a.duration, a.easing);
          break;
        case "bottom":
          b.css({
            left: 0,
            bottom: b.height() * -1
          }).animate({
            bottom: 0
          }, a.duration, a.easing);
          break;
        default:
          b.show().css({
            opacity: 0,
            top: 0,
            left: 0
          }).animate({
            opacity: 1
          }, a.duration, a.easing, function () {
            if(d.browser.msie) b.get(0).filter = "", b.attr("style", String(b.attr("style")).replace(/alpha\(opacity=([\d.]+)\)/i, ""))
          })
        }
      });
      c.bind({
        mouseleave: function () {
          b.stop().css({
            visibility: "visible",
            width: c.width(),
            height: a.effect == "top" || a.effect == "bottom" ? "auto" : c.height()
          });
          switch(a.effect) {
          case "right":
            b.css({
              right: b.width() * -1,
              top: 0,
              bottom: 0
            }).animate({
              right: 0
            }, a.duration, a.easing);
            break;
          case "left":
            b.css({
              left: b.width() * -1,
              top: 0,
              bottom: 0
            }).animate({
              left: 0
            }, a.duration, a.easing);
            break;
          case "top":
            b.css({
              left: 0,
              top: b.height() * -1
            }).animate({
              top: 0
            }, a.duration, a.easing);
            break;
          case "bottom":
            b.css({
              left: 0,
              bottom: b.height() * -1
            }).animate({
              bottom: 0
            }, a.duration, a.easing);
            break;
          default:
            b.show().css({
              opacity: 0,
              top: 0,
              left: 0
            }).animate({
              opacity: 1
            }, a.duration, a.easing, function () {
              if(d.browser.msie) b.get(0).filter = "", b.attr("style", String(b.attr("style")).replace(/alpha\(opacity=([\d.]+)\)/i, ""))
            })
          }
        },
        mouseenter: function () {
          b.stop();
          switch(a.effect) {
          case "right":
            b.animate({
              right: b.width() * -1
            }, a.duration, a.easing);
            break;
          case "left":
            b.animate({
              left: b.width() * -1
            }, a.duration, a.easing);
            break;
          case "top":
            b.animate({
              top: b.height() * -1
            }, a.duration, a.easing);
            break;
          case "bottom":
            b.animate({
              bottom: b.height() * -1
            }, a.duration, a.easing);
            break;
          default:
            b.animate({
              opacity: 0
            }, a.duration, a.easing, function () {
              b.hide()
            })
          }
        }
      });
    }
    else {
      c.bind({
        mouseenter: function () {
          b.stop().css({
            visibility: "visible",
            width: c.width(),
            height: a.effect == "top" || a.effect == "bottom" ? "auto" : c.height()
          });
          switch(a.effect) {
          case "right":
            b.css({
              right: b.width() * -1,
              top: 0,
              bottom: 0
            }).animate({
              right: 0
            }, a.duration, a.easing);
            break;
          case "left":
            b.css({
              left: b.width() * -1,
              top: 0,
              bottom: 0
            }).animate({
              left: 0
            }, a.duration, a.easing);
            break;
          case "top":
            b.css({
              left: 0,
              top: b.height() * -1
            }).animate({
              top: 0
            }, a.duration, a.easing);
            break;
          case "bottom":
            b.css({
              left: 0,
              bottom: b.height() * -1
            }).animate({
              bottom: 0
            }, a.duration, a.easing);
            break;
          default:
            b.show().css({
              opacity: 0,
              top: 0,
              left: 0
            }).animate({
              opacity: 1
            }, a.duration, a.easing, function () {
              if(d.browser.msie) b.get(0).filter = "", b.attr("style", String(b.attr("style")).replace(/alpha\(opacity=([\d.]+)\)/i, ""))
            })
          }
        },
        mouseleave: function () {
          b.stop();
          switch(a.effect) {
          case "right":
            b.animate({
              right: b.width() * -1
            }, a.duration, a.easing);
            break;
          case "left":
            b.animate({
              left: b.width() * -1
            }, a.duration, a.easing);
            break;
          case "top":
            b.animate({
              top: b.height() * -1
            }, a.duration, a.easing);
            break;
          case "bottom":
            b.animate({
              bottom: b.height() * -1
            }, a.duration, a.easing);
            break;
          default:
            b.animate({
              opacity: 0
            }, a.duration, a.easing, function () {
              b.hide()
            })
          }
        }
      })

    }
  }
});
d.fn[e.prototype.name] = function () {
  var c = arguments,
    a = c[0] ? c[0] : null;
  return this.each(function () {
    var b = d(this);
    if(e.prototype[a] && b.data(e.prototype.name) && a != "initialize") b.data(e.prototype.name)[a].apply(b.data(e.prototype.name), Array.prototype.slice.call(c, 1));
    else if(!a || d.isPlainObject(a)) {
      var f = new e;
      e.prototype.initialize && f.initialize.apply(f, d.merge([b], c));
      b.data(e.prototype.name, f)
    } else d.error("Method " + a + " does not exist on jQuery." + e.name)
  })
}

})(jQuery);

DesignLady94

Can't seem to get this code pasting right :( Please let me know if you want me to re-paste.

DesignLady94

okay, getting there...by reworking the css and html, I've gotten the slider not to show up, but just need to get the text to display.

DesignLady94

I think I've decided to handle this by adding two separate divisions in the html for the header and subheader (one named overlay and the other named details) and use display: none for one or the other, depending on the screen width. It bloats the html but can't see any other way to do it. I've eliminated the js all together. You've spend enough time on it...I appreciate your efforts....thanks so much!

Will post about the other script on that page (header paddings).

DesignLady94

Well darn..that' doesn't work either...

treehouse : what would you like to learn today?

Forums

Script not disabling jQuery for Mobile Devices