Forum - "Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!

<style>
  .visitenkarte_online {
    position:relative; 
  }
  .visitenkarte_img {
    height: 95px;
    width: 95px;
  }
  .visitenkarte_img img{
    display:flex;    
    margin:auto;
    max-width:80px;
    padding:5px;
    border: none;
  }
  .visitenkarte_info {
    white-space:nowrap;
    font-size: 13px;
    padding:5px 10px; 
  }
  .visitenkarte_info a {
    font-weight:bold;
  }
  .visitenkarte_info b img {
    max-height:25px;
    width:auto;
    margin-bottom:5px;
  }
  .user_online td { 
    width:auto; 
    text-align:center;
    padding: 10px 20px;
  }
  .user_online td:first-child {
    text-align:left !important;
  }
  .user_online tr:first-child td strong {
    padding: 0px 3px;
  } 
  .user_online td img{ 
    min-width:100px;    
    object-fit: contain ;
  }
  .user_online_zahl td {
    padding: 10px 20px;
  } 
 
 /* Scrollbalken Xobor (v6)  */
.mbt .container-fluid {
  width: calc(100% - 15px); 
  margin-left: 0px;
  overflow: auto !important;
}
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
 
// Optional fürs Xobor (v6): Class korrigieren in ".mbt .container-fluid"  
$('.page_useronline .boxcontent, .c_r_cont2 .c_r_content2, .forumbg, .cat, .mmmbt .container-fluid').html(`
  {{counter.startint}} (0) {{counter.end}}{{line.start}}{{line.end}}
  <table width="100%" class="visitenkarte_online">
    {{users.startlist}}{{line==true.start}}{{counter==4.start}} {{counter.startint}} (0) {{counter.end}}<tr><td colspan="4"><hr/></td></tr class="bg2 ntop"> {{counter==4.end}}{{line==true.end}}{{line.start}}true{{line.end}}{{counter==0.start}} <tr class="bg2 ntop"> {{counter==0.end}}
    <td>
      <table width="100%" class="forum scnd"><tr>
        <td class="visitenkarte_img">
            <a href="{{users:link}}">
            {{users:userimage==true.start}}
              <img src="{{users:userimage}}" title="{{users:username}}">
            {{users:userimage==true.else}}
              {{users:user_gender==true.start}}
                {{users:user_gender_m==true.start}}<img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_382.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_m==true.end}}
                {{users:user_gender_w==true.start}}<img src="{{global_user_profile_genderW==true.start}}//files.homepagemodules.de/b2001010/a_383.png{{global_user_profile_genderW==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderW==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_w==true.end}}
              {{users:user_gender==true.else}}
                <img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_388.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" title="{{users:username}}">
              {{users:user_gender==true.end}}
            {{users:userimage==true.end}}
            </a>
        </td>
        <td class="visitenkarte_info">
          <a href="{{users:link}}" style="text-decoration: none;"><b><span style="{{users:usercolor==true.start}}color:{{users:usercolor}};{{users:usercolor==true.end}}{{users:invisible==true.start}} font-style:italic;{{users:invisible==true.end}}">{{users:name}}{{users:username|shortstring(18,"...")}}</span></b></a>
          <br>
          {{users:location@location}}
          <br>
          <small><i>{{users:online|dateformat}}</i></small>
        </td></tr>
      </table>
    {{counter.startint}} ( {{counter}}+1 ) {{counter.end}}
  </td>
    {{users.end}}
    {{counter!==4.start}} </tr> {{counter!==4.end}}
  </table>
  {{users==true.start}}
  <hr/>
  <table width="100%" class="user_online"><tr class="bg2 ntop">
    <td><strong>Name</strong></td>
    <td><strong>Titel</strong></td>
    <td><strong>Letzte Aktion</strong></td>
    <td><strong>Ort</strong></td>
  </tr>
  {{users.startlist}}
  <tr class="bg3">
    <td><a href="{{users:link}}"><strong>{{users:uname}}</strong></a></td>
    <td><strong>{{users:title}}</strong></td>
    <td>{{users:online|dateformat}}</td>
    <td>{{users:location@location}}</td>
  </tr>
  {{users.end}}
  </table> 
  <table width="100%" class="user_online_zahl forum scnd"><tr class="bg2 ntop"><td><strong>Es sind Online:</strong> {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast {{guests_online==1.end}} und {{member_online}} {{member_online!==1.start}}Mitglieder{{member_online!==1.end}} {{member_online==1.start}} Mitglied {{member_online==1.end}}</td></tr></table>
  {{users==true.else}}
  <table width="100%" class="user_online_zahl forum scnd"><tr class="bg2 ntop"><td><b>Es sind keine Mitglieder und {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast{{guests_online==1.end}} online!</b></td></tr></table>
  {{users==true.end}}
  <br>
`);
  
});
</script>
 

