Highlight effect (simple code not plugin)

Sun Oct 13, 2013 10:24 am

Dear Appery,

I'm trying to add a highlight effect such as this highlight, i added this plugin to my project, it works well but it messed up some css with select and other widgets so i was looking for other solution to achieve the same effect without any plugin, i found this simple function that does this without any plugin:

code
jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99",
"opacity": ".7",
"z-index": "9999999"
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}
/code

however i cant get it to work as a function from a JS asset to be accessible from any page in my project, any help would be highly appreciated!!

Many thanks in advance!.
Best,
R.

Sun Oct 13, 2013 10:34 am

Hello,

We'll check this function. But it will take some time.

Sun Oct 13, 2013 10:36 am

thx much!

Sun Oct 13, 2013 3:53 pm

you can ignore this topic, this function works well as it is, i had a syntax error on my end, thx anyways!

Wed Oct 16, 2013 4:04 pm

if anyone is looking for a quick simple way to achieve it then here it is, add a JS asset and paste into it this code:

code
jQuery.fn.highlight = function (myColor) {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": myColor,
"opacity": ".7",
"z-index": "9999999"
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}
/code

to use it simply call the function and pass it whatever color effect you wish:

code
Appery('Your_Lable_name').highlight("#009900");
/code

enjoy!