Float que sai com tempo determinado

Detalhes da questão

Endereço do fórum: http://www.brasilplayforever.com/forum
Versão do fórum: phpBB3

Descrição

Olá,

Eu tenho um código aqui (que foi conseguido aqui mesmo no fdf) de um float, mas ele tá um pouco feio, vou passar o código:

Código:

<div align="center" id="fdf_float">
                                                                                 <script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#closedfstc").click(function(){
jQuery("#fdf_float").hide();
});
});
</script><style type="text/css">
#fdf_float a {
position: fixed;
bottom: 89px;
text-decoration: none;
right: 26px;
z-index: 5000;
cursor: pointer;
}
a#caixflofstc {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.7;
width: 320px;
height: 70px;
background: #f2f2f2;
color: #000;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 20px;
text-decoration: none;
font-size: 16px;
font-family: Tahoma;
border: 1px solid #2d2d2d;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #2d2d2d 0px 1px 0px;
border-radius: 3px;
}
a#caixflofstc:hover {
opacity: 1;
}
#caixflofstc strong {
font-family: "Trebuchet MS";
display: block;
font-size: 14px;
padding-bottom: 5px;
}
</style><a id="caixflofstc" href="https://www.facebook.com/bpfsamp/" target="_blank"><img alt="" border="0" src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/64/social-facebook-box-blue-icon.png" />Curta nossa página no Facebook!</a><a id="closedfstc">x</a>
</div>

Eu queria saber se tem como fazer com que o texto ali ficasse proporcional à imagem do logo do facebook, lado a lado...

E também se tem como fazer com que esse float sumisse depois de uns 7 segundos sozinho (e removesse a opção de fechar manualmente).

E se alguém aí já tiver um designer novo desse float, eu queria muito, esse atual é muito feio


Agradeço a atenção de vocês

Remova o código e crie um novo JS investido em todas as páginas:

Código:

(function ($, css) {
  'use strict';

  var config = {
    link: 'https://www.facebook.com/bpfsamp/'
  };

  $(function () {
    $('<a>', {
      'class': 'fa-facebook-popup',
      'html' : [
        $('<i>', { 'class': 'fa fa-facebook' }).prop('outerHTML'),
        $('<span>', { 'text': 'Curta nossa página no facebook!' }).prop('outerHTML')
      ].join('\n'),
      'href' : config.link
    }).appendTo('body');

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.fa-facebook-popup {',
  '  text-decoration: none;',
  '  color: #555;',
  '  background-color: #fff;',
  '  padding: 20px;',
  '  position: fixed;',
  '  right: 20px;',
  '  bottom: 20px;',
  '  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);',
  '  border: solid 1px #dfdfdf;',
  '  border-radius: 2px;',
  '  z-index: 9999;',
  '  transition: all 220ms linear;',
  '  transform: translateY(0px);',
  '}',
  '',
  '.fa-facebook-popup:hover {',
  '  transform: translateY(-8px);',
  '}',
  '',
  '.fa-facebook-popup > span {',
  '  color: #555;',
  '  font-size: 18px;',
  '  margin-left: 6px;',
  '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
  '  font-weight: 300;',
  '  vertical-align: middle;',
  '}',
  '',
  '.fa-facebook-popup > .fa {',
  '  background-color: #3b5998;',
  '  color: #fff;',
  '  padding: 11px 15px;',
  '  font-size: 20px;',
  '  vertical-align: middle;',
  '  border-radius: 100px;',
  '}'
]));

o/

Adorei, mas teria como colocar para sumir depois de uns 10s? E que abrisse uma nova guia ao invés de carregar na mesma aba do fórum...

Claro, aqui está:

Código:

(function ($, css) {
  'use strict';
 
  var config = {
    link: 'https://www.facebook.com/bpfsamp/'
  };
 
  $(function () {
    $('<a>', {
      'target': '_blank',
      'class' : 'fa-facebook-popup',
      'html'  : [
        $('<i>', { 'class': 'fa fa-facebook' }).prop('outerHTML'),
        $('<span>', { 'text': 'Curta nossa página no facebook!' }).prop('outerHTML')
      ].join('\n'),
      'href'  : config.link
    }).appendTo('body');

    setTimeout(function () {
      $('body')
        .children('.fa-facebook-popup')
          .fadeOut()
      ;
    }, 10 * 1000);
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.fa-facebook-popup {',
  '  text-decoration: none;',
  '  color: #555;',
  '  background-color: #fff;',
  '  padding: 20px;',
  '  position: fixed;',
  '  right: 20px;',
  '  bottom: 20px;',
  '  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);',
  '  border: solid 1px #dfdfdf;',
  '  border-radius: 2px;',
  '  z-index: 9999;',
  '  transition: all 220ms linear;',
  '  transform: translateY(0px);',
  '}',
  '',
  '.fa-facebook-popup:hover {',
  '  transform: translateY(-8px);',
  '}',
  '',
  '.fa-facebook-popup > span {',
  '  color: #555;',
  '  font-size: 18px;',
  '  margin-left: 6px;',
  '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";',
  '  font-weight: 300;',
  '  vertical-align: middle;',
  '}',
  '',
  '.fa-facebook-popup > .fa {',
  '  background-color: #3b5998;',
  '  color: #fff;',
  '  padding: 11px 15px;',
  '  font-size: 20px;',
  '  vertical-align: middle;',
  '  border-radius: 100px;',
  '}'
]));

o/

Perfeito, era isso aí.


Obrigado Luiz, tu é o cara.