Widget staff online

4 participantes

Ir para baixo

Tópico resolvido Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 1:58

Detalhes da questão


Endereço do fórum: http://www.bmwserver.com
Versão do fórum: ModernBB

Descrição


Gostaria de criar um widget para o portal que mostre os staffs online como este: https://i.imgur.com/CY1296x.png?1
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Harleen 10.07.17 16:47

Olá, leia com atenção a mensagem nesse tópico:
https://ajuda.forumeiros.com/t104317-staff-online-com-grupo#757666

Até mais
Harleen
Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 17:14

Fiz conforme o tópico que mandou, mas gostaria de maior e aparecendo o avatar, pois nesse code ai ele bugou
https://i.imgur.com/4Fm1zPf.png?1
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 17:18

Isso por que o código não funciona para a versão ModernBB.
Troque por:
Código:
<ul id="staff_widget"></ul>
 
 <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Administrador": "FF0000",
        "Moderador": "008C09",
        "Ajudante": "D69A45"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script>
<style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 5px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 3px;
  }
  #staff_widget .span-avatar {
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 1px;
    width: 30px;
  }
</style>

Deve resolver...

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 18:24

O avatar esta funcionando, mas ainda acho pequeno.
https://i.imgur.com/CY1296x.png?1
por isso citei este como exemplo, mas não tão exagerado. Mas sim o avatar, nick e o grupo ficarem proposicionalmente maiores
Código:
<ul id="staff_widget"></ul>
 
 <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script>
<style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 5px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 3px;
  }
  #staff_widget .span-avatar {
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 1px;
    width: 30px;
  }
</style>
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 18:42

Adicione mais esta peça ao final de sua CSS:
Código:
#staff_widget {
  padding-left: 0px;
}

#staff_widget .span-name {
  font-size: 17px;
}

#staff_widget .rank-staff {
  font-size: 14px;
}

Ficará assim:
-> http://prntscr.com/ftz2sz

PS: O avatar parece bugado, mas isso é dele mesmo. ᕕ(ᐛ)ᕗ
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 18:44

https://i.imgur.com/h07AjWm.png?1

Eu "fucei" e deixei assim, só faltaria colocar o texto alinhado com o centro da imagem e um botao para MP, se possivel
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 18:46

Como assim?
[...] texto alinhado com o centro da imagem [...]
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 18:56

https://i.imgur.com/Jil93iX.jpg

Fiz no photoshop um exemplo, tem um bugzin ali mas da pra entender.
No espaço vazio ao lado direito por coisas uteis. Como botão para MP, essas coisas

Code atual:
Código:
<ul id="staff_widget">
</ul>
  <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script><style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 1px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 1px;
  }
  #staff_widget .span-avatar {
    margin-top: 1px;
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 70px;
    padding: 1px;
    width: 60px;
  }
</style>
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 19:01

Adicione mais isso na sua CSS:
Código:
#staff_widget {
  padding: 0px !important;
}

.span-name {
  margin-top: 35px;
  display: inline-block;
}

Altere o valor da linha 6, para mais ou menos, de acordo com a posição que você quer no texto.
Já para o link da MP, troque o código por:
Código:
<ul id="staff_widget"></ul>
 
 <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Administrador": "FF0000",
        "Moderador": "008C09",
        "Ajudante": "D69A45"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "  <a href='javascript:void(0)' class='fa-link-mp fa fa-envelope'></a>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var fapml = jQuery(this).find(".fa-link-mp");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              fapml.attr('src', href);
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script>
<style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 5px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 3px;
  }
  #staff_widget .span-avatar {
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 1px;
    width: 30px;
  }
</style>

Para acertarmos depois. o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 19:13

Ficou show, e para colocar os botoes ao lado? Como MP e outras coisas que seriam uteis?
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 19:18

