[Projeto] Botão para ocultar e mostrar Widgets

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

Em curso [Projeto] Botão para ocultar e mostrar Widgets

Mensagem por Daemon em 01/05/15, 10:11 pm

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.



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, 03:18 pm, editado 4 vez(es)
avatar

Daemon
Membro do Fórum

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

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

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

Mensagem por Shek em 10/05/15, 03:48 pm

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


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.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek — Ajudeiro
avatar

Shek
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17452
Pontos Ativos : 21692

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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

Mensagem por Daemon em 14/07/15, 03:15 pm

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

Daemon
Membro do Fórum

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

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

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

Mensagem por Holkis em 14/07/15, 10:24 pm

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

Holkis
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3509
Pontos Ativos : 4208

Ver perfil do usuário http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

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

Mensagem por Daemon em 14/07/15, 11:41 pm

@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?
avatar

Daemon
Membro do Fórum

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

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

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

Mensagem por Holkis em 16/07/15, 11:31 am

Olá,

Veja:

Agora:

Não está funcionando.

Atenciosamente.
avatar

Holkis
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3509
Pontos Ativos : 4208

Ver perfil do usuário http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

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

Mensagem por RafaelS. em 16/07/15, 11:36 am

@Holkis escreveu:Olá,

Veja:

Agora:

Não está funcionando.

Atenciosamente.

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

Atenciosamente.
avatar

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3189
Pontos Ativos : 4136

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

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


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