Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jun 18, 2021 9:32:19 GMT -8
What I'm wanting to do is have sub-boards hidden until a "title" ( Hover to expand sub-board list) is hovered over, at which point the list of sub-boards will "expand" out from underneath the title. See here for a basic representation. I'd also like for this plugin to incorporate the option of targeting specific boards to show or hide sub-boards (just like the Sub-board Display Manager plugin from Wormopolis does). I'm currently using the Sub-board Display Manager and attempted to incorporate a hover expand menu on a list of sub-boards, but everything I tried would result in every board's sub-boards becoming visible, regardless of their status in the plugin settings (I think it's because the plugin targets p class="sub-boards" and adding any divs [or anything else to contain the hover expand menu's code] inside that p class breaks the p class). I really think this might be the most aesthetically pleasing way to display the sub-boards of boards that have a higher number of them, so I'm hoping this might be possible.
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 12, 2021 9:47:19 GMT -8
Bump. Still interested in this if anyone is able.
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 20, 2021 20:54:01 GMT -8
Maybe some input on if this is possible, just to keep the potential of this being created above water? I think this feature would look super smooth, so I'm hoping someone with the ambition and ability to implement it stumbles onto this at some point.
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 20, 2021 23:53:29 GMT -8
It's possible, and probably not too difficult -- in theory, if you're comfortable playing around in the templates, you could do it yourself also. Using conditional statements to target the boards you want to exclude to have a particular class that you can exclude in CSS, no javascript / plugin needed.
Are you up for that?
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 21, 2021 13:35:12 GMT -8
Using conditional statements to target the boards you want to exclude Don't know why I didn't think of conditional statements when trying this before. I still think it would be a good plugin/feature for the plugin mentioned in the OP, but I'm moving on with your suggestion. I have it working how I want, for the most part. One small thing you might be able to help with: the hover-able area extends the entire horizontal width of my board column. I'd like for the list to only expand when hovering specifically over the "Sub-boards ▼" text. {if $[board.id] == 86 || $[board.id] == 127 || $[board.id] == 152 || $[board.id] == 130 || $[board.id] == 125 || $[board.id] == 129 || $[board.id] == 126 || $[board.id] == 128 || $[board.id] == 151 || $[board.id] == 132 || $[board.id] == 124} <ul class="navbar-list"> <li class="navbar-tags">Sub-board{if $[board.sub_board] != 1}s{/if} ▼ <ul class="dropdown"> {foreach $[board.sub_board]}<li><a href="$[board.sub_board.href]">$[board.sub_board.name]</a></li>{/foreach} </ul> </li> </ul> {else} {if $[board.sub_board]} <p class="sub-boards"> Sub-board{if $[board.sub_board] != 1}s{/if}: {foreach $[board.sub_board]}<span style="white-space:nowrap;"><a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma]</span> {/foreach} </p> {/if}{/if} <style type="text/css"> .dropdown {display: none}
.navbar-list li:hover > .dropdown {display: block; text-decoration: none;}
.navbar-list a {text-decoration: none;}
.navbar-tags {padding: 0; list-style-type: none; margin: 0px; font-size:70%;} </style>
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 21, 2021 14:01:59 GMT -8
I don't disagree with you re: your suggestion for the plugin, but I don't think Wormo has logged on in quite some time; if he has, he hasn't posted or made any updates to his plugins :(
Could you provide me with your URL (you can PM it to me if you want) so I can look into it? I think I know how to resolve it, but I'd like to see it in action to see if I'm on the right track. (:
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 21, 2021 15:11:01 GMT -8
I'll have to apply it to my test forum when I get the chance. Probably early next week I'll be able to devote a little time to it. I'll tag you when I do. Thanks!
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 21, 2021 15:47:58 GMT -8
I'll have to apply it to my test forum when I get the chance. Probably early next week I'll be able to devote a little time to it. I'll tag you when I do. Thanks! sounds good! i should be relatively free next week so just ping when you're ready!
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 24, 2021 18:02:46 GMT -8
Kami - Not sure if it's the best way to do it or not, but I was able to figure it out to work how I want. I just replaced most of the list tags with spans (ex: <ul class="navbar-list"> became <span class="navbar-list">) and the hover now applies only to the "Sub-boards ▼" text. I guess something about a coded list makes it fill the width of its container, whereas a span is sized specifically to its own contents?
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 24, 2021 19:14:34 GMT -8
Kami - Not sure if it's the best way to do it or not, but I was able to figure it out to work how I want. I just replaced most of the list tags with spans (ex: <ul class="navbar-list"> became <span class="navbar-list">) and the hover now applies only to the "Sub-boards ▼" text. I guess something about a coded list makes it fill the width of its container, whereas a span is sized specifically to its own contents? I mean, probably not but if you are satisfied with the outcome and it works, then I see no reason to mess with it. (: It's not the worst thing, though bear in mind that there could potentially be unintended interactions (not for sure, just a possibility). A span is an inline-container, and a list isn't by default though you could set the display to inline; I would hazard a guess, since I haven't seen the original attempt in action, that the reason it was applying to the width of the container was that it was operating as a block that didn't have a size specification.
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 24, 2021 20:09:38 GMT -8
A span is an inline-container, and a list isn't by default though you could set the display to inline; I would hazard a guess, since I haven't seen the original attempt in action, that the reason it was applying to the width of the container was that it was operating as a block that didn't have a size specification. Sounds right. I did try changing the display to inline originally, but didn't get any different functionality from it. Very likely just something I did wrong, though. If you do want to take a look, here is a link to both codes in action. "Top Level Sub-board" has the original "list" variation of the code where the hover extends the width of the container. "Second Sub-board" has the new code with spans that acts correctly. I'd be interested if you do know a better way to tackle this, or if you think the way I did it is suitable for the situation.
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 24, 2021 20:25:45 GMT -8
A span is an inline-container, and a list isn't by default though you could set the display to inline; I would hazard a guess, since I haven't seen the original attempt in action, that the reason it was applying to the width of the container was that it was operating as a block that didn't have a size specification. Sounds right. I did try changing the display to inline originally, but didn't get any different functionality from it. Very likely just something I did wrong, though. If you do want to take a look, here is a link to both codes in action. "Top Level Sub-board" has the original "list" variation of the code where the hover extends the width of the container. "Second Sub-board" has the new code with spans that acts correctly. I'd be interested if you do know a better way to tackle this, or if you think the way I did it is suitable for the situation. You could literally just specify a width for the class and it wouldn't expand the whole container width
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 24, 2021 21:47:32 GMT -8
You could literally just specify a width for the class and it wouldn't expand the whole container width The only way I was able to get that to kind of work was by specifying a width for .navbar-list or .navbar-tags. But that doesn't have the desired effect of fitting the hover area specifically to the list title, it boxes in the entire area, making either the hover area too wide or the dropdown list too slim (word wrap on longer sub-board names), or both.
|
|
Kami
Forum Cat
Posts: 40,033
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,033
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jul 24, 2021 23:55:33 GMT -8
You could literally just specify a width for the class and it wouldn't expand the whole container width The only way I was able to get that to kind of work was by specifying a width for .navbar-list or .navbar-tags. But that doesn't have the desired effect of fitting the hover area specifically to the list title, it boxes in the entire area, making either the hover area too wide or the dropdown list too slim (word wrap on longer sub-board names), or both. Try setting .navbar-list to display:inline-block; instead then (:
|
|
Matte
New Member
Posts: 92
inherit
264111
0
Jan 15, 2024 19:27:15 GMT -8
Matte
92
April 2021
matte
|
Post by Matte on Jul 25, 2021 6:02:38 GMT -8
Try setting .navbar-list to display:inline-block; instead then (: This works. The only side effect now is that the "Sub-boards ▼" text jumps up a few pixels on hover. See here again on "Top Level Sub-board" compared to the "Second Sub-board" where the list title stays put on hover.
|
|