Tente trocar o código por este:
Código:
<ul id="staff_widget"></ul>
 
 <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Administrador": "FF0000",
        "Moderador": "008C09",
        "Ajudante": "D69A45"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "  <a href='javascript:void(0)' class='fa-link-mp fa fa-envelope'></a>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var fapml = jQuery(this).find(".fa-link-mp");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              fapml.attr('href', href);
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script>
<style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 5px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 3px;
  }
  #staff_widget .span-avatar {
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 1px;
    width: 30px;
  }
</style>

Eu não gosto muito de trabalhar usando códigos de outras pessoas.
É meio complicado entender certas coisas num código que não é nosso, mas tudo bem. ._.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 19:27

Ficou bugado, diminuiu as letras e o avatar novamente e o grupo foi para baixo do avatar.

Código:
<ul id="staff_widget">
</ul>
  <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script><style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 1px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 1px;
  }
  #staff_widget .span-avatar {
    margin-top: 1px;
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 70px;
    padding: 1px;
    width: 60px;
  }
</style>

Este está correto, só queria adicionar os botoes que citei a cima
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 10.07.17 19:29

Para mim está normal:
-> http://prntscr.com/ftzpw0

Nenhuma alteração que fiz no código passado acima foi feita.
Você por acaso removeu o código com minha última alteração? ._.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 10.07.17 19:59

Ramon Rodrigues escreveu:Ficou bugado, diminuiu as letras e o avatar novamente e o grupo foi para baixo do avatar.

Código:
<ul id="staff_widget">
</ul>
  <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script><style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 1px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 1px;
  }
  #staff_widget .span-avatar {
    margin-top: 1px;
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 70px;
    padding: 1px;
    width: 60px;
  }
</style>

Este está correto, só queria adicionar os botoes que citei a cima

Estava com este code, puis o seu dnv, dê uma olhada
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 12.07.17 11:40

UP.
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 13.07.17 0:16

UP.
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Harleen 13.07.17 0:52

Olá, qual é o problema apresentado? testei tanto o código do Daemon quanto o do Luiz e ambos são funcionais...

Se possível, mantenha algum online.
Harleen
Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 13.07.17 15:37

Ramon Rodrigues escreveu:
Ramon Rodrigues escreveu:Ficou bugado, diminuiu as letras e o avatar novamente e o grupo foi para baixo do avatar.

Código:
<ul id="staff_widget">
</ul>
  <script type="text/javascript">
  /*
    Código: Widget staff online
    Criado no dia: 18/07/2014
    Última atualização: 01/03/2017
    Feito por: Daemon
    Não distribuir, ou remover os créditos do autor
  */
  jQuery(document).on("ready", function() {
 
    var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget
 
    function staffOnline() {
 
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
 
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
          staffWidget.html("Carregando...");
        },
        success: function(data) {
          staffWidget.html("");
          var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
          jQuery.each(staff, function(group, color) {
            var staffColor = table.find("span[style*='" + color + "']");
            if (staffColor.length) {
              staffColor.each(function() {
                var elStaff = jQuery(this).parent().prop("outerHTML");
                staffWidget.append(
                  "<li class='online_staff clearfix'>" +
                  "  <span class='span-avatar'>" +
                  "    <img class='avatar-staff' alt='avatar-staff' />" +
                  "  </span>" +
                  "  <span class='span-name'>" + elStaff + "</span>" +
                  "  <p class='rank-staff'>" + group + "</span>" +
                  "</li>"
                );
              });
            }
          });
 
          if (!jQuery(".online_staff").length) {
            staffWidget.html("Não há staff online!");
          } else {
            jQuery(".online_staff").each(function() {
              var avatar = jQuery(this).find(".avatar-staff");
              var href = jQuery(this).find("a[href^='/u']").attr("href");
              jQuery.get(href, function(e) {
                var avatarSrc = jQuery(".mod-login-avatar img", e).attr("src");
                avatar.attr("src", avatarSrc);
                sessionStorage.setItem("online_staff", staffWidget.html());
              });
            });
          }
 
        }
      });
    }
 
    storedValue = sessionStorage.getItem("online_staff");
 
    (storedValue) ? staffWidget.html(storedValue) : staffOnline(); // Single line if stmt
 
    setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
  });
