Navbar tab with script

ibaker

Well-known member
I have incorporated a chat room into my site and I was wanting to add a link to the chat room on the navigation bar but also add a balloon of the number of users in the chat rooms.

I have been provided with a html file that results in displaying the number of users in the chat room:

Code:
<html>
<script language="javascript" src="http://www.mydomain.com:#####/online.js"></script>
 
<div id='flashchat'>
<script language="javascript">
document.write("<b> "+ online.ln);
</script>
 
</div>
 
</html>

I have also created a tab entry with a link to the chat room by copying the Alerts code that has the red balloon for the number but need help finishing it...so far all I have done is:
Code:
        <xen:if is="{$visitor.user_id}">
            <li class="navTab chat Popup PopupControl PopupClosed">   
                <a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
                    <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
                        id="AlertsMenu_Counter" data-text="Users chatting in the Chat Rooms">
                        <span class="Total">{xen:number $visitor.alerts_unread}</span>
                    </strong>
                </a>
            </li>
        <xen:else />
            <li><a href="{xen:link 'login'}">Chat</a></li>
        </xen:if>

So can anyone help me to get the red balloon to show the number of users that are in my chat room...your help is greatly appreciated
 
It's actually loads more simple than that to get a count on the nav tab. The template was updated in 1.1.4 to allow an alert style count to be displayed. So you'd be looking at something like this:

HTML:
<li class="navTab chat Popup PopupControl PopupClosed">   
	<a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
		<strong class="itemCount">
			<span class="Total">
				<script language="javascript">
					document.write("<b> "+ online.ln);
				</script>
			</span>
			<span class="arrow"></span>
		</strong>
	</a>
</li>

Can't guarantee that will work because I'm not sure how that bit of javascript works but it's a good starting point.
 
Thanks Chris...you're a marvel

It works except for the formatting of zero...have to figure out how to not show the balloon when there are 0 users in the chat room like Alerts and Inbox when they are 0

Also, where is the best place to put the script call:
Code:
<script language="javascript" src="http://www.mydomain.com:#####/online.js"></script>
 
Probably call the script by placing it in the template:

page_container_js_head

To hide the zero... hmm, try this:

HTML:
<xen:set var="$chatCount"><script language="javascript">
	document.write("<b> "+ online.ln);
</script></xen:set>
<li class="navTab chat Popup PopupControl PopupClosed"> 
	<a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
	<xen:if is="{$chatCount}">
		<strong class="itemCount">
			<span class="Total">
				{xen:number $chatCount}
			</span>
			<span class="arrow"></span>
		</strong>
	</xen:if>
	</a>
</li>

That should make the count only show if it is a number more than 1 (in theory, depends what that little online number script outputs)
 
  • Like
Reactions: KiF
Thanks Chris but that doesn't work at all...no numbers are showing.

This works but still shows 0 if no one is in the chat room:
Code:
        <xen:if is="{$visitor.user_id}">
            <li class="navTab chat Popup PopupControl PopupClosed">
                <a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
                    <strong class="itemCount">
                        <span class="Total">
                            <script language="javascript">
                                document.write(online.ln);
                            </script>
                        </span>
                    </strong>
                </a>
            </li>
        <xen:else />
            <li><a href="{xen:link 'login'}">Chat</a></li>
        </xen:if>
1.webp

This code doesn't show any numbers whether there is 0 or 10 users in the chat room:
Code:
        <xen:if is="{$visitor.user_id}">
            <xen:set var="$chatCount"><script language="javascript">
                document.write(online.ln);
            </script></xen:set>
 
            <li class="navTab chat Popup PopupControl PopupClosed">
                <a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
                    <xen:if is="{$chatCount}">
                        <strong class="itemCount">
                            <span class="Total">
                                {xen:number $chatCount}
                            </span>
                        </strong>
                    </xen:if>
                </a>
            </li>
 
        <xen:else />
            <li><a href="{xen:link 'login'}">Chat</a></li>
        </xen:if>
2.webp
 
Interesting how it still displays the red box though despite the conditional.... with that in mind...

Try altering the code to:


Code:
<xen:if is="{$visitor.user_id}">
	<xen:set var="$chatCount">
		<script language="javascript">
			document.write(online.ln);
		</script>
	</xen:set>

	<li class="navTab chat Popup PopupControl PopupClosed">
		<a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
			<xen:if is="{$chatCount}">
				<strong class="itemCount">
					<span class="Total">
						{$chatCount}
					</span>
				</strong>
			</xen:if>
		</a>
	</li>

<xen:else />
	<li><a href="{xen:link 'login'}">Chat</a></li>
</xen:if>
 
Haha woohoo!

Those results were a little bit more like I was expecting if it went wrong to be honest :D

In that case, then, it might not be possible....

Hmm, maybe try this:

Code:
<xen:if is="{$visitor.user_id}">

	<li class="navTab chat Popup PopupControl PopupClosed">
		<a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
			<xen:if hascontent="true">
				<strong class="itemCount">
					<span class="Total">
						<xen:contentcheck>
							<script language="javascript">
								if (online.ln > 0)
								{
									document.write(online.ln);
								}
							</script>
						</xen:contentcheck>
					</span>
				</strong>
			</xen:if>
		</a>
	</li>

<xen:else />
	<li><a href="{xen:link 'login'}">Chat</a></li>
</xen:if>

Got a feeling that won't work either. After all, there is still going to be content within the count itself, even if the count is empty...

I have another idea...
 
This might be the one... completely different approach again...

Code:
<xen:if is="{$visitor.user_id}">

	<li class="navTab chat Popup PopupControl PopupClosed">
		<a href="#" onclick="window.open('/123flashchat.php','','width=700,height=528');return false;" class="navLink">Chat
			<strong class="itemCount" id="ChatCount">
				<span class="Total">
					<script language="javascript">
						if (online.ln == 0)
						{
							$('#ChatCount').hide();
						}
						
						document.write(online.ln);
					</script>
				</span>
			</strong>
		</a>
	</li>

<xen:else />
	<li><a href="{xen:link 'login'}">Chat</a></li>
</xen:if>
 
Top Bottom