[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 : 1688

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


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17159
Pontos Ativos : 21417

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

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 : 1688

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
Hiperativo

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3498
Pontos Ativos : 4197

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 : 1688

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
Hiperativo

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3498
Pontos Ativos : 4197

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 Rafael 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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.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