<style>
  .tab_online {
    position:relative; 
    width:100%;
    height:auto;
    text-align:center;
  }
  .tab_online td {
    padding: 10px;
    border-bottom:1px solid #aaaaaa;
  }
  .tab_online td:first-child {
    width:100px !important;
  }
  .tab_online a {
    display: block; 
    overflow: hidden;
  }
  .tab_online .title_img img { 
    min-width:100px;    
    object-fit: contain ;
  }
  .tab_online_img img {
    display:flex;    
    margin:auto auto 5px auto;
    max-width:80px;
    border: none;
  }
  .tab_on td {
    padding: 10px 20px;
  }
  
  /* Scrollbalken Xobor (v6)  */
  .mbt .container-fluid {
    width: calc(100% - 15px); 
    margin-left: 0px;
    overflow: auto !important;
  }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
 
// Optional fürs Xobor (v6): Class korrigieren in ".mbt .container-fluid"  
$('.page_useronline .boxcontent, .c_r_cont2 .c_r_content2, .forumbg, .cat, .mmmbt .container-fluid').html(`
{{users==true.start}}
  <table class="tab_online forum scnd">
    <tr class="bg2 ntop">
      <td><strong>Name</strong></td>
      <td><strong>Titel</strong></td>
      <td><strong>Letzte Aktion</strong></td>
      <td><strong>Ort</strong></td>
    </tr>
                                                                                            
    {{users.startlist}}                                                                                         
    <tr class="bg3">
      <td class="tab_online_img">
        <a href="{{users:link}}">
            {{users:userimage==true.start}}
              <img src="{{users:userimage}}" title="{{users:username}}">
            {{users:userimage==true.else}}
              {{users:user_gender==true.start}}
                {{users:user_gender_m==true.start}}<img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_382.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_m==true.end}}
                {{users:user_gender_w==true.start}}<img src="{{global_user_profile_genderW==true.start}}//files.homepagemodules.de/b2001010/a_383.png{{global_user_profile_genderW==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderW==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_w==true.end}}
              {{users:user_gender==true.else}}
                <img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_388.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" title="{{users:username}}">
              {{users:user_gender==true.end}}
            {{users:userimage==true.end}}
            <b>{{users:uname}}</b>
          </a>
      </td>
      <td class="title_img">{{users:title}}</td>
      <td>{{users:online|dateformat}}</td>
      <td>{{users:location@location}}</td>
    </tr> 
    {{users.end}}                                                         
  </table>
 
  <table width="100%" class="tab_on scnd"><tr class="bg2 ntop"><td><strong>Es sind Online:</strong> {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast {{guests_online==1.end}} und {{member_online}} {{member_online!==1.start}}Mitglieder{{member_online!==1.end}} {{member_online==1.start}} Mitglied {{member_online==1.end}}</td></tr></table>
  {{users==true.else}}
  <table width="100%" class="tab_on scnd"><tr class="bg2 ntop"><td><b>Es sind keine Mitglieder und {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast{{guests_online==1.end}} online!</b></td></tr></table>
  {{users==true.end}}
`);
  
});
</script>
 

<script>
//Aktivity Feed + Mitgliederliste + Onlineliste: Xobor (v6)
$('#activity_feed .card-header h5:first,#userlist .card-header h5:first').after('<small>Ihr letzter Besuch war vor <span class="OnlinezeitWert">00:00</span> Stunden</small>');
if (!$('.card-expl').length > 0) {
$('#useronline .card-header h5:first').after('<span style="font-weight:normal;"><small>Ihr letzter Besuch war vor <span class="OnlinezeitWert">00:00</span> Stunden</small></span>');
};
 
//Aktivity Feed + Mitgliederliste + Onlineliste: Standard (v1), ProSilver (v2), Gaia (v3), Business (v4)
$('.xFeedContainer strong, .inpage h2, .topiclist dt:first,.page_useronline .boxheader strong,.page_userlist .boxheader strong,#page-body h2,#pagewidth .cat .ntit').append('<br><span style="font-weight:normal;"><small>Ihr letzter Besuch war vor <span class="OnlinezeitWert">00:00</span> Stunden</small></span>');
 
//Statistik: Alle Templates
$('#visits_').after('<strong>Onlinezeit</strong>:<br>Ihr letzter Besuch war vor <span class="OnlinezeitWert">00:00</span> Stunden<br><br>');
 

