Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Kyo Panda
 
Luiz
 
iScroll
 
Shek
 
William_iHarDz
 
virus
 
IsmaelS.
 
Fou-Lu
 
[SRD]JimClark
 
soldado
 

Quem está conectado
264 usuários online :: 10 usuários cadastrados, 2 Invisíveis e 252 Visitantes :: 2 Motores de busca

Bruno Franks, Gustavor, Hancki, Ketholy123, LeoziN_WallkeR, Lost154, Luiz, Shek, Taxy_InSaniTy, virus

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Widget staff online

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Widget staff online

Mensagem por Ramon Rodrigues em 09/07/17, 09:58 pm

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: http://i.imgur.com/CY1296x.png?1
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Harleen em 10/07/17, 12:47 pm

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

Até mais
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 01:14 pm

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

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 01:18 pm

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 02:24 pm

O avatar esta funcionando, mas ainda acho pequeno.
http://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>
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 02:42 pm

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. ᕕ(ᐛ)ᕗ
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 02:44 pm

http://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
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 02:46 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 02:56 pm

http://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>
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 03:01 pm

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 03:13 pm

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

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 03:18 pm

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. ._.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 03:27 pm

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
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 10/07/17, 03:29 pm

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? ._.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 10/07/17, 03:59 pm

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
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 12/07/17, 07:40 am

UP.
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 12/07/17, 08:16 pm

UP.
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Harleen em 12/07/17, 08:52 pm

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.
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 13/07/17, 11:37 am

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
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Daemon em 14/07/17, 10:51 pm

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://hitsk.in/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>
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1686

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 15/07/17, 09:36 pm


se ficar ao lado do nick acompanhando o estilo fica show

E quando clico não redireciona diretamente para MP para o membro desejado '-'
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 15/07/17, 09:57 pm

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Daemon em 16/07/17, 12:05 pm

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://hitsk.in/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>
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1686

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 16/07/17, 06:09 pm

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
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Luiz em 16/07/17, 07:16 pm

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/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Daemon em 17/07/17, 12:04 am

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.
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1686

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Luiz em 17/07/17, 09:52 am

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4112
Pontos Ativos : 4736

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 19/07/17, 08:32 pm



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)
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Daemon em 21/07/17, 07:51 pm

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://hitsk.in/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>
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1686

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 22/07/17, 12:24 am



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.
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Daemon em 22/07/17, 06:42 am

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://hitsk.in/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>
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1686

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Widget staff online

Mensagem por Ramon Rodrigues em 22/07/17, 08:09 pm

Issoi mesmo, pode fechar, obrigado a todos
avatar

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos Ativos : 91

Ver perfil do usuário http://www.bmwserver.com

Resolvido Re: Widget staff online

Mensagem por Harleen em 22/07/17, 11:33 pm

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

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum