The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

View previous topic View next topic Go down

Solved Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Castiel on December 8th 2013, 6:15 pm

Hello,

I have seen this on multiple forums. The sub-forums are not visible but once you hover of the forum its sub-forums become visible too. Could someone explain to me how this is done?

Regards,

Castiel

Castiel
Forumember

Male Posts : 136
Reputation : 0
Language : English

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Legolas on December 8th 2013, 6:18 pm

Hello,
Can you post your forum address ? Also, to make this i need your index_box, thanks!

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Castiel on December 8th 2013, 6:19 pm

My index box is:
Code:
<div class="pun-crumbs">
<p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><br>
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<thead>
<tr class="ascundema">
<th class="tcl">{L_FORUM}</th>
<th class="tc2">{L_TOPICS}</th>
<th class="tc3">{L_POSTS}</th>
<th class="tcr">{L_LASTPOST}</th>
</tr>
</thead>
<tbody class="statused">
<!-- END tablehead -->

<!-- BEGIN forumrow -->
<tr>
<td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">


<span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span>

<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
<br />
<div class="desc">{catrow.forumrow.FORUM_DESC}</div>
<!-- BEGIN switch_moderators_links -->
<br />
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</td><td class="tc3">
<div class="posts">{catrow.forumrow.TOPICS} {L_TOPICS}</div><br>
<div class="topics">{catrow.forumrow.POSTS} {L_POSTS}</div></td>
<td class="tcr">
<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
<div class="last-post">{catrow.forumrow.USER_LAST_POST}</div>
</span>
</td>
</tr>
<!-- END forumrow -->

<!-- BEGIN tablefoot -->
</tbody>
</table>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
<li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
Thanks for the fast reply, Legolas!


Last edited by Castiel on December 8th 2013, 6:48 pm; edited 1 time in total

Castiel
Forumember

Male Posts : 136
Reputation : 0
Language : English

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Legolas on December 8th 2013, 6:22 pm

No problem, this is "my job".
Replace your index_box with:
Code:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead --><br>
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr class="ascundema">
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
                                          </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                   
                                 
  <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                                             
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                                                          <div class="desc">{catrow.forumrow.FORUM_DESC}</div>
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
<div class="subforumz">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                                          </td><td class="tc3">
                  <div class="posts">{catrow.forumrow.TOPICS} {L_TOPICS}</div><br>
                                                          <div class="topics">{catrow.forumrow.POSTS} {L_POSTS}</div></td>
                  <td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                                                          <div class="last-post">{catrow.forumrow.USER_LAST_POST}</div>
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->   
And add to your CSS Stylesheet:
Code:

.subforumz{
display: none;
}
.subforumz:hover{
display: block;
}

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Castiel on December 8th 2013, 6:25 pm

The sub-forums are hidden but when I hover over a forum they do not become visible.


Last edited by Castiel on December 8th 2013, 6:52 pm; edited 1 time in total

Castiel
Forumember

Male Posts : 136
Reputation : 0
Language : English

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Legolas on December 8th 2013, 6:35 pm

Ahh, sorry, my mistake!

Replace CSS codes with:
Code:

.subforumz{display: none;}

After that, make a Javascript code, tick just index and write:
Code:

$(function () {
    $(".forumuri").hover(function () {
        "block" != $(this).next(".subforumz")[0].style.display ? $(this).next(".subforumz")[0].style.display = "block" : $(this).next(".subforumz")[0].style.display = "none"
    })
});
Do not forget, replace again your index_box with:
Code:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead --><br>
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr class="ascundema">
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
                                          </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
<div class="forumuri">
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                   
                                 
  <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                                             
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                                                          <div class="desc">{catrow.forumrow.FORUM_DESC}</div>
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
<div class="subforumz">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                                          </td><td class="tc3">
                  <div class="posts">{catrow.forumrow.TOPICS} {L_TOPICS}</div><br>
                                                          <div class="topics">{catrow.forumrow.POSTS} {L_POSTS}</div></td>
                  <td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                                                          <div class="last-post">{catrow.forumrow.USER_LAST_POST}</div>
                    </span>
                  </td>
              </tr>
</div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index --> 

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Castiel on December 8th 2013, 6:39 pm

Updated CSS, JS and index_box but the sub-forums are still not showing.

Castiel
Forumember

Male Posts : 136
Reputation : 0
Language : English

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Legolas on December 8th 2013, 6:42 pm

Such a simple thing.. Sad
Delete javascript code and replace css codes with:
Code:

td.tcl:hover .subforumz{
opacity: 10;
}
td.tcl .subforumz{
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
-webkit-transition-duration: .8s;
opacity: 0;
transition-duration: .8s;
}

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Castiel on December 8th 2013, 6:45 pm

You did it! Thanks a lot, Legolas.

Castiel
Forumember

Male Posts : 136
Reputation : 0
Language : English

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by Legolas on December 8th 2013, 6:47 pm

Your welcome Wink!

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: Hide Sub-Forums But Show Them When Hover Over Forum (PunBB)

Post by SLGray on December 9th 2013, 12:24 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum