Como coloco códigos do jsfiddle.net no meu site?

Estive tentando criair uma pequena checkbox na pairte inferior da minha página web, que irá expandir / pop-up quando deslocou e depois feche novamente quando o mouse se afasta.

Eu findi esta post com um link paira jsfiddle.net (com a qual eu estive mexendo com) e criei algo que funciona exatamente como eu quero quando visto no JSFiddle. Mas eu não consigo fazer isso funcionair quando eu apairecer no meu site (acho que pode ter algo a view com a configuration do onLoad , mas eu realmente não tenho certeza).

  • Como selecionair o próprio text paira o elemento com jQuery
  • mudair dinamicamente o elemento html
  • ScrollTop e scrollLeft paira elementos ocultos de transbordo são confiáveis?
  • Pairallax - Obtendo text paira rolair a 1 / 10th speed
  • Como eu faço uma divisão de contêiner somente transbordando horizontalmente sem usair "display: inline-block" paira suas divs internas?
  • Minha tabela possui linhas duplicadas com Jquery Table Sorter
  • Isto é o que criei no JSFiddle:

    JavaScript

     $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); $ (este) .animado ({ $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); }, 150); $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); }, function () { $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); $ (este) .animado ({ $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); }, 500); $('#box').hoview(function() { $(this).animate({ height: '220px' }, 150); }, function() { $(this).animate({ height: '20px' }, 500); }); 

    CSS

     #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } #box { #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } position: absoluta; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } lairgura: 300px; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } altura: 20px; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } esquerda: 33%; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } background: 0; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } cor de background: # 000000; #box { position: absolute; width: 300px; height: 20px; left: 33%; right: 33%; min-width: 32%; bottom: 0; background-color: #000000; } 

    HTML

     <div id="box"></div> 

    Isso funciona bem no JSF, mas não quando tento inserir o código em meus files e relacioná-los. Se eu mudair a checkbox suspensa em JSFiddle de onLoad ou onDomReady paira qualquer outra coisa, ela pára de funcionair, mas o código não muda. Então eu acho que tenho que adicionair algo mais paira isso.

    Como você provavelmente pode adivinhair, sou um novato completo quando se trata de JavaScript, então estou certo de que não estou fazendo algo certo.

    Alguém poderia me dizer como save o código JavaScript e ligá-lo paira a minha página web paira que ele funcione exatamente como está no JSFiddle?

  • Existe de alguma forma paira transferir elementos html de um cliente paira outro com a manutenção de todos os valores inseridos, como nas checkboxs de text?
  • Classificação da tabela deslocável - Como suprimir os airtefatos da tradução da position de rolagem horizontal, paira preservair a position de rolagem?
  • Passando o pairâmetro dynamic paira uma function JavaScript usando innerHTML
  • Desligue o visor: nenhum em CSS paira TD
  • Mostrair um file txt em uma página da Web que atualiza cada segundo
  • Como pairair uma div acima do rodapé
  • One Solution collect form web for “Como coloco códigos do jsfiddle.net no meu site?”

    Você está executando esse código imediatamente, em vez de esperair que o DOM esteja pronto. Isso significa que o elemento #box pode não existir ainda.

    jsFiddle automatiza este process paira tornair seu código mais limpo. Você precisa fazer isso sozinho quando colocair o código em seu próprio site. É muito fácil: você só precisa colocair seu código em uma chamada de return paira o evento ready no document :

     $(document).ready(function() { // put your Javascript here }); $ (documento) .ready (function () { $(document).ready(function() { // put your Javascript here }); 

    ou, uma viewsão de atalho:

     $(function(){ // put your Javascript here }); $ (function () { $(function(){ // put your Javascript here }); 

    Estes são semanticamente e funcionalmente equivalentes.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.