Você não está conectado. Conecte-se ou registre-se

Mudar posicionamento da Inbox List

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Mudar posicionamento da Inbox List em Qua Ago 26, 2015 7:46 pm

Je4n

avatar
Membro ativo

  • Descrição:
Eu utilizo o script de Inbox List desenvolvido pelo @Daemon, porém o posicionamento da box fica muito para a esquerda e eu percebi que um número é gerado para se posicionar de acordo com a visualização.


Eu gostaria que isso fosse modificado (Se for possível), para que abra no local correto que seria mais ou menos dessa forma

(A seta da box na posição certa do ícone de mensagens privadas)

O Script que utilizo:
Código:

/***
* Código: Inbox List Elegante
* Data de criação: 08/09/2014
* Atualização: 16/08/2015
* Autor: Daemon
* Versão: 1.3
* Inspirado: IPS4 - IPB
* Acesse: http://bestskins.net
***/
$(document).ready(function() {
 
// Defina aqui abaixo a quantidade de mensagens que irão ser exibidas
var jQtd = 5;


// Adicionando elemento ao corpo do fórum
$('body').append('<div id="bs_full_inbox"></div>');
var jInner = '<div class="bs_pop_over_conteudo"><div class="bs_inbox_header">' +
            '  <a href="/privmsg?mode=post" class="compose" target="_self">Nova Mensagem</a>' +
            '  <h4 class="bs_inbox_sectionHead">Caixa de entrada</h4>' +
            '</div>' +
            '<ol class="bs_inbox_inner">' +
            '  <img src="http://i.imgur.com/DYwSiJf.gif" style="margin: 5px auto;display: block;" />' +
            '</ol>' +
            '<div class="bs_inbox_footer">' +
            '  <a href="./privmsg?folder=inbox">Ir Para Mensagens</a>' +
            '</div></div>';
var jInbox = $('#bs_full_inbox');
jInbox.append(jInner);

$('a.msg_pv[href="/privmsg?folder=inbox"]').click(function(d) {
  d.preventDefault();

  // Verificando se o elemento é visível
  if(jInbox.css('display') != 'none') {
     jInbox.fadeOut('450');
  } else {
     jInbox.css({
           'left': $(this).offset().left,
           'top': $(this).offset().top + $(this).outerHeight()
     }).show();
     
     // Carregar conteúdo
     if(!$('.bs_inbox_photo').length) {
        $('.bs_inbox_inner').load('/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(' + jQtd + ')', function() {
            $(this).html(
              $(this).html()
              .replace(/\<\/td\>/g, '</span></div></li>')
              .replace(/\<td class="tcl tdtopics"\>/g, '<li class="bs_inbox_li clearfix"><div class="bs_user_p left"><img class="bs_inbox_photo" alt="photo" src="http://i.imgur.com/n4qY3fc.png" /></div><div class="bs_inbox_item">')
            ).find('span.status').remove();
            $(this).find('a').each(function() {
                var jHref = $(this).attr('href');
                jHref = jHref.split(/(&change|\?change)/g)[0]; 
                $(this).attr('href', jHref);
            });
            $('.bs_inbox_li').each(function() {
              var jUser = $(this).find('a[href^="/u"]').attr('href');
              var jImg = $(this).find('.bs_inbox_photo');
              var jUserImage = sessionStorage.getItem(jUser);
              if(jUserImage) {
                 jImg.attr('src', jUserImage);
              } else {
                 $.get(jUser + '?change_version=punbb', function(data) {
                   var jFindImage = $('#profile-advanced-right .main-content img:first', data).attr('src');
                   jImg.attr('src', jFindImage);
                   sessionStorage.setItem(jUser, jFindImage);
                });
              }
            });
        });
    }
  }
});
});

Obs: Não quero adicionar um left na id bs_full_inbox, não é isso que eu quero.

Conta de teste:
User: Demo2
Senha: demo123

Grato a quem puder me ajudar! Smile
  • Informações:
Fórum:www.wasdev.inVersão:PUNBB



{WASD}
Ver perfil do usuário

2 Re: Mudar posicionamento da Inbox List em Qua Ago 26, 2015 8:50 pm

Diapt

avatar
Membro ativo

O código que você passou de cima do CSS, era ser alterado por este:
Código:
element.style {
    left: 799px;
    top: 51px;
    display: block;
}

O resultado fica assim:


Diapt

Ver perfil do usuário

3 Re: Mudar posicionamento da Inbox List em Qua Ago 26, 2015 9:22 pm

Je4n

avatar
Membro ativo

Diapt escreveu:O código que você passou de cima do CSS, era ser alterado por este:
Código:
element.style {
    left: 799px;
    top: 51px;
    display: block;
}

O resultado fica assim:


Diapt

Na verdade não é isso, mas obrigado por tentar ajudar. Smile



{WASD}
Ver perfil do usuário

4 Re: Mudar posicionamento da Inbox List em Qui Ago 27, 2015 11:23 am

Cepheus

avatar
Admin

No Código acima procure essa linha:
Código:
$('body').append('<div id="bs_full_inbox"></div>');

troque por:
Código:
$('.pun').append('<div id="bs_full_inbox"></div>');

Depois adicione na sua folha de estilo css:

Código:
#bs_full_inbox {left: 55.8%!important;}





  • Gostou?
     não esqueça de
  • Reputar!



    Ver perfil do usuário

    5 Re: Mudar posicionamento da Inbox List em Qui Ago 27, 2015 12:15 pm

    Je4n

    avatar
    Membro ativo

    Cepheus escreveu:No Código acima procure essa linha:
    Código:
    $('body').append('<div id="bs_full_inbox"></div>');

    troque por:
    Código:
    $('.pun').append('<div id="bs_full_inbox"></div>');

    Depois adicione na sua folha de estilo css:

    Código:
    #bs_full_inbox {left: 55.8%!important;}

    Não há mesmo como alterar aquela função que gera o left no style da #bs_full_inbox ? Por que adicionando o left na id, em diferentes visualizações vai se mover e ficar desalinhado mesmo utilizando porcentagem. :s



    {WASD}
    Ver perfil do usuário

    6 Re: Mudar posicionamento da Inbox List em Qui Ago 27, 2015 5:38 pm

    Cepheus

    avatar
    Admin

    Mantenha só o css, mas troque seu JS por esse:
    Eu testei em 3 resoluções e pra mim ficou alinhado.

    Só trocar o JS por esse:
    Código:

    /***
    * Código: Inbox List Elegante
    * Data de criação: 08/09/2014
    * Atualização: 16/08/2015
    * Autor: Daemon
    * Versão: 1.3
    * Inspirado: IPS4 - IPB
    * Acesse: http://bestskins.net
    ***/
    $(document).ready(function() {
     
    // Defina aqui abaixo a quantidade de mensagens que irão ser exibidas
    var jQtd = 5;


    // Adicionando elemento ao corpo do fórum
    $('nav#usuario ul li:nth-child(3)').append('<ul><li><div id="bs_full_inbox"></div></li></ul>');
    var jInner = '<div class="bs_pop_over_conteudo"><div class="bs_inbox_header">' +
                '  <a href="/privmsg?mode=post" class="compose" target="_self">Nova Mensagem</a>' +
                '  <h4 class="bs_inbox_sectionHead">Caixa de entrada</h4>' +
                '</div>' +
                '<ol class="bs_inbox_inner">' +
                '  <img src="http://i.imgur.com/DYwSiJf.gif" style="margin: 5px auto;display: block;" />' +
                '</ol>' +
                '<div class="bs_inbox_footer">' +
                '  <a href="./privmsg?folder=inbox">Ir Para Mensagens</a>' +
                '</div></div>';
    var jInbox = $('#bs_full_inbox');
    jInbox.append(jInner);

    $('a.msg_pv[href="/privmsg?folder=inbox"]').click(function(d) {
      d.preventDefault();

      // Verificando se o elemento é visível
      if(jInbox.css('display') != 'none') {
         jInbox.fadeOut('450');
      } else {
         jInbox.css({
               'left': $(this).offset().left,
               'top': $(this).offset().top + $(this).outerHeight()
         }).show();
         
         // Carregar conteúdo
         if(!$('.bs_inbox_photo').length) {
            $('.bs_inbox_inner').load('/privmsg?folder=inbox&change_version=punbb .tdtopics:lt(' + jQtd + ')', function() {
                $(this).html(
                  $(this).html()
                  .replace(/\<\/td\>/g, '</span></div></li>')
                  .replace(/\<td class="tcl tdtopics"\>/g, '<li class="bs_inbox_li clearfix"><div class="bs_user_p left"><img class="bs_inbox_photo" alt="photo" src="http://i.imgur.com/n4qY3fc.png" /></div><div class="bs_inbox_item">')
                ).find('span.status').remove();
                $(this).find('a').each(function() {
                    var jHref = $(this).attr('href');
                    jHref = jHref.split(/(&change|\?change)/g)[0]; 
                    $(this).attr('href', jHref);
                });
                $('.bs_inbox_li').each(function() {
                  var jUser = $(this).find('a[href^="/u"]').attr('href');
                  var jImg = $(this).find('.bs_inbox_photo');
                  var jUserImage = sessionStorage.getItem(jUser);
                  if(jUserImage) {
                     jImg.attr('src', jUserImage);
                  } else {
                     $.get(jUser + '?change_version=punbb', function(data) {
                       var jFindImage = $('#profile-advanced-right .main-content img:first', data).attr('src');
                       jImg.attr('src', jFindImage);
                       sessionStorage.setItem(jUser, jFindImage);
                    });
                  }
                });
            });
        }
      }
    });
    });





  • Gostou?
     não esqueça de
  • Reputar!



    Ver perfil do usuário

    7 Re: Mudar posicionamento da Inbox List em Qui Ago 27, 2015 6:04 pm

    Je4n

    avatar
    Membro ativo

    Funcionou. Muito obrigado @Cepheus !



    {WASD}
    Ver perfil do usuário

    8 Re: Mudar posicionamento da Inbox List em Qui Ago 27, 2015 8:30 pm

    MzS

    avatar
    Membro ativo

    [alerta="Mensagem automática"][/alerta]



    Este tópico foi movido de "JavaScript & jQuery" para "Arquivos".





    Olá
    Leia as regras.
    Leia os termos de uso
    Ver perfil do usuário

    Conteúdo patrocinado


    Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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