</script><style type="text/css">
  #staff_widget .online_staff {
    display: block;
    padding: 1px 0;
    zoom: 1;
  }
  #staff_widget .rank-staff {
    color: rgb(150, 150, 150);
    margin-top: 1px;
  }
  #staff_widget .span-avatar {
    margin-top: 1px;
    margin-right: 10px;
    float: left;
    padding: 2px;
  }
  #staff_widget .avatar-staff {
    -moz-border-radius: 0;
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 70px;
    padding: 1px;
    width: 60px;
  }
</style>

Este está correto, só queria adicionar os botoes que citei a cima

Estava com este code, puis o seu dnv, dê uma olhada

Estou usando este, está funcionando e está ativo no portal. Só gostaria de adicionar um botão ao lado de cada staff online para o envio de MP
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Daemon 15.07.17 2:51

Testa aqui:
Código:
<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Código: Widget staff online
 *  Criado no dia: 18/07/2014
 *  Última atualização: 01/03/2017
 *  Feito por: Daemon
 *  Não distribuir, ou remover os créditos do autor
 */
jQuery(document).on("ready", function() {
  var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget

  storedValue = sessionStorage.getItem("online_staff");
  (storedValue) ? staffWidget.html(storedValue) : staffOnline();

  setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
  }, 180000); // staffOnline function, reload every 3 minutes

  function staffOnline() {
      var staff = {
        "Programador(a)": "F40000",
        "Diretor(a)": "A408FF",
        "Administrador(a)": "00FB00",
        "Moderador(a)": "00FDFD"
      };
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
            staffWidget.html("Carregando...");
        },
        success: function(data) {
            staffWidget.html("");
            var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
            var staffColor;
            jQuery.each(staff, function(group, color) {
              staffColor = table.find("span[style*='" + color + "']");
              if (staffColor.length) {
                  var elStaff, href, avatarSrc;
                  staffColor.each(function() {
                    elStaff = jQuery(this).parent().prop("outerHTML");
                    href = jQuery(elStaff).attr("href");
                    jQuery.get(href, function(e) {
                        avatarSrc = jQuery(".mod-login-avatar img", e).attr("src"); // PunBB, PHPBB3, Invision, PHPBB2
                        staffWidget.append(
                        "<li class='online_staff clearfix'>" +
                        "  <span class='span-avatar'>" +
                        "    <img src='" + avatarSrc + "' class='avatar-staff' alt='avatar-staff' />" +
                        "  </span>" +
                        "  <span class='span-name'>" + elStaff + "</span>" +
                        "  <p class='rank-staff'>" + group + "</p>" +
                        "  <a href='/privmsg?mode=post&u=" + href + "'><img src='https://2img.net/s/t/18/09/33/i_icon_pm.png' title='Send PM'></a>" +
                        "</li>"
                        );
                        sessionStorage.setItem("online_staff", staffWidget.html());
                    });
                  });
              }
            });
        },
        error: function(jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
      });
  }
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .rank-staff {
  color: rgb(150, 150, 150);
  margin-top: 1px;
}
#staff_widget .span-avatar {
  margin-top: 1px;
  margin-right: 10px;
  float: left;
  padding: 2px;
}
#staff_widget .avatar-staff {
  -moz-border-radius: 0;
  -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 70px;
  padding: 1px;
  width: 60px;
}
</style>
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 16.07.17 1:36

Widget staff online LJhQDLX
se ficar ao lado do nick acompanhando o estilo fica show

E quando clico não redireciona diretamente para MP para o membro desejado '-'
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 16.07.17 1:57

Olá,

Eu posso tentar ajudá-lo, mas prefiro trabalhar com códigos meus.
Se o senhor preferir eu posso fazer um novo, do zero, com o link para a MP.

