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

Navbar tab with script

Discussion in 'Styling and Customization Questions' started by ibaker, May 24, 2013.

  1. 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
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  3. ibaker

    ibaker Well-Known Member

    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>
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    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)
     
    KiF likes this.
  5. ibaker

    ibaker Well-Known Member

    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
     
  6. Chris D

    Chris D XenForo Developer Staff Member

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

    ibaker Well-Known Member

    Oops, something went really wrong there mate LOL:
    9.jpg
     
  8. Chris D

    Chris D XenForo Developer Staff Member

    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...
     
  9. ibaker

    ibaker Well-Known Member

    Nearly there:
    3.jpg
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    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>
     
  11. ibaker

    ibaker Well-Known Member

    Yahoo...
    5.jpg

    Thanks so much Chris...donation coming your way, that bubs must be starting to cost you a bit (y)
     
    Chris D likes this.

Share This Page