Forum Discussion

Jake_N's avatar
Jake_N
Mentor
7 years ago

Badge Hove Function

Hey again everyone, I have hit another thing I would love help with.   I have an example of what I want here https://www.workshop.com.au/t5/badges/userbadgespage/user-id/865/page/1 I would like t...
  • peterlu's avatar
    peterlu
    7 years ago
    Jake_N That is a built in Lithium user badges page. Revoke is Out-of-Box feature. I think Revoke is for admin to see. Normal user should not be able to see the revoke. Correct me if I am wrong :) Also there are some APIs for badges, and you can build some fancy function for this page. By default, it is clicking to see the back of the badge card. You can use LITHIUM.jQuery to unbind the click function. see jquery off() function. And you can use CSS hover to achieve the hover effect.
  • ClaudiusH's avatar
    ClaudiusH
    7 years ago

    On a Lithium community page the jQuery root object is  instantiated as 

    LITHIUM.jQuery

    So you need to use the LITHIUM. namespace in order to access it. This is if you are not using your own jQuery object and library.

     

    The behaviour of showing the badge description on hover is actually the Lithium out of the box behaviour for the "View All Badges" page. It is realized fully via CSS and showing one of the two containers for reach badge depending on hover state. This is the container structure you would build:

    { [Badge front with image and name]  [Badge back with description] }

    The :hover would apply to the  { } outer container.

     

    The "Revoke badge" button can't be re-created via API right now. See also the related discussion here: https://community.lithium.com/t5/Developer-Discussion/Recreating-Badge-List-Component/m-p/278456

Jake_N's avatar
Jake_N
Mentor

Hi peterlu,

Thanks for that. Yeah you are right with the revoke button. I thought as much.

I did try using the .off() and also the unbind to stop the clink function but was unsuccessful.

 

I was using jQuery('elem').off(); & jQuery('elem').unbind(); but neither of these work do I need to include the "LITHIUM" part?

peterlu's avatar
peterlu
Champion
7 years ago

Jake_N 

Below is the full freemarker and js code

<@liaAddScript>
;(function($){
	$(function() {
		$('.lia-component-badges-list .lia-user-badge-display-card').off('click');
	});
})(LITHIUM.jQuery);
</@liaAddScript>

 

You can also try the blow script directly in Chrome console for quick testing purpose.

;(function($){
	$('.lia-component-badges-list .lia-user-badge-display-card').off('click');
})(LITHIUM.jQuery);

 

Kudo and solution :)