CODEWITHSUNDEEP
javascriptjquery
Panoply
Panoply

Reputation: 433

Remove function jquery

Working with plugin jquery menu-aim. I am making it responsive but need a certain section of the plugin to be disabled when in offcanvas. I need to disable this here in offcanvas:

height = $menu.outerHeight()

See the breakdown below:

Here is how I am dealing with offcanvas in responsive form:

  $('[data-toggle="offcanvas"]').click(function () {
    $('.offcanvas').toggleClass('active');
    $( "body" ).addClass( ".offcanvas-body" );
    $(".nav.nav-pills").toggleClass('nav nav-pills').addClass( "nav navbar-nav" );
     $('.popover').removeClass('popover').addClass("dropdown-menu");
     $('.dropdown-submenu').addClass("dropdown");
  });

This is working order but this issue is with the plugin. I need to disable this function:

 function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();

            // Show the submenu
            $submenu.css({
                display: "block",
                top: -1,
                left: width - 3,  // main should overlay submenu
                height: height - 4  // padding for main dropdown's arrow
            });

This line is the issue for responsive, it sets a height that conflicts with dropdown when going responsive in offcanvas:

height = $menu.outerHeight()

For some additional reference, here is the section of the .js file that this uses:

var offset = $menu.offset(),
                    upperLeft = {
                        x: offset.left,
                        y: offset.top - options.tolerance
                    },
                    upperRight = {
                        x: offset.left + $menu.outerWidth(),
                        y: upperLeft.y
                    },
                    lowerLeft = {
                        x: offset.left,
                        y: offset.top + $menu.outerHeight() + options.tolerance
                    },
                    lowerRight = {
                        x: offset.left + $menu.outerWidth(),
                        y: lowerLeft.y
                    },
                    loc = mouseLocs[mouseLocs.length - 1],
                    prevLoc = mouseLocs[0];

Upvotes: 0

Views: 238

Answers (2)

james emanon
james emanon

Reputation: 11837

ok, i hope this is "something" you can work with. I am not entirely sure I am giving you what you want, but perhaps it is close. Of course, you would need to change my code references to your functions/objects - this is just proof of concept.

Since I don't know your data structures and such, I am just creating some basic ideas here and perhaps it is overkill. See below for a caveat*.

// I have some function defined. This
// is the function I will destroy & recreate
function t(l){
   var w = l || 'NO SETTING';
   console.log('asdfasdfyeyeyeye' + w);
}

var functionDefine = {
    stored: {},
    assign: function( func ){
        this.stored[ func ] = window[ func ] || jQuery.noop();
        window[ func ] = jQuery.noop;
    },

    retrieve: function(){
                  var args = [].slice.call( arguments ),
                  fn = args.splice(0,1).join('') || false;

                  if( typeof fn === 'string' ) {
                      if( this.stored.hasOwnProperty( fn ) ){
                          window[ fn ] = this.stored[ fn ];
                          if ( args.length && jQuery.isFunction( window[ fn ] ) ) window[ fn ]( args );
                      }
                  }
    }

};

// when window is resized - we reinstantiate the function
 jQuery(window).resize( function(){
    functionDefine.retrieve( 't'/*, add any args here if you want to fire it */);
});


functionDefine.assign('t'); // you'd put this when you want to override your function
functionDefine.stored['t'](); // just verifying it is there now, stored for later retrieval
functionDefine.retrieve('t', 'TESTING HERE FOR RETRIEVE'); // reinstantiates & fire it because it has args;
functionDefine.retrieve('t'); // does NOT immediately fire. Just reinstantiates function.
  • caveat: I am assuming the function you want to override is available to you and not private.

Upvotes: 0

njwags
njwags

Reputation: 1147

Assuming the plugin exposes the function somehow, you could proxy the function and act differently for different screen widths

Example, assuming the plugin is called "plugin":

var original = $.fn.plugin.activateSubmenu;
$.fn.plugin.activateSubmenu = function () {
    if (/* check screen width or User agent ... */) {
        return original.apply(this, arguments);
    }
};

I would be a hack, but if the function you are looking at isn't exposed by the plugin, you could fork it and rewrite the plugin so that it is exposed.

Upvotes: 1

Related Questions