Fica ao critério do senhor como prosseguir.

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Daemon 16.07.17 16:05

Perdão, amigo... é que eu as vezes edito um código e nem testo... mania de achar que tá certo.
Código:
<ul id="staff_widget">
</ul><script type="text/javascript">
/*
 *  Código: Widget staff online
 *  Criado no dia: 18/07/2014
 *  Última atualização: 15/07/2017
 *  Feito por: Daemon
 *  Não distribuir, ou remover os créditos do autor
 */
jQuery(document).on("ready", function() {
  var staffWidget = jQuery("#staff_widget"); // Variável que captura o id do elemento staff_widget

  storedValue = sessionStorage.getItem("online_staff");
  (storedValue) ? staffWidget.html(storedValue) : staffOnline();

  setInterval(function() {
      sessionStorage.removeItem("online_staff");
      staffOnline();
  }, 180000); // staffOnline function, reload every 3 minutes

  function staffOnline() {
      var staff = {
        "Administrador": "001554",
        "Moderador": "008C09",
        "Ajudante": "D69A45"
      };
      jQuery.ajax({
        type: "GET",
        url: "/viewonline",
        beforeSend: function() {
            staffWidget.html("Carregando...");
        },
        success: function(data) {
            staffWidget.html("");
            var table = jQuery(".table, .table1, .ipbtable, .three-col .forumline", data); // PunBB, PHPBB3, Invision, PHPBB2
            var staffColor;
            jQuery.each(staff, function(group, color) {
              staffColor = table.find("span[style*='" + color + "']");
              if (staffColor.length) {
                  var elStaff, href, avatarSrc;
                  staffColor.each(function() {
                    elStaff = jQuery(this).parent().prop("outerHTML");
                    href = jQuery(elStaff).attr("href");
                    userId = href.split("/u")[1];
                    jQuery.get(href, function(e) {
                        avatarSrc = jQuery("#profile-advanced-right .module:eq(0) img:eq(0), .forumline td.row1.gensmall:first img:eq(0)", e).attr("src"); // PunBB, PHPBB3, Invision, PHPBB2
                        staffWidget.append(
                        "<li class='online_staff clearfix'>" +
                        "  <span class='span-avatar'>" +
                        "    <img src='" + avatarSrc + "' class='avatar-staff' alt='avatar-staff' />" +
                        "  </span>" +
                        "  <span class='span-name'>" + elStaff + "</span>" +
                        "  <span><a href='/privmsg?mode=post&u=" + userId + "'><img src='https://2img.net/s/t/18/09/33/i_icon_pm.png' title='Send PM'></a></span>" +
                        "  <p class='rank-staff'>" + group + "</p>" +
                        "</li>"
                        );
                        sessionStorage.setItem("online_staff", staffWidget.html());
                    });
                  });
              }
            });
        },
        error: function(jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
      });
  }
});
</script><style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .rank-staff {
  color: rgb(150, 150, 150);
  margin-top: 1px;
}
#staff_widget .span-avatar {
  margin-top: 1px;
  margin-right: 10px;
  float: left;
  padding: 2px;
}
#staff_widget .avatar-staff {
  -moz-border-radius: 0;
  -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 70px;
  padding: 1px;
  width: 60px;
}
</style>
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 16.07.17 22:09

Luiz escreveu:Olá,

Eu posso tentar ajudá-lo, mas prefiro trabalhar com códigos meus.
Se o senhor preferir eu posso fazer um novo, do zero, com o link para a MP.

Fica ao critério do senhor como prosseguir.

o/

Pode ser sim, o ultimo code respondido não deu nem pra testar.. Disse que não tem nenhum staff online
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 16.07.17 23:16

