Forum Discussion
dementad
11 years agoGenius
Can you share? :smileyvery-happy:
bryanpollack
11 years agoAce
It's a bit klugey, but it seems to work ok. I set up my Forum Topic page to have both my custom thread component and the default thread component (message-list), and have the default one hidden from view and set to display only one post.
I've set up my options buttons as follows:
$('#posts').on('click', '.options a', function(e) { var id = $(this).closest('.options').attr('id').replace('actions-', ''); getOptions(id, this); });
Here's my getOptions function:
function getOptions(messageId, me) { if ($(me).siblings('[id^=actionMenuDropDown]').length > 0) { $(me).siblings('[id^=actionMenuDropDown]').toggle(); } else { $.get("/t5/-/-/m-p/" + messageId + "?isAjax", function (res) { var html = $.parseHTML(res); var options = $(html).find('.message-uid-' + messageId + ' [id^=actionMenuDropDown]'); $(me).closest('.options').append(options); }); } }
I have the ?isAjax, because I hide certain things on the page when that is passed in (e.g. header, footer, custom thread component) in order to speed up the page load.
And to hide the options after clicking elsewhere:
$(document).mouseup(function (e){ var container = $('.options [id^=actionMenuDropDown]'); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); } });
Hope that helps!
Related Content
- 5 years ago