The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Move the online list

2 posters

Go down

Move the online list Empty Move the online list

Post by IdaTR 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>
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Move the online list Empty Re: Move the online list

Post by SLGray 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


Move the online list Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Move the online list Empty Re: Move the online list

Post by IdaTR 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.
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Move the online list Empty Re: Move the online list

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

I edited my message.


Move the online list Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Move the online list Empty Re: Move the online list

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

Yes i mean that ! ^^
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Move the online list Empty Re: Move the online list

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



Move the online list Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Move the online list Empty Re: Move the online list

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

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

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

http://www.vielamort.net

Back to top Go down

Move the online list Empty Re: Move the online list

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

bump
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Move the online list Empty Re: Move the online list

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

bump
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Back to top

- Similar topics

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