function Zeitberechnung() {
if ($('.OnlinezeitWert').length > 0) {
 
var cName = 'onlineCookie';
if (document.cookie && getTimeCookie(cName) != '' && getTimeCookie(cName) != 'NaN') {
var CookieAufrufzeit = parseInt(getTimeCookie(cName));
}
else {
var Aufrufzeit = parseInt((new Date()).getTime());
 
document.cookie = cName+'='+(Aufrufzeit)+';';
var CookieAufrufzeit = Aufrufzeit;
}
var Differenz = parseInt(((new Date()).getTime() - CookieAufrufzeit) / 1000);
var Minuten = Math.floor(Differenz/60);
var Stunden = Math.floor(Minuten/60);
 
var stime = mknull(Differenz,2);
Minuten = (Minuten%60);
stime = mknull(Stunden,2)+':'+mknull(Minuten,2);
 
$('.OnlinezeitWert').html(stime);
setTimeout("Zeitberechnung()", 1000);
}
}
function getTimeCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + '=');
if (c_start!=-1) {
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(';',c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return '';
}
function mknull(zahl, stellen) {
var strlen = zahl.toString().length;
for(var i=strlen; i<stellen; i++){
zahl = '0'+zahl;
}
return zahl;
}
 
$(function(){
window.onload = Zeitberechnung();
});
</script>
 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ( (!$('.userlistlink')) || ($('.card-expl')).length){
      $('<div class="userlistlink text-right"><a href="/useronline.php" style="padding-right:10px;">Mehr anzeigen</a></div>').appendTo("#useronline");
    };
  });
</script>
 

<style>
  .visitenkarte_online {
    display:inline-block;
    height:auto;
    width:auto;
    max-width:500px; 
    border:1px solid #aaaaaa;
    margin:15px;
    text-align:left;
  }
  .visitenkarte_img {
    height: 95px;
    width: 95px;
  }
  .visitenkarte_img img{
    display:flex;    
    margin:auto;
    max-width:80px;
    padding:5px;
    border: none;
  }
  .visitenkarte_info {
    font-size: 13px;
    padding:5px 10px; 
  }
  .visitenkarte_info a {
    font-weight:bold;
  }
  .visitenkarte_info b img {
    max-height:25px;
    width:auto;
    margin-bottom:5px;
  }
  .user_online {
    bottom:5px;
    position:relative;
  }
  .user_online td {
    padding: 10px 20px;
  }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
   
  // Optional fürs Xobor (v6) ausschalten: Class ".mbt .container-fluid"  löschen!
  $('.spacer20 .boxcontent, .c_r_cont2 .c_r_content2, .forumbg, .cat, .mbt .container-fluid').html(`
    {{users.startlist}}
      <table class="visitenkarte_online forum scnd bg2 ntop">
        <tr class="bg2 ntop" style="border:none;">
          <td class="visitenkarte_img">
            <a href="{{users:link}}">
            {{users:userimage==true.start}}
              <img src="{{users:userimage}}" title="{{users:username}}">
            {{users:userimage==true.else}}
              {{users:user_gender==true.start}}
                {{users:user_gender_m==true.start}}<img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_382.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_m==true.end}}
                {{users:user_gender_w==true.start}}<img src="{{global_user_profile_genderW==true.start}}//files.homepagemodules.de/b2001010/a_383.png{{global_user_profile_genderW==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderW==true.end}}" alt="{{users:name}}" title="{{users:username}}">{{users:user_gender_w==true.end}}
              {{users:user_gender==true.else}}
                <img src="{{global_user_profile_genderM==true.start}}//files.homepagemodules.de/b2001010/a_388.png{{global_user_profile_genderM==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{global_user_profile_genderM==true.end}}" title="{{users:username}}">
              {{users:user_gender==true.end}}
            {{users:userimage==true.end}}
            </a>
          </td>
          <td class="visitenkarte_info">
            <a href="{{users:link}}" style="text-decoration: none;"><b><span style="{{users:usercolor==true.start}}color:{{users:usercolor}};{{users:usercolor==true.end}}{{users:invisible==true.start}} font-style:italic;{{users:invisible==true.end}}">{{users:username}}</span></b></a>
            <br>
            <b>{{users:title}}</b>
            <br>
            <small>Ort: <i>{{users:location@location}}</i></small>
            <br>
            <small>Letzte Aktion: <i>{{users:online|dateformat}}</i></small>
          </td>
        </tr>
      </table>
    {{users.end}}
 
    {{users==true.start}}
      <table width="100%" class="user_online scnd bg2 ntop"><tr><td><strong>Es sind Online:</strong> {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast {{guests_online==1.end}} und {{member_online}} {{member_online!==1.start}}Mitglieder{{member_online!==1.end}} {{member_online==1.start}} Mitglied {{member_online==1.end}}</td></tr></table>
    {{users==true.else}}
      <table width="100%" class="user_online scnd bg2 ntop"><tr><td><b>Es sind keine Mitglieder und {{guests_online}} {{guests_online!==1.start}}Gäste{{guests_online!==1.end}} {{guests_online==1.start}}Gast{{guests_online==1.end}} online!</b></td></tr></table>
    {{users==true.end}}
  `);
  
});
</script>