Aqui:
Código:
<div class="fa-staff-widget">
  <!-- ->
  /**
  *! Online Staff Widget.
  *
  *  @author Luiz
  *  @licence MIT
  *
  *  Copyright (c) Luiz Felipe | All rights reserved.
  */
  <!- -->
  <script type="text/javascript">
    /*globals jQuery*/
    (function (_, styles) {
      'use strict';

      var colors = [
        {
          name: 'Administrador',
          color: '#001554'
        },
        {
          name: 'Moderador',
          color: '#008C09'
        },
        {
          name: 'Ajudante',
          color: '#D69A45'
        }
      ];

      _(function () {

        var _zone = _('.fa-staff-widget .append-zone');

        _.get('/viewonline')
          .done(function (context) {
            _.each(colors, function (index, color) {

              var _table = _('table.table1', context);

              _table
                .find('tr td:first-child')
                  .each(function () {

                    var _this = _(this);
                    var style = _this.find('a > span').attr('style');
                    var regex = new RegExp (color.color, 'gi');

                    if (!regex.test(style)) {
                      return;
                    }

                    var user = _this
                      .find('a')
                        .attr('href')
                    ;

                    _.get(user)
                      .done(function (userContext) {

                        var avatarSrc = _('.mod-login-avatar img', context).attr('src');
                        var mpLink = _('<a>', {
                          'class': 'fa fa-envelope',
                          'href': '/privmsg?mode=post&u=' + user.replace(/^\/u/gi, '')
                        })
                          .prop('outerHTML')
                        ;
                       
                        _([
                          '<div>',
                          '  <div class="fsw-avatar-wrapper">',
                          '    ' + _('<img>', { 'src': avatarSrc }).prop('outerHTML'),
                          '  </div>',
                          '  <div class="fsw-user-info">',
                          '    ' + _('<div>', { 'html': mpLink + '<span>' +  _this.html() + '</span>', 'class': 'fsw-username' }).prop('outerHTML'),
                          '    ' + _('<div>', { 'html': color.name, 'class': 'fsw-user-group' }).prop('outerHTML'),
                          '  </div>',
                          '</div>'
                        ].join('\n'))
                          .appendTo(_zone)
                        ;

                        _zone
                          .find('.fsw-loading-text')
                            .remove()
                        ;

                      })
                      .fail(function () {
                        console.warn([
                          'Houve um erro ao tentar carregar a lista de membros. De tal forma, o widget de Staff Online está prejudicado.',
                          'Tente recarregar a página. Caso o problema continue, vá contate o suporte.'
                        ].join('\n'));

                        _zone.html('Houve um erro ao carregar. Tente novamente.');
                      })
                    ;

                  })
              ;
            });
          })
          .fail(function () {
            console.warn([
              'Houve um erro ao tentar carregar a lista de membros. De tal forma, o widget de Staff Online está prejudicado.',
              'Tente recarregar a página. Caso o problema continue, vá contate o suporte.'
            ].join('\n'));

            _zone.html('Houve um erro ao carregar. Tente novamente.');
          })
        ;

        _([
          '<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />',
          '<style type="text/css">', styles, '</style>'
        ].join('\n'))
          .appendTo('head')
        ;
      });
    }(jQuery, [
      '.fa-staff-widget > .append-zone > div {',
      '  display: block;',
      '  position: relative;',
      '  font-size: 1.075em;',
      '  padding-left: 50px;',
      '  min-height: 40px;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div .fsw-avatar-wrapper {',
      '  position: absolute;',
      '  width: 45px;',
      '  height: 45px;',
      '  left: 0;',
      '  top: 50%;',
      '  -webkit-transform: translateY(-50%);',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '  z-index: 1;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div .fsw-avatar-wrapper img {',
      '  width: 95%;',
      '  height: 95%;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div a.fa.fa-envelope {',
      '  color: #3072ab;',
      '  margin-right: 5px;',
      '}'
    ].join('\n')));
  </script>
  <div class="append-zone">
    <span class="fsw-loading-text">Carregando...</span>
  </div>
</div>

Ele atualiza sempre que a página é carregada para ajudar os usuários com conexões mais fracas. Feliz

Teste e comente resultados. Piscada
Frisa-se que as configurações ficam entre as linhas 17 e 30.

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Daemon 17.07.17 4:04

