• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Navbar tab with script

ibaker

Well-known member
#1
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
 

Chris D

XenForo developer
Staff member
#2
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.
 

ibaker

Well-known member
#3
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>
 

Chris D

XenForo developer
Staff member
#4
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)
 

ibaker

Well-known member
#5
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.jpg

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.jpg
 

Chris D

XenForo developer
Staff member
#6
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>
 

Chris D

XenForo developer
Staff member
#8
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...
 

Chris D

XenForo developer
Staff member
#10
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>