Former Member
inherit
guest@proboards.com
165779
0
May 2, 2024 16:52:18 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Feb 5, 2016 11:28:10 GMT -8
Not sure if this is possible via the Headers & Footers but ive posted this here purely as im using the scripts in my Global Header.
Im using the below scripts to create some more options to the right of the nav tree and to the left of the "Participated" button
My question is how can i pull all of these including the participated button inside a drop down box with the same height and style of the Nav tree with the title "Board Options"?
<script>
$(function(){
var recent = $("a.recent-threads-button");
recent.clone().attr("href", "/members?dir=desc&sort=posts").html(" Top Posters").insertBefore($("#navigation-tree"));
if (proboards.data("route").name == "home") {
var lastUpdated = $(".last-updated > a").attr("href");
recent.clone().attr("href", lastUpdated).html("Last Post").insertBefore($("#navigation-tree"));
};
});
</script>
<script>
$(function () {
$("a.recent-threads-button:first").clone().attr({
"href" : "/posts/recent",
"title" : "Recent forum Posts"
}).html("Recent Posts").insertBefore($("#navigation-tree"));
$("a.recent-threads-button:first").clone().attr({
"href" : "javascript:proboards.home.markBoardsRead()",
"title" : "Mark all boards read"
}).html("Mark All Read").insertBefore($("#navigation-tree"));
/* make sure board read url is set if not */
if (!proboards.data('mark_boards_read_url')) {
proboards.data('mark_boards_read_url', /* location.origin + */
location.protocol + "//" + location.host + '/boards/mark/read')
}
});
</script>
Thanks Dave
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,864
December 2005
horace
|
Post by Chris on Feb 5, 2016 19:50:51 GMT -8
Try adding the following to run after any script you may have for adding those additional buttons
<!-- Add extra breadcrumb buttons to a dropdown menu --> <script> $(function () { if ($('.recent-threads-button').length > 1) $('<ul class="select_menu_list">') .insertAfter('.recent-threads-button:last') .append($('.recent-threads-button').removeClass('recent-threads-button') .wrap('<li>').parent()) .wrap('<li class="ui-front selectMenuButton" style="list-style:none;">') .selectMenu({ staticStatus : true, status : 'Board Options' }) .data('selectMenu').box.addClass('float-right').css({ marginLeft : '10px' }) }) </script>
|
|
Former Member
inherit
guest@proboards.com
165779
0
May 2, 2024 16:52:18 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Feb 6, 2016 2:43:33 GMT -8
Thanks Chris How can i target this to use CSS? Id like to try and make the options in the box the full width of the box seperated with a 1px solid back line and centered You can see the hover effect below. Thanks Dave
|
|
inherit
Official Code Helper
65613
0
1
Apr 15, 2024 17:01:41 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,864
December 2005
horace
|
Post by Chris on Feb 6, 2016 3:13:27 GMT -8
The entire menu is wrapped in a class of ui-front which I don't believe is used anywhere else on Proboards so that could be used to target the particular menu without affecting the actions menu for example. The links themselves still bear the class name recent-threads-button which is why they appear floated right in the menu rather than spanning the entire width. You could introduce a CSS rule to counteract that (e.g .ui-front .select_menu_list .recent-threads-button {property:value} ) or modify a line in the script to remove that class when being inserted into the menu:
.append($('.recent-threads-button').removeClass('recent-threads-button')
|
|
Former Member
inherit
guest@proboards.com
165779
0
May 2, 2024 16:52:18 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Feb 6, 2016 3:36:34 GMT -8
Thanks ChrisThat works perfectly Dave
|
|