The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Move the online list

View previous topic View next topic Go down

Move the online list

Post by IdaTR on August 5th 2017, 3:34 pm

Alright, so i have this mini tab menu on this website: www.vielamort.net
And I've got this idea of adding an online list to it so it shows all the users who are online.. However for some reason i can't get it to work.. unsure of what i'm doing wrong, ive sorta given up on doing this by my self.

The online code, was found in the default index_body.

The code for the taps:
Code:

<style>
div.tab {
    overflow: hidden;
    border: 1px solid #9e9e9e;
    background-color: #fff;
    text-align: center;
    width: 948px;
}
div.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 25px;
    transition: 0.3s;
    font-size: 11px;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 5px;
}
div.tab button:hover {
    background-color: #fff;
    color: #9e9e9e;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
div.tab button.active {
    background-color: #fff;
    color: #439274;
}
#box {
  background-color: #fff;
  height: 280px;
  border: 1px solid #9e9e9e;
  padding: 10px;
  width: 930px;
  font-family: times new roman;
}

h5 {
  text-shadow: 2px 2px 3px #000;
  color: #fff;
  font-size: 12px;
  letter-spacing: 10px;
  text-align: center;
  font-family: times new roman !important;
  font-weight: 600;
  margin-bottom: -15px;
}
#welcome {
  margin-top: -100px;
  margin-right:-10px;
}
.avat {
  border: 0px solid #9e9e9e;
  width: 160px;
  height: 220px;
  margin: auto;
  margin-top: -45px;
  margin-right: 2px;
}
.quick {
  border: 1px solid #9e9e9e;
  background: #333;
  display: table-cell;
  vertical-align:middle;
  text-align: center;
  color: #fff;
  font-family: tahoma;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 68px;
  height: 24px;
  font-size: 8px;
}
.quick a {
  color: #fff !important;
  text-decoration: none;
  font-weight:bold;
}
.quick a:visited {
  color: #fff !important;
  text-decoration: none;
  font-weight:bold;
}
.qucick a:hover {
  color: #fff !important;
  text-decoration: none;
  font-weight:bold;
}
.flex-image1 {
  height: 98px;
  width: 115px;
  border: 1px solid #9e9e9e;
  margin: auto;
  margin-right: 5px;
  background-image: url('http://i66.tinypic.com/15nvuae.jpg');
}
.flex-image1:hover {
background: #293F26;
width:115px;
height:98px;
}
.flex-image2 {
  height: 98px;
  width: 115px;
  border: 1px solid #9e9e9e;
  margin: auto;
  margin-top: 5px;
  margin-right: 5px;
  background-image: url('http://i.imgur.com/8jLfqnS.jpg');
  background-position: 10%;
}
.flex-image2:hover {
background: #456740;
width:115px;
height:98px;
}
.flex-image3 {
  height: 98px;
  width: 115px;
  border: 1px solid #9e9e9e;
  margin: auto;
  margin-top: 5.5px;
  margin-right: 5px;
  background-image: url('http://i.imgur.com/ltIxR5h.jpg');
  background-position: 15% 40%;
}
.flex-image3:hover {
background: #557D4F;
width:115px;
height:98px;
}
.flex-image8 {
  height: 98px;
  width: 115px;
  border: 1px solid #9e9e9e;
  margin: auto;
  margin-right: 5px;
  background-image: url('http://i.imgur.com/GROz29l.jpg');
  background-position: 15% 40%;
}
.flex-image8:hover {
background: #355031;
  height: 98px;
  width: 115px;
}
.flex-image4 {
  height: 220px;
  width: 220px;
  border: 1px solid #9e9e9e;
  margin: auto;
  margin-top: -5px;
  background-image: url('http://i.imgur.com/TbimHY2.jpg');
  background-position: 50% 20%;
}
.flex-image4:hover {
background: #299C8D;
width:220px;
height:220px;
}
.flex-image5 {
  height:220px;
  width: 220px;
  border: 1px solid #9e9e9e;
  margin:auto;
  margin-top: -5px;
  background-image: url('http://i.imgur.com/y5N5svW.jpg');
}
.flex-image5:hover {
background: #299C8D;
width:220px;
height:220px;
}
.flex-image6 {
  height:220px;
  width: 220px;
  border: 1px solid #9e9e9e;
  margin:auto;
  margin-top: -5px;
  background-image: url('LINK');
}
.flex-image6:hover {
background: #299C8D;
width:220px;
height:220px;
}
.flex-image7 {
  height:220px;
  width: 220px;
  border: 1px solid #9e9e9e;
  margin:auto;
  margin-top: -5px;
  background-image: url('LINK');
}
.flex-image7:hover {
background: #299C8D;
width:220px;
height:220px;
}
a.flex-url {
  text-decoration: none;
}
a.flex-url:hover {
  text-decoration: none;
}
p {
font-weight: 100;
}
</style><script>
function openSite(evt, siteName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(siteName).style.display = "block";
    evt.currentTarget.className += " active";
}
    document.getElementById("defaultOpen").click();

