Search jQuery

jQuery Forum

Developing jQuery Plugins

ryanfitzer

Was: genFx is not defined, Now: Toggle visibility property with default Effects methods

Answered

Need more info
Working on it
Answered

in Developing jQuery Plugins • 11 years ago

Line 5922 defines the genFx function that looks to be in the global scope (window.genFx), but when I try to access it I get the error "genFx is not defined".

I'm trying to define a show/hide/toggle alternative by overwriting the original jQuery functions. Each one uses 'this.animate();' which uses genFx.

The reason in need to overwrite the originals is they do not alter the 'visibility' css property. Screenreaders do not fully ignore an element unless it's visibility set to hidden and my project requires full accessibility for screenreaders.

Any help or alternative approaches are appreciated.

Replies(7)

ryanfitzer

Re: genFx is not defined

11 years ago

I'm still having trouble with this issue. Anyone have suggestions?

scott.gon..

Re: genFx genFx is not defined

11 years ago

genFx is not in the global scope. Every line of jQuery core is wrapped in a closure. The only thing explicitly placed in the global scope is jQuery and $.

ryanfitzer

Re: genFx genFx is not defined

11 years ago

Thanks Scott. Do you know any way to access the function otherwise?

scott.gon..

Re: Re: genFx genFx is not defined

11 years ago

You can't. Variables and functions can only be seen by the function they're declared in (and any functions nested inside that function), they cannot be seen outside of the function they're declared in. Closures are the only construct that create private data in JavaScript.

ryanfitzer

Re: genFx genFx is not defined

11 years ago

Thanks again Scott. That makes sense. I think I have found a solution. Any advice on a better way or optimizations would be appreciated.

var hides = {
            _hide:        $.fn.hide,
            _slideUp:     $.fn.slideUp,
            _fadeOut:     $.fn.fadeOut
        }
        var shows = {
            _show:           $.fn.show,
            _slideDown:    $.fn.slideDown,
            _fadeIn:       $.fn.fadeIn
        }

        $.each(hides, function(key, val) {
            var name = key.replace('_', '');
            return $.fn[name] = function( speed, callback ) {
                var _callback = callback;
                if(callback) {
                    hides[key].call(this, speed, function() {
                        _callback();
                        $(this).css('visibility', 'hidden');
                    });
                } else {
                    hides[key].call(this, speed, function() {
                        $(this).css('visibility', 'hidden');
                    });
                }
            }
        });
        $.each(shows, function(key, val) {
            var name = key.replace('_', '');
            return $.fn[name] = function( speed, callback ) {
                $(this).css('visibility', 'visible');
                shows[key].call(this, speed, callback);
            }
        });

ryanfitzer

Re: genFx genFx is not defined

11 years ago

Nevermind. I realize the above solution is overkill. I really only need to alter show and hide since they are called at some point in all the other methods.

Now the issue is that unless a speed is given, the callback is not called. This is really only an issue for the hide method since I need to set visibility to hidden after the animation is finished.

Here is the current state:

var _hide = $.fn.hide;
var _show = $.fn.show;
$.fn.extend({
hide: function(speed, callback) {
return _hide.call(this, speed, function() {
callback && callback();
$(this).css('visibility', 'hidden');
});
},
show: function(speed, callback) {
$(this).css('visibility', 'visible');
return _show.call(this, speed, callback);
}
});

ryanfitzer

Re: Was: genFx is not defined, Now: Toggle visibility property with default Effects methods

11 years ago

On my way home from work I figured it out. I needed to check for a speed argument to determine if I should set visibility in the callback or just chain it on. Here's the updated code:

var _hide = $.fn.hide;
var _show = $.fn.show;
$.fn.hide = function(speed, callback) {
if(speed) {
return _hide.call(this, speed, function() {
callback && callback();
$(this).css('visibility', 'hidden');
});
} else {
return _hide.call(this).css('visibility', 'hidden');
}
}
$.fn.show = function(speed, callback) {
$(this).css('visibility', 'visible');
return _show.call(this, speed, callback);
}

Top Reply

Response title

Attachments

jQuery Forum

Was: genFx is not defined, Now: Toggle visibility property with default Effects methods

Answered

Replies(7)

Re: genFx is not defined

Re: genFx genFx is not defined

Re: genFx genFx is not defined

Re: Re: genFx genFx is not defined

Re: genFx genFx is not defined

Re: genFx genFx is not defined

Re: Was: genFx is not defined, Now: Toggle visibility property with default Effects methods

Statistics

Tags

Actions