Navbar tab with script

ibaker

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
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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...
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

O
  • Question Question
XF 1.5 This script causes anything that needs the Ajax Progress Bar to not load
Replies
3
Views
1K
overifist
O
Allan
Problem with script and loader xenforo
Replies
4
Views
1K
Allan
Allan
XxUnkn0wnxX
  • Question Question
XF 1.3 unable to enable/disable xenforo smilies - java script error
Replies
7
Views
3K
XxUnkn0wnxX
XxUnkn0wnxX
Morgain
[Tutorial] Admin navbar tab + dropdown Favorites
Replies
0
Views
5K
Morgain
Morgain
Back
Top Bottom