Ramon Rodrigues escreveu:
Luiz escreveu:Olá,

Eu posso tentar ajudá-lo, mas prefiro trabalhar com códigos meus.
Se o senhor preferir eu posso fazer um novo, do zero, com o link para a MP.

Fica ao critério do senhor como prosseguir.

o/

Pode ser sim, o ultimo code respondido não deu nem pra testar.. Disse que não tem nenhum staff online

Você tinha que alterar dentro do código as cores para os seus grupos de staff... por isso deu como ninguém online.
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Luiz 17.07.17 13:52

Eu simplesmente copiei as cores de um script acima. Nem me toquei que eram as cores erradas.
As cores do seu fórum já foram colocadas neste:
Código:
<div class="fa-staff-widget">
  <!-- ->
  /**
  *! Online Staff Widget.
  *
  *  @author Luiz
  *  @licence MIT
  *
  *  Copyright (c) Luiz Felipe | All rights reserved.
  */
  <!- -->
  <script type="text/javascript">
    /*globals jQuery*/
    (function (_, styles) {
      'use strict';
 
      var colors = [
        {
          name: 'Programador(a)',
          color: '#F40000'
        },
        {
          name: 'Diretor(a)',
          color: '#A408FF'
        },
        {
          name: 'Administrador(a)',
          color: '#00FB00'
        },
        {
          name: 'Moderador(a)',
          color: '#00FDFD'
        }
      ];
 
      _(function () {
 
        var _zone = _('.fa-staff-widget .append-zone');
 
        _.get('/viewonline')
          .done(function (context) {
            _.each(colors, function (index, color) {
 
              var _table = _('table.table1', context);
 
              _table
                .find('tr td:first-child')
                  .each(function () {
 
                    var _this = _(this);
                    var style = _this.find('a > span').attr('style');
                    var regex = new RegExp (color.color, 'gi');
 
                    if (!regex.test(style)) {
                      return;
                    }
 
                    var user = _this
                      .find('a')
                        .attr('href')
                    ;
 
                    _.get(user)
                      .done(function (userContext) {
 
                        var avatarSrc = _('.mod-login-avatar img', context).attr('src');
                        var mpLink = _('<a>', {
                          'class': 'fa fa-envelope',
                          'href': '/privmsg?mode=post&u=' + user.replace(/^\/u/gi, '')
                        })
                          .prop('outerHTML')
                        ;
                       
                        _([
                          '<div>',
                          '  <div class="fsw-avatar-wrapper">',
                          '    ' + _('<img>', { 'src': avatarSrc }).prop('outerHTML'),
                          '  </div>',
                          '  <div class="fsw-user-info">',
                          '    ' + _('<div>', { 'html': mpLink + '<span>' +  _this.html() + '</span>', 'class': 'fsw-username' }).prop('outerHTML'),
                          '    ' + _('<div>', { 'html': color.name, 'class': 'fsw-user-group' }).prop('outerHTML'),
                          '  </div>',
                          '</div>'
                        ].join('\n'))
                          .appendTo(_zone)
                        ;
 
                        _zone
                          .find('.fsw-loading-text')
                            .remove()
                        ;
 
                      })
                      .fail(function () {
                        console.warn([
                          'Houve um erro ao tentar carregar a lista de membros. De tal forma, o widget de Staff Online está prejudicado.',
                          'Tente recarregar a página. Caso o problema continue, vá contate o suporte.'
                        ].join('\n'));
 
                        _zone.html('Houve um erro ao carregar. Tente novamente.');
                      })
                    ;
 
                  })
              ;
            });
          })
          .fail(function () {
            console.warn([
              'Houve um erro ao tentar carregar a lista de membros. De tal forma, o widget de Staff Online está prejudicado.',
              'Tente recarregar a página. Caso o problema continue, vá contate o suporte.'
            ].join('\n'));
 
            _zone.html('Houve um erro ao carregar. Tente novamente.');
          })
        ;
 
        _([
          '<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />',
          '<style type="text/css">', styles, '</style>'
        ].join('\n'))
          .appendTo('head')
        ;
      });
    }(jQuery, [
      '.fa-staff-widget > .append-zone > div {',
      '  display: block;',
      '  position: relative;',
      '  font-size: 1.075em;',
      '  padding-left: 50px;',
      '  min-height: 40px;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div .fsw-avatar-wrapper {',
      '  position: absolute;',
      '  width: 45px;',
      '  height: 45px;',
      '  left: 0;',
      '  top: 50%;',
      '  -webkit-transform: translateY(-50%);',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '  z-index: 1;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div .fsw-avatar-wrapper img {',
      '  width: 95%;',
      '  height: 95%;',
      '}',
      '',
      '.fa-staff-widget > .append-zone > div a.fa.fa-envelope {',
      '  color: #3072ab;',
      '  margin-right: 5px;',
      '}'
    ].join('\n')));
  </script>
  <div class="append-zone">
    <span class="fsw-loading-text">Carregando...</span>
  </div>
