Forum | Appery.io

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&#47;>")
&#46;width(el&#46;outerWidth())
&#46;height(el&#46;outerHeight())
&#46;css({
"position": "absolute",
"left": el&#46;offset()&#46;left,
"top": el&#46;offset()&#46;top,
"background-color": "#ffff99",
"opacity": "&#46;7",
"z-index": "9999999"
})&#46;appendTo('body')&#46;fadeOut(1000)&#46;queue(function () { $(this)&#46;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.

Hello,

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

thx much!

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

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

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

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

enjoy!