Как мне разместить коды от jsfiddle.net на моем сайте? - PullRequest
Новая
       4

Как мне разместить коды от jsfiddle.net на моем сайте?

4 голосов
/ 08 февраля 2011

Я пытался создать небольшую рамку в нижней части моей веб-страницы, которая будет расширяться / всплывать при прокрутке, а затем снова закрываться, когда мышь удаляется.

Я нашел это сообщение со ссылкой на jsfiddle.net (с которым я возился) и создал что-то, что работает точно так, как я хочу, при просмотре на JSFiddle. Но я не могу запустить его, когда выкладываю его на свой веб-сайт (думаю, это может иметь какое-то отношение к настройке onLoad, но я действительно не уверен).

Это то, что я создал в JSFiddle:

JavaScript 

$('#box').hover(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;
}

HTML 

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

Это прекрасно работает в JSFiddle, но не тогда, когда я пытаюсь вставить код в мои файлы и связать их вместе. Если я изменю раскрывающийся список в JSFiddle с onLoad или onDomReady на что-то еще, он перестает работать, но код не меняется. Поэтому я думаю, что я должен добавить что-то еще для этого.

Как вы, наверное, догадались, я полностью новичок в том, что касается JavaScript, поэтому я уверен, что я что-то не так делаю.

Может, кто-нибудь подскажет, как сохранить код JavaScript и связать его с моей веб-страницей, чтобы он работал точно так же, как в JSFiddle?

1 Ответ

4 голосов
/ 08 февраля 2011

Вы запускаете этот код немедленно, а не ожидаете готовности DOM.Это означает, что элемент #box может еще не существовать.

jsFiddle автоматизирует этот процесс, чтобы сделать ваш код чище.Вам нужно сделать это самостоятельно, когда вы поместите код на свой сайт.Это очень просто: вам просто нужно поместить свой код в обратный вызов для события ready на document: 

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

или в ярлык версии: 

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

Они семантически и функционально эквивалентны.

...