</div>

o/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 20.07.17 0:32

Widget staff online ClCeh6I

Resultado foi este. Alem do erro do avatar, gostaria de que o botão ficasse depois do nick, em uma posição centralizada(nem alinhado com o nick, nem com o cargo)
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Daemon 21.07.17 23:51

Tente agora:
Código:
<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.218072017
 *  Copyright (c) 2017 Daemon <ajuda.forumeiros.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {
 
    function staffOnline() {
 
        var staff = [
            {group: "Programador(a)", color: "F40000"},
            {group: "Diretor(a)", color: "#A408FF"},
            {group: "Administrador(a)", color: "00FB00"},
            {group: "Moderador(a)", color: "00FDFD"}
        ];
 
        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);
 
        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");
 
                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;
 
                            var xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);
 
                            xhr2.onload = function() {
                                if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.querySelector("img[alt='avatar']").src;
                                    elLi =
                                    "<li class='online_staff clearfix'>" +
                                    "  <div class='div-icon-staff'>" +
                                    "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                                    "  </div>" +
                                    "  <div class='div-main-staff'>" +
                                    "    <div class='staff-mp'><a href='/privmsg?mode=post&u=" + stafferId + "'><img src='https://2img.net/s/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };
 
                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };
 
                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };
 
        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };
 
        xhr1.send();
    }
 
    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 22.07.17 4:24

Widget staff online ALgMnbu

Estou achando o avatar muito achatado, e que o botão de MP poderia ser mais para baixo, entre o cargo e o nick como disse a cima.
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Daemon 22.07.17 10:42

Veja:
Código:
<ul id="staff_widget"></ul>
<script type="text/javascript">
/*
 *  Application: Staff Online Widget
 *  Date: 01/03/2017
 *  Version: 1.218072017
 *  Copyright (c) 2017 Daemon <ajuda.forumeiros.com>
 *  This work is free. You can redistribute it and/or modify it
 */
