Grow your CSS skills. Land your dream job.

Script not disabling jQuery for Mobile Devices

  • # 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 12:41 pm

    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.)

    # 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(/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(/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(, 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.

    # January 10, 2013 at 2:58 pm

    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.

    # January 10, 2013 at 3:32 pm

    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).

    # January 10, 2013 at 3:37 pm

    Well darn..that’ doesn’t work either…

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".