How to combine two Javascript functions on the same object

Question

I'm stuck trying to get random colour overlay on the pictures on this site. http://www.reportageborsen.se/reportageborsen/wordpress

The Javascript I'm trying to combine are:

 $(function() {
    $('.media-box .mask').each(function() {
        var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
        $(this).css("background-color", hue);
    });
});

///and///

$('.media-box').hover(function() {
    $(this).find('.mask').stop(true, true).fadeIn();
}, function() {
    $(this).find('.mask').stop(true, true).fadeOut();
});

Is it possible to just get them together in some way?

Best Regards

Fortes

Armen Asriyan · Accepted Answer · 2012-12-22 12:36:36Z

2

if you are looking to combine two functions in one, you may try this:

var getRandomInRange = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

$('.media-box').each(function() {

    var mediaBox = $(this);
    var mask = mediaBox.find('.mask');
    var hue = 'rgb(' + getRandomInRange(200, 255) + ',' + getRandomInRange(200, 255) + ',' + getRandomInRange(200, 255) + ')';

    mask.css("background-color", hue);

    mediaBox.hover(function() {
        mask.stop(true, true).fadeIn();
    }, function() {
        mask.stop(true, true).fadeOut();
    });
});

Note, that I also moved random number generator to separate function, just for clarity. Let me know if this worked.

answered Dec 22, 2012 at 12:36

Armen Asriyan

1777 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

joeyramone76 Over a year ago

your code work perfectly except for the mask background opacity. here jsfiddle.net/uubxK/1 a jsfiddle demo with your code. To correct the issue add opacity when set css background-color. Here, instead, a working demo with your solution: jsfiddle.net/b5ZPq/3

Armen Asriyan Over a year ago

Oh yeah, I forgot about opacity, thanks. But I suppose it should be set in CSS anyway, as it doesn't need to be changed by script.

fortes Over a year ago

I tried the solution with opacity set in js but the grid breaks in some way and links doesn't work. reportageborsen.se/reportageborsen/wordpress

Armen Asriyan Over a year ago

You have a parsing error in your JS file (check the console window). It looks like you typed (or copy/pasted) some non-visible character on line 136 after the semicolon. Try to delete it.

fortes Over a year ago

Thank you so much, everyone. You're the best giving advice to a newbie like me. I took away the non-visible error and voila. Take a look: reportageborsen.se/reportageborsen/wordpress Merry Christmas and a Happy New Year!

Collectives™ on Stack Overflow

How to combine two Javascript functions on the same object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related