document.addEventListener("DOMContentLoaded", function(event) {
 
    function staffOnline() {
 
        var staff = [
            {group: "Programador(a)", color: "F40000"},
            {group: "Diretor(a)", color: "#A408FF"},
            {group: "Administrador(a)", color: "00FB00"},
            {group: "Moderador(a)", color: "00FDFD"}
        ];
 
        var xhr1 = new XMLHttpRequest();
        xhr1.open("GET", "/viewonline", true);
 
        xhr1.onload = function() {
            if (xhr1.status >= 200 && xhr1.status < 400) {
                staffWidget.innerHTML = "";
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = xhr1.responseText;
                var table = tempDiv.querySelector(".table, .table1, .ipbtable, .three-col .forumline");
                var staffColor;
                // List each item in the array
                staff.forEach(function(item, i) {
                    staffColor = table.querySelectorAll("span[style*='" + item.color + "']");
 
                    // Check span elements that contain array colors
                    if (typeof(staffColor) != "undefined" && staffColor != null) {
                        var stafferHref, tempDiv2, stafferName, stafferId, avatarSrc, elLi;
                        // For each existing color
                        Array.prototype.forEach.call(staffColor, function(el, i) {
                            stafferHref = el.parentNode.href;
 
                            var xhr2 = new XMLHttpRequest();
                            xhr2.open("GET", stafferHref, true);
 
                            xhr2.onload = function() {
                                if (xhr2.status >= 200 && xhr2.status < 400) {
                                    tempDiv2 = document.createElement("div");
                                    tempDiv2.innerHTML = xhr2.responseText;
                                    stafferName = el.parentNode.outerHTML;
                                    stafferId = el.parentNode.href.split("/u")[1];
                                    avatarSrc = tempDiv2.querySelector("img[alt='avatar']").src;
                                    elLi =
                                    "<li class='online_staff clearfix'>" +
                                    "  <div class='div-icon-staff'>" +
                                    "    <div class='staff-avatar'><img src='" + avatarSrc + "' alt='avatar'></div>" +
                                    "  </div>" +
                                    "  <div class='div-main-staff'>" +
                                    "    <div class='staff-mp'><a href='/privmsg?mode=post&u=" + stafferId + "'><img src='https://2img.net/s/t/18/09/33/i_icon_pm.png' title='Send PM'></a></div>" +
                                    "    <div class='staff-name'>" + stafferName + "</div>" +
                                    "    <p class='staff-rank'>" + item.group + "</p>" +
                                    "  </div>" +
                                    "</li>";
                                    staffWidget.innerHTML += elLi;
                                    sessionStorage.setItem("online_staff", staffWidget.innerHTML);
                                }  else {
                                    // We reached our target server, but it returned an error
                                }
                            };
 
                            xhr2.onerror = function() {
                                // There was a connection error of some sort
                                console.log("** An error occurred during the transaction");
                            };
 
                            xhr2.send();
                        });
                    }
                });
            } else {
                // We reached our target server, but it returned an error
            }
        };
 
        xhr1.onerror = function() {
            // There was a connection error of some sort
            console.log("** An error occurred during the transaction");
        };
 
        xhr1.send();
    }
 
    var staffWidget = document.getElementById("staff_widget");
    storedValue = sessionStorage.getItem("online_staff");
    (storedValue) ? staffWidget.innerHTML = storedValue : staffOnline();
 
    setInterval(function() {
        sessionStorage.removeItem("online_staff");
        staffOnline();
    }, 180000); // staffOnline function, reload every 3 minutes
});
</script>
<style type="text/css">
#staff_widget:empty:before {
    content: "Não há staff online!";
}
#staff_widget .online_staff {
  display: block;
  font-size: 14px;
  padding: 1px 0;
  zoom: 1;
}
#staff_widget .div-icon-staff {
  width: 25px;
  min-width: 25px;
  padding-top: 12px;
}
#staff_widget .div-icon-staff, #staff_widget .div-main-staff {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}
#staff_widget .staff-avatar {
  background: #fff;
  vertical-align: middle;
  display: inline-block;
  line-height: 1px;
  position: relative;
  margin: 2px;
}
#staff_widget .staff-avatar img {
  width: 40px;
  height: 62px;
  border: 1px solid #ddd;
}
#staff_widget .staff-mp {
  display: inline-block;
  float: right;
  margin-top: 8.3px;
  margin-right: -25px;
}
#staff_widget .staff-rank {
  color: rgb(150, 150, 150);
  margin-top: 5px;
}
</style>
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues 23.07.17 0:09

Issoi mesmo, pode fechar, obrigado a todos
Ramon Rodrigues
Ramon Rodrigues
**

Membro desde : 04/09/2015
Mensagens : 69
Pontos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget staff online

Mensagem por Harleen 23.07.17 3:33

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Harleen
Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos