PM Number Count on Custom Menu

I've endlessly searched for a solution to this problem - neither this topic or any other topic I've found worked. My PunBB forum is currently using a custom drop down menu, and I have the standard forumotion menu hidden. I cannot find a code that will allow the 'Personal Messenger' option to change into 'Personal Messenger [#]' or something along those lines at all. All codes I've found and looked over don't work. Is there anyone who has a define fix to this, or can help me narrow the problem down?

Okay, your going to have to do a quick favour and post just the snippet of HTML which is the 'Personal Messenger' link in oyur custom navbar. Then I'll be able to help.

In the meantime, this snippet of javascript will get the PM number from the real navbar, so if you know what your doing you can use it to do what you want.

Code:


var x=document.getElementById('i_icon_mini_message') ? 0 : /[0-9]/.exec(document.getElementById('i_icon_mini_new_message').title);


Code:

<div id="menu">
    <ul class="menu">
<li><a href="/forum" class="parent"><span>Home</span></a>
            <ul>
<li><a href="/portal"><span>Portal</span></a></li>
<li><a href="/faq"><span>FAQ</span></a></li>
<li><a href="/search"><span>Search</span></a></li>
            </ul>
        </li>
        <li><a href="" class="parent"><span>Mata Nui Inc</span></a>
            <ul>
              <li><a href="http://kanohijournal.com/ancientchronicle/"><span>Ancient Chronicle</span></a></li>
                <li><a href="http://kanohijournal.com/awakenings/"><span>Awakenings</span></a></li>
                <li><a href="/t417-mata-nui-inc-soundtrack"><span>The MNI Soundtrack</span></a></li>
              </ul>
        </li>
      <li><a href="http://madebyplast.com"><span>Plast! Productions</span></a>
<ul>
                <li><a href="http://kanohijournal.com/solismagna/"><span>Solis Magna and Solar System</span></a></li>
                <li><a href="http://worldscape.madebyplast.com/"><span>Worldscape</span></a></li>
                <li><a href="http://brickcraft.me/"><span>BrickCraft.me</span></a></li>
                </li>
            </ul>
        </li>
<!-- BEGIN switch_user_logged_in -->
  <li><a href="/profile?mode=editprofile" class="parent"><span>Profile</span></a>
            <ul>
                <li><a href="/profile?mode=editprofile&page_profil=preferences"><span>Preferences</span></a></li>
              <li><a href="/groups"><span>Usergroups</span></a></li>
                <li><a href="#" class="parent" ><span>More</span></a>
                <div><ul>
                <li><a href="/search?search_id=watchsearch"><span>My Content</span></a></li>
                <li><a href="/profile?mode=editprofile&page_profil=friendsfoes"><span>Friends and Foes</span></a></li>
                <li><a href="/profile?mode=editprofile&page_profil=avatars"><span>Edit Avatar</span></a></li>
                <li><a href="/profile?mode=editprofile&page_profil=signature"><span>Edit Signature</span></a></li>
                </ul></div>
                </li>
            </ul>
        </li>
        <li><a href="/privmsg?folder=inbox" class="mailbox" class="parent" ><span>Personal Messenger</span></a>
            <ul>
                <li><a href="/privmsg?mode=post"><span>Compose New</span></a></li>
                <li><a href="#" class="parent" ><span>All Folders</span></a>
                <div><ul>
                <li><a href="/privmsg?folder=inbox"><span>Inbox</span></a></li>
                <li><a href="/privmsg?folder=sentbox"><span>Sentbox</span></a></li>
                <li><a href="/privmsg?folder=outbox"><span>Outbox</span></a></li>
                <li><a href="/privmsg?folder=savebox"><span>Savebox</span></a></li>
                </ul></div>
                </li>
            </ul>
        </li>
        <li><a href="/memberlist"><span>Memberlist</span></a></li>
        <li class="last"><a href="/login?logout=1"><span>Log Out</span></a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
        <li><a href="/register"><span>Register</span></a></li>
        <li class="last"><a href="/login"><span>Log In</span></a></li>
<!-- END switch_user_logged_out -->
    </ul>
</div>
                  <br>



<div id="realNav" style="display:none;">{GENERATED_NAV_BAR}</div>

Here's the code I use for the menu, and this is the CSS I use to style it:

Code:

/* menu::base */
div#menu {
    height:41px;
    background:url() repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 22%;
    pdding-right: 0%;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(http://i42.servimg.com/u/f42/16/82/34/31/item-p10.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(http://i42.servimg.com/u/f42/16/82/34/31/item-p11.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(http://i42.servimg.com/u/f42/16/82/34/31/main-d10.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(64,64,64);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(64,64,64); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(http://www.majhost.com/gallery/Riglax/MNI/Forum/lava_test_2.png) no-repeat right -44px !important;
    background-image: url(http://i42.servimg.com/u/f42/16/82/34/31/lava10.gif);
    width: 103px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(http://www.majhost.com/gallery/Riglax/MNI/Forum/lava.png) no-repeat top right !important;
    background-image: url(http://i42.servimg.com/u/f42/16/82/34/31/lava10.gif);
    height: 44px;
    margin-right: 8px;
}

I hope these are enough; if you need someone else please let me know.

Okay, replace all your HTML for this:
(don't worry its the same, but with some minor changes to get you the PM number.

Code:


        <div id="menu">
            <ul class="menu">
        <li><a href="/forum" class="parent"><span>Home</span></a>
                    <ul>
        <li><a href="/portal"><span>Portal</span></a></li>
        <li><a href="/faq"><span>FAQ</span></a></li>
        <li><a href="/search"><span>Search</span></a></li>
                    </ul>
                </li>
                <li><a href="" class="parent"><span>Mata Nui Inc</span></a>
                    <ul>
                      <li><a href="http://kanohijournal.com/ancientchronicle/"><span>Ancient Chronicle</span></a></li>
                        <li><a href="http://kanohijournal.com/awakenings/"><span>Awakenings</span></a></li>
                        <li><a href="/t417-mata-nui-inc-soundtrack"><span>The MNI Soundtrack</span></a></li>
                      </ul>
                </li>
              <li><a href="http://madebyplast.com"><span>Plast! Productions</span></a>
        <ul>
                        <li><a href="http://kanohijournal.com/solismagna/"><span>Solis Magna and Solar System</span></a></li>
                        <li><a href="http://worldscape.madebyplast.com/"><span>Worldscape</span></a></li>
                        <li><a href="http://brickcraft.me/"><span>BrickCraft.me</span></a></li>
                        </li>
                    </ul>
                </li>
        <!-- BEGIN switch_user_logged_in -->
          <li><a href="/profile?mode=editprofile" class="parent"><span>Profile</span></a>
                    <ul>
                        <li><a href="/profile?mode=editprofile&page_profil=preferences"><span>Preferences</span></a></li>
                      <li><a href="/groups"><span>Usergroups</span></a></li>
                        <li><a href="#" class="parent" ><span>More</span></a>
                        <div><ul>
                        <li><a href="/search?search_id=watchsearch"><span>My Content</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=friendsfoes"><span>Friends and Foes</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=avatars"><span>Edit Avatar</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=signature"><span>Edit Signature</span></a></li>
                        </ul></div>
                        </li>
                    </ul>
                </li>
                <li><a href="/privmsg?folder=inbox" class="mailbox" class="parent" ><span>Personal Messenger [<span id="pmcount"></span>]</span></a>
                    <ul>
                        <li><a href="/privmsg?mode=post"><span>Compose New</span></a></li>
                        <li><a href="#" class="parent" ><span>All Folders</span></a>
                        <div><ul>
                        <li><a href="/privmsg?folder=inbox"><span>Inbox</span></a></li>
                        <li><a href="/privmsg?folder=sentbox"><span>Sentbox</span></a></li>
                        <li><a href="/privmsg?folder=outbox"><span>Outbox</span></a></li>
                        <li><a href="/privmsg?folder=savebox"><span>Savebox</span></a></li>
                        </ul></div>
                        </li>
                    </ul>
                </li>
                <li><a href="/memberlist"><span>Memberlist</span></a></li>
                <li class="last"><a href="/login?logout=1"><span>Log Out</span></a></li>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
                <li><a href="/register"><span>Register</span></a></li>
                <li class="last"><a href="/login"><span>Log In</span></a></li>
        <!-- END switch_user_logged_out -->
            </ul>
        </div>
                          <br>



        <div id="realNav" style="display:none;">{GENERATED_NAV_BAR}</div>
<script>
(function(){
var x=document.getElementById('i_icon_mini_message') ? 0 : /[0-9]/.exec(document.getElementById('i_icon_mini_new_message').title);
document.getElementById('pmcount').innerHTML=x;
})();
</script>


Wow! It acutally worked - thank you very much dude!

However, I've got a little problem. The menu seams to be a little buggy; look what happens when I apply the code:





I've tried to add a gap to the 'Personal Messenger' option, but it doesn't work. Any idea for a possible fix? I'll keep trying to find a way around it myself.

Try doing a full swap again for this:

Code:



        <div id="menu">
            <ul class="menu">
        <li><a href="/forum" class="parent"><span>Home</span></a>
                    <ul>
        <li><a href="/portal"><span>Portal</span></a></li>
        <li><a href="/faq"><span>FAQ</span></a></li>
        <li><a href="/search"><span>Search</span></a></li>
                    </ul>
                </li>
                <li><a href="" class="parent"><span>Mata Nui Inc</span></a>
                    <ul>
                      <li><a href="http://kanohijournal.com/ancientchronicle/"><span>Ancient Chronicle</span></a></li>
                        <li><a href="http://kanohijournal.com/awakenings/"><span>Awakenings</span></a></li>
                        <li><a href="/t417-mata-nui-inc-soundtrack"><span>The MNI Soundtrack</span></a></li>
                      </ul>
                </li>
              <li><a href="http://madebyplast.com"><span>Plast! Productions</span></a>
        <ul>
                        <li><a href="http://kanohijournal.com/solismagna/"><span>Solis Magna and Solar System</span></a></li>
                        <li><a href="http://worldscape.madebyplast.com/"><span>Worldscape</span></a></li>
                        <li><a href="http://brickcraft.me/"><span>BrickCraft.me</span></a></li>
                        </li>
                    </ul>
                </li>
        <!-- BEGIN switch_user_logged_in -->
          <li><a href="/profile?mode=editprofile" class="parent"><span>Profile</span></a>
                    <ul>
                        <li><a href="/profile?mode=editprofile&page_profil=preferences"><span>Preferences</span></a></li>
                      <li><a href="/groups"><span>Usergroups</span></a></li>
                        <li><a href="#" class="parent" ><span>More</span></a>
                        <div><ul>
                        <li><a href="/search?search_id=watchsearch"><span>My Content</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=friendsfoes"><span>Friends and Foes</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=avatars"><span>Edit Avatar</span></a></li>
                        <li><a href="/profile?mode=editprofile&page_profil=signature"><span>Edit Signature</span></a></li>
                        </ul></div>
                        </li>
                    </ul>
                </li>
                <li><a href="/privmsg?folder=inbox" class="mailbox" class="parent"  id="pmcount"><span>Personal Messenger</span></a>
                    <ul>
                        <li><a href="/privmsg?mode=post"><span>Compose New</span></a></li>
                        <li><a href="#" class="parent" ><span>All Folders</span></a>
                        <div><ul>
                        <li><a href="/privmsg?folder=inbox"><span>Inbox</span></a></li>
                        <li><a href="/privmsg?folder=sentbox"><span>Sentbox</span></a></li>
                        <li><a href="/privmsg?folder=outbox"><span>Outbox</span></a></li>
                        <li><a href="/privmsg?folder=savebox"><span>Savebox</span></a></li>
                        </ul></div>
                        </li>
                    </ul>
                </li>
                <li><a href="/memberlist"><span>Memberlist</span></a></li>
                <li class="last"><a href="/login?logout=1"><span>Log Out</span></a></li>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
                <li><a href="/register"><span>Register</span></a></li>
                <li class="last"><a href="/login"><span>Log In</span></a></li>
        <!-- END switch_user_logged_out -->
            </ul>
        </div>
                          <br>



        <div id="realNav" style="display:none;">{GENERATED_NAV_BAR}</div>
<script>
(function(){
var x=document.getElementById('i_icon_mini_message') ? 0 : /[0-9]/.exec(document.getElementById('i_icon_mini_new_message').title);
document.getElementById('pmcount').firstChild.innerHTML+=' ['+x+']';
})();
</script>


Alright! That's great, it works perfectly!


I really can't thank you enough - you can consider this solved.