[Projeto] Botão para ocultar e mostrar Widgets

4 participantes

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

[Projeto] Botão para ocultar e mostrar Widgets Empty [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Daemon 02.05.15 2:11

Olá amigos, tudo bem?

Este é um código que estive desenvolvendo, cujo efeito já é existente de um outro código que foi desenvolvido por outra pessoa, porém o código já existente não é lá tão "agradável"...
Gostaria da opinião de vocês, se acham que assim já está bom, ou se algo deve ser alterado.

[Projeto] Botão para ocultar e mostrar Widgets 2we58nf

Código:
var jDoc = jQuery(document);
jDoc.ready(function() {
jQuery('head').append(
'<style>' +
'#outer-wrapper {' +
'  position: relative;' +
'}' +
'.sidebar_col {' +
'  padding: 3px 7px;' +
'  background-color: rgba(0, 0, 0, 0.7);' +
'  color: white;' +
'  -webkit-border-radius: 4px;' +
'  -moz-border-radius: 4px;' +
'  border-radius: 4px;' +
'  position: absolute;' +
'  top: -10px;' +
'  -webkit-transition: all 0.4s ease-in-out;' +
'  -moz-transition: all 0.4s ease-in-out;' +
'  cursor: pointer;' +
'}' +
'#right + .sidebar_col {' +
'  right: -13px;' +
'}' +
'#left + .sidebar_col {' +
'  left: -13px;' +
'}' +
'.sidebar_hide {' +
'  opacity: 0;' +
'}' +
'#right:hover + .sidebar_hide, #left:hover + .sidebar_hide, .sidebar_show {' +
'  opacity: 0.5;' +
'}' +
'.sidebar_hide:hover, .sidebar_show:hover {' +
'  opacity: 1;' +
'}' +
'.sidebar_hide:after {' +
'  content: "x";' +
'}' +
'#right + .sidebar_show:after {' +
'  content: "«";' +
'}' +
'#left + .sidebar_show:after {' +
'  content: "»";' +
'}' +
'</style>'
);

var jSidebar = jQuery('#right, #left');

jSidebar.after(
'<span class="sidebar_hide sidebar_col"></span>'
);

jQuery('.sidebar_col').each(function() {  
     var jThis = jQuery(this);
     jThis.attr('id','col_' + jThis.prev().attr('id'));
});

var jContent = jQuery('#content');
var jRight = jQuery('#col_right');
var jLeft = jQuery('#col_left');

if(jQuery.cookie('sidebarRight') == 'fechado') {
   jRight.addClass('sidebar_show').removeClass('sidebar_hide').prev().hide();
   jContent.css('width','100%');
}
if(jQuery.cookie('sidebarLeft') == 'fechado') {
   jLeft.addClass('sidebar_show').removeClass('sidebar_hide').prev().hide();
}

jDoc.on('click','.sidebar_hide', function() {
        if(jQuery(this).attr('id') == 'col_right') {
           jRight.removeClass('sidebar_hide').addClass('sidebar_show').prev().fadeOut('500');
           jContent.delay('500').animate({width: '100%'}, '400');
           jQuery.cookie('sidebarRight', 'fechado', { expires: 365 });
        } else {
           jLeft.removeClass('sidebar_hide').addClass('sidebar_show').prev().fadeOut('500');
           jQuery.cookie('sidebarLeft', 'fechado', { expires: 365 });
        }
});

jDoc.on('click','.sidebar_show', function() {
        if(jQuery(this).attr('id') == 'col_right') {
           jRight.removeClass('sidebar_show').addClass('sidebar_hide').prev().delay('400').fadeIn('500');
           jContent.animate({width: jContent.width() - jRight.prev().width()-10}, '400');
           jQuery.cookie('sidebarRight', 'aberto', { expires: 365 });
        } else {
           jLeft.removeClass('sidebar_show').addClass('sidebar_hide').prev().delay('400').fadeIn('500');
           jQuery.cookie('sidebarLeft", 'aberto', { expires: 365 });
        }
});
});

Testem em seus fóruns aplicando o investimento em todas as páginas.


Até mais! Piscada


Última edição por Daemon em 14.07.15 19:18, editado 4 vez(es)
Daemon

Daemon
Super Membro

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

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Shek 10.05.15 19:48

@Daemon, tem como colocar essa na estrutura pra divulgarmos-ei? Eu esqueci dele lá... Triste
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Daemon 14.07.15 19:15

O tutorial já está pronto para ser postado! Rosa
Daemon

Daemon
Super Membro

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

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Holkis 15.07.15 2:24

Código dando conflito, testei e não funcionou.
Holkis

Holkis
Hiper Membro

Membro desde : 21/04/2015
Mensagens : 3550
Pontos : 4277

http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Ir para o topo Ir para baixo

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Daemon 15.07.15 3:41

Holkis escreveu:Código dando conflito, testei e não funcionou.
Poderia me enviar uma screenshot do console do navegador enquanto o código está ativo?
Daemon

Daemon
Super Membro

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

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Holkis 16.07.15 15:31

Olá,

Veja:
[Projeto] Botão para ocultar e mostrar Widgets EDwBxuZ
Agora:
[Projeto] Botão para ocultar e mostrar Widgets 4EDX3I8
Não está funcionando.

Atenciosamente.
Holkis

Holkis
Hiper Membro

Membro desde : 21/04/2015
Mensagens : 3550
Pontos : 4277

http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Ir para o topo Ir para baixo

Membro Entusiasta

[Projeto] Botão para ocultar e mostrar Widgets Empty Re: [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por RafaelS. 16.07.15 15:36

Holkis escreveu:Olá,

Veja:
[Projeto] Botão para ocultar e mostrar Widgets EDwBxuZ
Agora:
[Projeto] Botão para ocultar e mostrar Widgets 4EDX3I8
Não está funcionando.

Atenciosamente.

Quem tiver problemas semelhantes favor se dirigir a área de suporte.

Atenciosamente.
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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