Últimos temas
» {Listado} Variables de los Templates
Dom Dic 18, 2016 4:22 pm por Code This

» Tablón flotante 2
Lun Ago 08, 2016 10:36 pm por Code This

» Perfil Schizophrenia
Mar Jul 26, 2016 6:29 pm por Code This

» Tablón Flotante
Vie Ene 22, 2016 12:37 pm por Code This

» Tablón Anuncios
Vie Ene 22, 2016 11:53 am por Code This

» Perfil Horizontal
Dom Ene 17, 2016 1:34 pm por Harley V.

» Estadísticas personalizadas
Jue Ene 14, 2016 1:26 pm por Harley V.

» Anarchy — Oscura
Jue Ene 14, 2016 12:15 pm por Scathach Faoi

» Anarchy — Claro
Jue Ene 14, 2016 12:14 pm por Scathach Faoi

» Wanna bite you with love
Jue Ene 14, 2016 12:14 pm por Scathach Faoi

Conectarse

Recuperar mi contraseña


Tablón flotante 2

Ver el tema anterior Ver el tema siguiente Ir abajo

Tablón flotante 2

Mensaje por Code This el Lun Ago 08, 2016 10:36 pm



CSS
Código:
/* ------------------------- T A B L O N  D E  A N U N C I O S  Widget--------------------- */
.wid {
  margin-top: 70px;
  margin-left: 10px;
  width: 140px;
  height: 180px;
  padding: 20px;
  background: #fff;
  margin-bottom: -10px;
  overflow: hidden;
}

#wid-u {
  display: block;
  background: #3A442D;
  line-height: 10px;
  padding: 10px;
  width: 160px;
  margin-top: -20px;
  margin-left: -20px;
  margin-bottom: 20px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #fff;
  font-family: 'verdana';
  text-transform: uppercase;
}

#wid-u strong {color: #fff; font-weight: lighter;}

#wid-ava img {
  width: 115px;
  height: 150px;
  margin-top: -7px;
  margin-left: 2px;
}

.bot1, .bot2, .bot3, .bot4, .bot5 {
    border: 1px dotted #ccc;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    cursor: pointer;
    line-height: 20px;
    display:inline-block;
    transition: all .7s cubic-bezier(1,-0.75,0.5,1.2);
    width: 80px;}

.botn4 {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    margin-left: -39px;
    position: absolute;
    text-align: center;
    top: -25px;
    width: 30px;
}
.bot-close {
    background-color: #000;
    font-family: calibri;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
}

#caja1, #caja2, #caja3, #caja5 {
  position: fixed;
  top: 20%;
  left: 30%;
  width: 500px;
  height: 350px;
  padding: 10px;
  display: none;
  background: #0d0d0d;
  border: 10px solid #3A442D;
}

#caja4 {
  position: fixed;
  top: 20%;
  left: 20%;
  width: 800px;
  height: 350px;
  padding: 10px;
  display: none;
  background: #0d0d0d;
  border: 10px solid #3A442D;
}

#cont-img {
  width: 208px;
  height: 310px;
  padding: 20px;
}

#img-texto {
  width: 188px;
  height: 150px;
  padding: 10px;
  background: #FFF;
  margin-top: 140px;
  font-size: 10px;
  line-height: 11px;
  text-align: justify;
  overflow: auto;
}

#cont-link {
  width: 248px;
  height: 198px;
}

#cont-link a {
  display: block;
  background: #CFC071;
  line-height: 10px;
  padding: 5px;
  margin-bottom: 2px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #fff;
  font-family: 'verdana';
  text-transform: uppercase;
  text-aling: center;
}

#tit-img {
  width: 228px;
  height: 132px;
  padding: 10px;
}

#tit-tex, #tit-jef {
  display: block;
  background: #fff;
  line-height: 10px;
  padding: 5px;
  margin-top: 60px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #000;
  font-family: 'verdana';
  text-transform: uppercase;
  text-aling: center;
}

#img-r1, #img-r2, #img-r3, #img-r4, #img-r {
  width: 188px;
  height: 35px;
  padding: 20px 10px;
  background: #fff;
  margin-bottom: 3px;
  font-size: 20px;
  line-height: 25px;
  font-family: 'Abril Fatface';
  text-align: center; 
}

#img-r1 p, #img-r2 p, #img-r3 p, #img-r4 p, #img-r p {
  display: block;
  line-height: 10px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #000;
  font-family: 'verdana';
  text-transform: uppercase;
  text-aling: center;
}

#img-r1 {color: #940c12;}
#img-r3 {color: #964B12;}
#img-r2 {color: #D4087C;}
#img-r4 {color: #f4a611;}

#cont-jefes {
  width: 248px;
  height: 350px;
}

#jefes {
  width: 100px;
  height: 152px;
  padding: 10px;
  display: inline-block;
  margin-bottom: 5px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

#tit-jef strong {display: block; letter-spacing: 0px;}
#tit-jef {width: 100px; margin-top: 0px; padding: 0px; height: 0px; overflow: hidden; position: absolute; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}
#jefes:hover #tit-jef {width: 90px; margin-top: 0px; padding: 5px; height: auto; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}

JAVA
En todas las páginas
Código:
$(document).ready(function () {
$('#wid-pes').appendTo('#wid-tab');
});

$(document).ready(function(){

$('.bot1').click(function(){
$('#caja1').slideToggle(550);
$('#caja2, #caja3, #caja4, #caja5').slideUp(250);
});

$('.bot2').click(function(){
$('#caja2').slideToggle(550);
$('#caja1, #caja3, #caja4, #caja5').slideUp(250);
});

$('.bot3').click(function(){
$('#caja3').slideToggle(550);
$('#caja1, #caja2, #caja4, #caja5').slideUp(200);
});

$('.bot4').click(function(){
$('#caja4').slideToggle(550);
$('#caja1, #caja2, #caja3, #caja5').slideUp(200);
});

$('.bot5').click(function(){
$('#caja5').slideToggle(550);
$('#caja1, #caja2, #caja3, #caja4').slideUp(200);
});
});


$(document).ready(function(c) {
   $('.botn4').on('click', function(c){
      $(this).parent().fadeOut('slow', function(c){
      });
   });   
});

HTML
Poner en un widget este code

Code This
Admin
Admin

Mensajes : 37
Fecha de inscripción : 11/05/2014


Ver perfil de usuario http://codethis.foroactivo.mx

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.