Hitskin.com
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:
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} : {GROUP_LEGEND}</p>
</div>
</div>
</div>
</center>
Facebook
Twitter
Pinterest
Youtube