$(function(){
$(".avat").html(_userdata.avatar);
});
</script>
<center>
   
   <div class="tab">
      
      <button class="tablinks" onclick="openSite(event,'start')">
          Start
      </button>
       |
      <button class="tablinks" onclick="openSite(event, 'chat')">
          Chat
      </button>
       |
      <button class="tablinks" onclick="openSite(event, 'month')">
           User of the month
      </button>
    |
      <button class="tablinks" onclick="openSite(event, 'online')">
           Online
      </button>
      
   </div><br />
   <div id="box">
      
      <div id="start" class="tabcontent">
         
         <table>
            
            <tbody>
               
               <tr>
                  
                  <td style="padding-right:15px; ">
                     
                     <div class="avat">
                        
                     </div>
                     
                     <div id="welcome">
                        
                        <h5>
                            VELKOMMEN<br />{USERNAME}
                        </h5>
                        
                     </div>
                     
                  </td>
                  
                  <td style="border-left: 1px solid #9e9e9e; padding-right:10px;">
                     
                  </td>
                  
                  <td style="padding-right:15px;">
                     
                     <div style="background: url('http://thomaskinkadehq.com/wp-content/uploads/2013/11/partwi.jpg'); border: 1px solid #9e9e9e; width:220px;height:35px;margin-bottom:2px;">
                        <h5 style="margin-top:5px;">
                           PLOT
                        </h5>
                     </div>
                     
                     <p style="width:220px; font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5; letter-spacing:0.3px;">
                         Vi befinder os i en fiktiv by, kaldet Di Morga, som er beliggen i Frankrig. Dette sted, vrimler med forskellige væsner, hvis eksistens er ukendt for den omgivende verden, der ikke er klar over de mange racer der befinder sig i verdenen udover nogle typiske mere kendte: Vampyrer og Varulve. I denne by lever de forskellige væsner side om side med hinanden. Dette resulterer i forskellige slag imellem disse, som ofte leder til et større tumult i byen. <br /><br /> Tidsperioden er i vor nutid, placeret i Frankrig.
                     </p>
                     
                  </td>
                  
                  <td style="border-left: 1px solid #9e9e9e; padding-right:10px;">
                     
                  </td>
                  
                  <td style="font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5;letter-spacing:0.3px; width:220px; vertical-align:top;">
                     
                     <p style="margin-bottom:px;">
                        
                     </p>
                     
                     <center>
                          <strong>QUCIK LINKS</strong>
                        <p>
                           
                        </p>
                        
                     </center><br />
                     <table>
                        
                        <tbody>
                           
                           <tr>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/f100-regler">regler</a>
                              </td>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/f3-racer">racer</a>
                              </td>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/f102-guides">hjælp</a>
                              </td>
                              
                           </tr>
                           
                           <tr>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/f56-alt-om-di-morga">Verden</a>
                              </td>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/t14943-face-claim#270927">CLAIM</a>
                              </td>
                              
                              <td class="quick">
                                  <a href="http://www.vielamort.net/f98-emner-og-plots">Plotter</a>
                              </td>
                              
                           </tr>
                           
                        </tbody>
                        
                     </table><br />
                     <div style="background: url(http://img.diytrade.com/cdimg/547776/3634460/0/1179233282/night_street_view_in_Paris_art_oil_painting.jpg); border: 1px solid #9e9e9e; width:200px;height:35px; background-position:100% 25%; margin-bottom:2px;">
                        
                        <h5 style="margin-top:5px;">
                            NEWS
                        </h5>
                        
                     </div>
                     
                     <div style="width:195px; height: 110px; border:0px solid #9e9e9e; padding:3px ; Serif;overflow:auto; line-height:1.43; text-align:left;">
                                       
                        <p>
                           Konkurrence: <strong><a href="http://www.vielamort.net/t14947-mandens-afstemning">MÅNEDENS</a></strong> er igang.<br /><br />Missioner er undervejs, og vil komme op og kører i oktober måned!<br /><br />Husk at se de nye ændringer igennem: racer, regler, character sheets!
                        </p>
                        
                     </div>
                     
                  </td>
                  
                  <td style="border-right: 1px solid #9e9e9e; padding-left:10px;">
                     
                  </td>
                  
                  <td style="vertical-align:top; width:100%; text-align:center;">
                     
                     <p style="font-family:verdana; font-size:10px; font-weight:600;letter-spacing:0.3px;">
                         ADMINS
                     </p>
                     
                     <table style="margin:auto; margin-right:0px; margin-top:5px;">
                        
                        <tbody>
                           
                           <tr>
                              
                              <td>
                                  <a href="http://www.vielamort.net/u1" class="flex-url">                                  <div class="flex-image1">
                                     <br />
                                    <h5 style="margin-top: 45px; margin-left:8px;">
                                        THOMAS
                                    </h5>
                                    
                                 </div></a>
                              </td>
                              
                              <td>
                                  <a href="http://www.vielamort.net/u3899" class="flex-url">
                                 <div class="flex-image8">
                                     <br />
                                    <h5 style="margin-top: 45px;margin-left:8px;">
                                        ARIA
                                    </h5>
                                    
                                 </div></a>
                              </td>
                              
                           </tr>
                           
                           <tr>
                              
                              <td>
                                  <a href="http://www.vielamort.net/u2817" class="flex-url">
                                 <div class="flex-image2">
                                     <br />
                                    <h5 style="margin-top: 45px;margin-left:8px;">
                                        DAVID
                                    </h5>
                                    
                                 </div></a>
                              </td>
                              
                              <td>
                                  <a href="http://www.vielamort.net/u2767" class="flex-url">
                                 <div class="flex-image3">
                                     <br />
                                    <h5 style="margin-top: 45px;margin-left:8px;">
                                        EVELYN
                                    </h5>
                                    
                                 </div></a>
                              </td>
                              
                           </tr>
                           
                        </tbody>
                        
                     </table>
                     
                  </td>
                  
               </tr>
               
            </tbody>
            
         </table>
         
      </div>
      
      <div id="chat" class="tabcontent" style="display: none;">
         
         <table>
                                         
            <tbody>
                                              
               <tr>
                  
                  <td><iframe src="https://www4.cbox.ws/box/?boxid=4327805&boxtag=JEf9AW" allowtransparency="yes" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" style="width: 580px; height: 275px;"> </iframe>                           
                  </td>
                  
                  <th style="padding-left:15px;width:100%; vertical-align:top;">
                     
                     <div style="background:url('http://www.micasso.com/images/pictures/Monet%20Bridge.jpg'); border: 1px solid #9e9e9e; width:330px;height:35px; background-position:10% 5%; margin-bottom:2px;margin:auto;">
                                                         
                        <h5>
                             CHAT REGLER                                                                                                         
                        </h5>
                                                         
                     </div>
                                                                                                                            
                     <center>
                        <div style="height:200px; width:90%; text-align:justify;font-family:verdana; font-size: 10px; font-weight: 100; line-height:1.8;">
                                                                                                                                       1. Det er påkrævet at folk har en pæn tone overfor hinanden. Hvis der sker opstød bedes man tage det i PM.<br /><br />2. Benyt venligst dit brugernavn i chatten, så vi ved hvem der hvem. <br /><br />3. Lad vensligt være med at reklamerer for diverse sider i chatten, disse er der et specifikt forum for: <a href="http://www.vielamort.net/f24-reklamation">Reklamation</a><br /><br />4. Hvis du har spørgsmål vedrørerende forskellige områder, henvend dig venligst til en admin: <a href="/u1">Thomas</a>, <a href="http://www.vielamort.net/u2817">David</a> eller <a href="http://www.vielamort.net/u2767">Evelyn</a> - eller skriv i forummet: <a href="http://www.vielamort.net/f65-sprgsmal-og-ideer">Spørgsmål & Idéer</a>
                        </div>
                                                   
                     </center>
                                                    
                  </th>
                                                 
               </tr>
                                          
            </tbody>
                                       
         </table>
                                  
      </div>
                                       
      <div id="month" class="tabcontent" style="display: none;">
              
         <div style="background:url('http://artist.com/art-recognition-and-education/wp-content/themes/artist-blog/media-files/2016/03/impressionism-3.jpg'); border: 1px solid #9e9e9e; width:auto;height:35px; background-position:10% 5%; margin-bottom:2px;margin:auto">
                   
            <h5>
                         USER OF THE MONTH                                                                                                         
            </h5>
         </div><br />                                                                                                           
         <table>
                                                   
            <tbody>
                                                              
               <tr>
                                                                 
                  <td style="padding-right:5px; padding-left: 7px;">
                         <a class="flex-url" href="http://www.vielamort.net/u3006">                                                                                                                 
                     <div class="flex-image4">
                                                       
                        <h5 style="margin-top: 50px;">
                             TOPIC STARTER<br /><br />NIGHTRAGE       
                        </h5>
                     </div></a>
                  </td>
                                   
                  <td style="padding-right:5px;">
                         <a class="flex-url" href="http://www.vielamort.net/u3000"> 
                     <div class="flex-image5">
                               
                        <h5 style="margin-top: 50px;">
                             MOST POSTS<br /><br /><br />BAILEY       
                        </h5>
                     </div></a>
                  </td>
                                 
                  <td style="padding-right:20px;">
                           <a class="flex-url" href="#">
                     <div class="flex-image6">
                                 
                        <h5 style="margin-top: 50px;">
                                 THE CHARACTER<br /><br />USERNAME         
                        </h5>
                     </a>
                  </td>
                                 
                  <td>
                           <a class="flex-url" href="#">
                     <div class="flex-image7">
                             
                        <h5 style="margin-top: 50px;">
                            THE HEART BREAKER<br /><br />USERNAME       
                        </h5>
                     </div></a>
                  </td>
               </tr>
                  
            </tbody>
         </table>
      </div>
          <div id="chat" class="tabcontent" style="display: none;">
         
               <div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{TOTAL_POSTS}</p>
         <p>{TOTAL_USERS}</p>
         <p>{NEWEST_USER}</p>
      </div>
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p>{TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
         {LOGGED_IN_USER_LIST}

         {L_ONLINE_USERS}
         {L_CONNECTED_MEMBERS}<br />
         {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>

         <p>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>

      </div>                     
      </div>
   </div>
</center>
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Move the online list

Post by SLGray on August 5th 2017, 6:49 pm

Do you mean at the top of the forum in the announcement area?


Last edited by SLGray on August 5th 2017, 7:07 pm; edited 1 time in total


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39712
Reputation : 2680
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Move the online list

Post by IdaTR on August 5th 2017, 7:05 pm

@SLGray wrote:Do you means this: http://www.vielamort.net/viewonline ? If yes, I see the map and a list of guests and members.

P.S. You misspelled list in the menu. You have liste.

Yes, but i want it to be moved to the tab content that i posted.

And i don't see any misspellings in the code anywhere ^^'?

Edit: like the in build statics that shows the list of online users, which most forums have unless removed or changed.
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Move the online list

Post by SLGray on August 5th 2017, 7:07 pm

I edited my message.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39712
Reputation : 2680
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Move the online list

Post by IdaTR on August 5th 2017, 7:12 pm

Yes i mean that ! ^^
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Move the online list

Post by SLGray on August 5th 2017, 7:19 pm



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39712
Reputation : 2680
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Move the online list

Post by IdaTR on August 5th 2017, 7:43 pm

I dont see any code for Online Users?
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Move the online list

Post by IdaTR on August 6th 2017, 9:48 pm

bump
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Move the online list

Post by IdaTR on August 8th 2017, 10:03 am

bump
avatar
IdaTR
Forumember

Female Posts : 425
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum