Custom board description location

[Pixel]

I'm currently fiddling with the issue of displaying the descriptions of my boards outside of their usual containers and would like to request some help on the matter (if at all possible). I'm not entirely certain that this would require a plugin, but at the very least some jquery/javascript.

The approximate line-up would look something like this:

<div class="list">
<div class="board">...</div>
<div class="custom-description-box">...</div>
</div>

How I would like this to work, is that when you hover .board, the description of said board should be displayed in a separate div below the board itself (in the .custom-description-box). The description is made up of text and does not contain images. Currently the description is rendered within the .board div, whereas I need the two apart. I have several boards on display, as shown above, which is why simple CSS won't work.

Any help would be highly appreciated!

[Former Member]

This would suit Request a Plugin better, where you originally had it and for some reason deleted it and reposted it here...?
I'm guessing Shrike's hover description plugin doesn't fit this well enough, eh?

[Pixel]

I moved it because I don't think an actual plugin is necessary. As mentioned. Unless my understanding of what a "plugin" is is wrong.

I can't currently connect to the search server and I can't seem to find the plugin you mentioned in the library. Perhaps you could link me?

[Pixel]

Hmm, I have been looking around for the plugin you mentioned (now that the search is back up) but I'm afraid I can't seem to find it.

[Former Member]

Again, not sure it's what you want, but figured I'd suggest a look anyway
support.proboards.com/thread/433694/plugin-board-description-images-1

[Pixel]

Not exactly, no. The container I need moved (specifically) is the .description div. Which is located inside the .board div. The problem I'm having is that if you move the .description div outside the .board div, it will either display ALL descriptions for every board listed in one spot or show nothing at all (I've been messing around with it a few times, and I don't remember which it is).

[Former Member]

Take a look at my forum real fast here (just click on one of the pictures to make the category expand) and let me know if that's what you're talking about--how I have the board name above/outside of the description?

[Pixel]

Oh, no, nothing like that. Sorry, I should probably have been clearer. In your example, the description container is still nested within the board container, whereas I need the two of them pulled apart. But I think I may have found my own "solution" by means of CSS, though it is not pretty. Thanks, though!

EDIT: Actually, as it turns out, I may require help still. Anyone?

[Pixel]

UPDATE: I have added some more information and updated the image for help.

[Pixel]

If anyone could give this a look, I'd appreciate it!

[Brian]

Pixel, do you have the HTML for this set up on a forum already?

The easiest method I can think of to do this would be to keep the board descriptions inside the actual board containers, but hide them with CSS. Then using jQuery you could go through all of them and assign a hover function to populate the description area below the boards with the corresponding description that's hidden inside each board's container.

Assuming your classes are exactly the same as in your image placing this code wherever a board list is rendered should suffice so long as the description in each .board element is contained inside a child element with the class .description like normal.

<script type="text/javascript">
$(document).ready(function(){
    $('.list .board').hover(function(){
        $(this).parent().children('.custom-description-box').html($(this).children('.description').html());
    },function(){
        $(this).parent().children('.custom-description-box').html('');
    });
});
</script>

Basically: On hover, populate the description box with the board's description text. Upon the mouse leaving the hover area, erase all text inside the description box.

[Pixel]

Alright, I have tested the code, and while it doesn't work as it is supposed to, it does do something.

I currently have a <p> tag with text as content placeholder within the .custom-description-box, which... disappears once you hover the .board elements. Permanently. So obviously it is erasing the <p> tag (is it possible to keep it, I wonder? And simply hide it with CSS when showing the description (it already does this, actually)), but the description isn't showing as it is supposed to.

Does it have anything to do with the fact that I am using divs rather than tables? I tested it on a brand new board with tables, and I still couldn't make it work.

[Pixel]

I have tried reordering certain elements, in order to test if my structure was off. But the structure listed in my first post persists. The full code reads as follows:


<div class="list">
   {foreach $[board]}
   {if !$[board.is_redirect]}
   <div id="$[board.content_id]" class="$[board.content_class]">
       <div id="board-info-box" class="main clickable">
           <span class="link">$[board]</span>
           <div class="description">$[board.description]
               <div class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</div>
               <div class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</div>
               <div class="latest last">
                   {if $[board.posts] > 0}
                   {if $[board.last_thread]}
                   $[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by] <span class="date">$[board.last_thread.last_post.created_on]</span>
                   {/if}
                   {else}
                   No posts have been made on this board.
                   {/if}
               </div>
           </div>
       </div>
   </div>
   <div id="custom-description-box">
       <p>Content placeholder text!</p>
   </div>
   {else}
   <div id="$[board.content_id]" class="$[board.content_class]">
       <div class="icon">$[board.icon]</div>
       <div class="main clickable redirect last" colspan="4">
           <span class="link">$[board]</span><br />
           <p class="description">$[board.description]</p>
       </div>
   </div>
   {/if}
   {/foreach}
</div>
As you might be able to tell, I prefer divs over tables. But that's just a personal preference.

[Pixel]

Brian, if you would like, I can send you a link to my board for you to, hm, shall we say test it?

[Brian]

Feb 16, 2014 4:13:27 GMT -8 Pixel said:

Brian, if you would like, I can send you a link to my board for you to, hm, shall we say test it?

That would help.