CODEWITHSUNDEEP
javascript
Bogdan S
Bogdan S

Reputation: 229

Change javascript function

I have a function in theme.js file

 $('.open_copy').click(function(){
        var that = $(this);
        var copy = that.prev();

        that.parents('.asset').find('.cover').click();
        copy.css('opacity', 0).show();
        if (copy.children('.copy_content').data('jsp')) {
            copy.children('.copy_content').data('jsp').destroy();
        }
        var height = copy.children('.copy_content').css({height: ''}).height();

        if (height < that.parents('.asset').height() - 37) {
            var top = (that.parents('.asset').height() - height)/2;
            top = top < 37 ? 37 : top;
            copy.children('.copy_content').css({'margin-top': top});
        } else {
            copy.children('.copy_content').css({'margin-top': '', height: that.parents('.asset').height() - 37}).jScrollPane();
        }

        if (!that.parents('.asset').find('.close_copy').length) {
            that.prev().append('<a href="#" class="close_copy">Close</a>');
        }

        copy.animate({ 'opacity' : 1 }, 500);

        that.fadeOut(500);
        return false;
    });

I need to change opacity value to 0.9 but i don't have access to the theme.js file. There is any way i can change/alter this function by adding a function in the html page?

copy.animate({ 'opacity' : 1 }, 500);

Upvotes: 2

Views: 73

Answers (2)

LittleSweetSeas
LittleSweetSeas

Reputation: 7054

Javascript support override of variables and methods. You should declare an overriding JS script AFTER import of Theme.js file. So, you can exactly copy/paste that function changing only the values you need to.

Note that, as that function is an event binding, you may need to unbind the onclick event first.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074248

Yes. You can remove the click handler that code sets up, and then add your own with identical code except for the 1 => 0.9 change.

To remove that code's click handler (and all others), use off:

$('.open_copy').off('click');

...and then of course add your own, new click handler.

So in total, then, you'd want this code (after the script tag including theme.js, so this code runs after that code):

$('.open_copy').off('click').click(function(){ // <== Changed
    var that = $(this);
    var copy = that.prev();

    that.parents('.asset').find('.cover').click();
    copy.css('opacity', 0).show();
    if (copy.children('.copy_content').data('jsp')) {
        copy.children('.copy_content').data('jsp').destroy();
    }
    var height = copy.children('.copy_content').css({height: ''}).height();

    if (height < that.parents('.asset').height() - 37) {
        var top = (that.parents('.asset').height() - height)/2;
        top = top < 37 ? 37 : top;
        copy.children('.copy_content').css({'margin-top': top});
    } else {
        copy.children('.copy_content').css({'margin-top': '', height: that.parents('.asset').height() - 37}).jScrollPane();
    }

    if (!that.parents('.asset').find('.close_copy').length) {
        that.prev().append('<a href="#" class="close_copy">Close</a>');
    }

    copy.animate({ 'opacity' : 0.9 }, 500);  // <== Changed

    that.fadeOut(500);
    return false;
});

You'll want to check for side effects (for instance, if there's other code that also sets up click handlers on those elements, since the code above will remove them, too).

Upvotes: 3

Related Questions