Forums

  • # January 9, 2013 at 12:45 pm

    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();
    });
    }

    });

    # January 9, 2013 at 1:11 pm

    Can you create a [codepen](http://codepen.io/pen)

    # January 9, 2013 at 1:39 pm

    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

    # January 9, 2013 at 1:53 pm

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

    debbierking.com/bootstrap

    # January 9, 2013 at 2:45 pm

    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();
    });
    }

    });

    # January 9, 2013 at 4:03 pm

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

    # January 9, 2013 at 4:09 pm

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

    # January 9, 2013 at 7:30 pm

    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.

    # January 10, 2013 at 11:37 am

    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.

    # January 10, 2013 at 11:59 am

    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.

    # January 10, 2013 at 12:33 pm

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

    $(document).ready(function() {

    # January 10, 2013 at 12:35 pm

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

    # January 10, 2013 at 2:16 pm

    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.

    # January 10, 2013 at 2:46 pm

    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
    */

    (function (d) {
    var e = function () {};
    d.extend(e.prototype, {
    name: “overlayer”,
    options: {
    effect: “fade”,
    duration: 300,
    easing: “swing”,
    cls: “overlayer”,
    invert: false,
    overlaySelector: “.overlay”,
    overlayDefault: “overlay-default”
    },
    initialize: function (c, a) {
    a = d.extend({}, this.options, a);
    c.attr(“data-overlayer”) && d.each(c.attr(“data-overlayer”).split(“;”), function (b, c) {
    var d = c.match(https://cdn.css-tricks.com/s*([A-Z_]*?)s*:s*(.+)s*/i);
    d && (a[d[1]] = d[2])
    });
    a.duration = Math.floor(a.duration);
    var b = c.children(a.overlaySelector).first();
    b.length || (b = d(“

    “).addClass(a.overlayDefault).appendTo(c));
    b.css({
    position: “absolute”,

    visibility: “hidden”,
    display: “block”
    }).wrapInner(“

    “);
    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(https://cdn.css-tricks.com/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(https://cdn.css-tricks.com/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(https://cdn.css-tricks.com/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(, c));
    b.data(e.prototype.name, f)
    } else d.error(“Method ” + a + ” does not exist on jQuery.” + e.name)
    })
    }
    })(jQuery);

    # January 10, 2013 at 2:46 pm

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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag