Кто такой и что такое domready?


Добавление события

Работает примерно так же, как и Element.addEvent, с тем отличием, что позволяет использовать пользовательское событие “domready”.

window.addEvent(''load'', function(){...});

window.addEvent(''domready'', function(){...});

function myFunction(){...};
window.addEvent(''domready'', myFunction);

domready

Это важный нюанс! Всегда, когда вы пытаетесь обратится к элементам DOM-а, эти элементы должны быть уже загружены в браузер. Если у вас имеется такой код:

$$(''a'').each(function(link){

  link.setStyle(''color'',''blue'');
});

то можно сказать, что он будет работать только тогда, когда все теги a будут загружены в браузер. Поэтому, если установить этот код во внутрь тега head, он ничего не сделает. Если установить его в середину вашего документа, он задействует все ссылки загруженные до момента запуска скрипта.

Чтобы обойти это, код нужно запустить после того, как загрузится страница целиком. Тут есть несколько вариантов. Можно использовать window.addEvent(“load”, function(){…. код скрипта …});. Однако следует заметить, что
событие “load” ожидает пока всё, включая изображения, CSS файлы и остальное, подгрузится.

Вот для чего необходимо событие “domready“. Это событие срабатывает тогда, когда будет загружен только весь HTML код, даже если все остальное (изображение и другие файлы) еще не загрузились. Потому код

window.addEvent(''domready'', function(){
  $$(''a'').each(function(link){

    link.setStyle(''color'',''blue'');
  });

});

сработает как только весь HTML загружен в браузер, а все ссылки из нашего первого примера станут синими.

В дополнение, хочу сказать, что использование события domready я встречал пока только в Mootools, но так как это событие пользовательское, это не удивительно. Еще вроде у jQuery есть аналог:

      $(document).ready(function() {
          // сюда вставляется код функции

      });

но при этом, кажется, такое написание в jQuery уже устарело, т.к. в одном из обновлений разработчики убрали необходимость указывать метод .ready(), так как весь код jQuery, в любом случае, будет запускаться только когда все элементы DOM-а будут загружены в кэш браузера. Я б с удовольствием написал еще пару статеек и о jQuery, как это сделал мой предшественник, в посте об AJAX, но сделаю это только после того, как закончу серию уроков о Mootools.

,

  1. #1 by allex on 16.02.2012 - 3:56 pm

    Здравствуйте.
    Подскажите, пжлст, хоть это не по теме

    Есть цикл, для слайдера, вывод картинок.

    ….

    $current_index – это текущая/первая картинка

    функции

    var current_id = 0;
    var myFx;

    window.addEvent(‘domready’, function() {
    myFx = new Fx.Scroll(‘album_carousel’);
    current_id = parseInt({math equation=”x” x=$current_index});
    var position = $(‘thumb’+current_id).getPosition($(‘album_carousel’));
    myFx.set(position.x, position.y);
    });

    function moveLeft() {
    if($(‘thumb’+(current_id-1))) {
    myFx.toElement(‘thumb’+(current_id-1));
    myFx.toLeft();
    current_id = parseInt(current_id-1);
    }
    }

    function moveRight() {
    if($(‘thumb’+(current_id))) {
    myFx.toElement(‘thumb’+(current_id+1));
    myFx.toRight();
    current_id = parseInt(current_id+1);
    }
    }

    Вопрос: как правильно сделать, со скриптом javascript, именно там где window.addEvent(‘domready’…
    если эти картинки – это один цикл, как положено, поместить в общий цикл, который представляет цикл категорий.
    Тоесть, вывод напр 3 категорий, в каждой из которых есть цикл этих картинок.

    У меня получается, что первый цикл – слайдер переключает картинки, второй же (для второй категории) – не работает, хотя
    выводит картинки (если убрать overflow).
    Понял, что тк.ск не “обнуляется” window.addEvent(‘domready’, – тобишь, срабатывает только для первого цикла картинок, но не последующих…

    Помогите, пжлст.

    • #2 by proglammer on 17.02.2012 - 12:15 pm

      может ссылку для визуального восприятия вопроса? я, честно говоря, не всё понял.
      хочется посмотреть откуда эти картинки грузятся, где потом используются функции moveRight и moveLeft и как это так получается, что все картинки из разных категорий грузятся в один цикл, в котором потом только первая категория получает myFx, а остальные остаются болтаться где-то за пределами родительского блока. если я, конечно, правильно понял.

  2. #3 by allex on 26.02.2012 - 5:21 pm

    Здравствуйте, proglammer.
    Спасибо за внимание к проблеме.

    Вот тут, как раз:
    http://vremenno.net/q-and-a/js/question-513/
    также спрашивал…
    Там нагляднее, наверное.

    Просто, на данный момент пришлось начать использовать код с jquery – получилось это:
    http://club2drive.com/profile.php?user=neoallex
    теперь картинки в цикле, -где авто-мото-вело, переключаются. Тобышь, на jquery работает исправно.
    Но…
    Но все равно остается проблема с альбомами – там ниже видно – не работает переключалка в этом слайдере.
    Если из хтмл убрать код вывода цикла этих машинок-великов, то в слайдере альбома становится нормально прокручивать.
    Вышеописанная проблема – она была раньше с мото-вело, когда для их вывода использовался domready. Теперь же, как говорил, через $(document).ready(function() { с jQuery
    Вот и вы говорите, что это аналог domready.
    Видимо, из-за этого всего конфликт и с альбомами.

    Одним словом, если интересно, можете себе заняться, на досуге – возможно, если найдете решение, оно вам пригодится.
    Ибо решил пока так оставить, как есть. Альбомы может уберутся.
    Кстати, всплывающее окно регистрации на этой странице также не работает )))
    Вот такие пироги.

    СПСБ.

    • #4 by proglammer on 26.02.2012 - 7:01 pm

      allex, честно, не до конца понимаю, о чем речь… это у меня, соображалка так работает – воображение фиговое, поэтому со слов не всегда нормально понимаю. Что касается формы регистрации, за ее вывод, скорее всего отвечает файл mlogin.js. так? я посмотрел, просто консоль, оказалось при загрузке у вас 3 ошибки, одна из которых “Uncaught TypeError: Cannot read property ‘offsetHeight’ of null”. Ошибка в этой функции:
      function ieheight() {
      var bg = $('body').offsetHeight;
      $('bg').style.height = bg + 'px';
      }
      window.onload = ieheight;

      эта функция, честно говоря, вводит меня немного в ступор. С одной стороны $(‘body’) вроде бы является валидным селектором jQuery, который выбирает все теги “BODY” (но мы то знаем, что он у нас один), с другой стороны, у есть селектор $(‘bg’), который, как мне кажется, валидным селектором jQuery являться не может, НО может быть валидным селектором Mootools, который выбирает элемент с ID=”bg”. Но ошибка выскакивает в строке var bg = $('body').offsetHeight;. В общем, если у вас подключены обе библиотеки (jQuery и Mootools), то используя Mootools можно было бы попробовать конструкцию $$('body')[0].offsetHeight или document.body.offsetHeight.
      Кстати говоря, не совсем понимаю к чему относится обращение $(‘bg’) – если это jQuery, то это обращение к тегу BG, которого быть, по идее в HTML не может; а если это Mootools, то обращение идет к элементу с ID=”bg”, которого у Вас в коде я не нашел. Консоль Хрома ошибок в этом коде не возвращает, но, возможно, это от того, что предыдущая возвращает ошибки, и обработчик перестает обрабатывать весь файл.

      И ещё. В документации к Mootools есть такая конструкция:
      (function($){
      // Здесь можно спокойно использовать селектор $
      })(document.id)

      Может я и не прав… Не зря я себя называю “программистом-неумейкой” :) Если что-нибудь получится, отпишитесь, пожалуйста. Интересно.

  3. #5 by allex on 26.02.2012 - 8:49 pm

    Это скорее я программист-неумейка ))
    на php специализируюсь, а остальное как приходится – адаптирую, что могу..

    ——–
    function ieheight() {
    var bg = $(‘body’).offsetHeight;
    $(‘bg’).style.height = bg + ‘px’;
    } – оставшийся выдранный код, по сути, проверял, убирая его – не он влиял…
    Ну ничего:
    ——–
    Пришлось сделать всплывающее окно по другому – повешать id на div-ы, прописать их в цсс:
    Логиниться

    div#comm_form {
    z-index: 2000;
    padding: 10px 10px; text-align:left;
    position: fixed; top: 0px; margin: 200px 0 0 -200px; left: 55%; width: 300px; height: 171px;
    background-image:url(avtorization.png);
    }
    потом по событию
    $(“#comm-block-show”).click(function () {
    $(“#comm_form”).toggle(“slow”);
    });
    + на закрытие …

    Пока, будто бы, конфликтов с всплыв.окном не наблюдается…

    —————–
    А вы молодец )))
    “Уроки программирования от новичка новичкам” – я вот пока никак не отважусь начать свой блог по php, хоть как бы не сильно и новичок в php – матушка-лень, наверное + “интернет-фобия” ).

    Желаю вам блого-успехов.

    • #6 by proglammer on 27.02.2012 - 6:33 am

      “position: fixed” – с этим осторожно. Не знаю, важно это или нет, но есть ещё чудики, которые в IE5 & 6 в интернеты ходят, а там position:fixed не работает.
      Если хотите выставить форму по центру экрана, используйте контейнеры. Я бы предложил такую структуру HTML:

      <div id="wrapper">
        <div id="form">
          <!--Здесь код формы-->
        </div>
      </div>

      и такой код CSS

      #wrapper{
        position:absolute; /*тут нужно быть осторожным с тем, куда вставлять div id="wrapper", так как position:absolute действует относительно верхнего родительского элемента с position != static (т.е. relative, abosule, fixed). Так, если родительским элементом id="wrapper" будет BODY, то проблем не будет, а если какой-нибудь другой DIV, где-нибудь внутри DOMa, где уже есть много всяких эл-тов с position != static, то position:absolute будет обрабатываться в зависимости от ближайшего родительского эл-та с position != static*/
       top:0;
       left:0;
       width:100%;
       height:100%;
       background:#000;
       opacity:.3 /*в зависимости от браузера, тут тоже придется поиграться: у webkit/mozilla и explorera разные свойства для прозрачности... хотя, вы же библиотеку будете использовать для вывода формы, а там, вроде бы, .opacity работает со всеми популярными браузерами */
        z-index:100;
      }
        #form{
          position:abosolute; /*этот стиль будет обрабатываться по отношению к DIV#wrapper*/
          margin: 200px auto auto -200px; /*не знаю, знаете ли вы, что margin-left:auto и margin-right:auto, в определенных условиях, устанавливают элемент по центру родительского (в данном случае DIV#wrapper) по горизонтали. а для центрирования по вертикали, нужно уже поиграться с Javascript, т.к. нужно знать высоту окна браузера, а это может только Javscript. Кстати, появилась идея написать скрипт, который бы центрировал элемент по центру экрана просто вставив ссылку на элемент в параметры функции. Хотя, такое уже есть, наверняка, но я попробую написать, для общего развития. Тем более, сам несколько раз игрался на работе: пытался центрировать элемент.*/
          z-index:1000;
          width:300px;
          height:171px;
          /*остальной код*/
        }

      Вы еще хотели написать HTML код формы логина? попробуйте это сделать вставив код в тег CODE, используя &lt; вместо <: <a href="#" rel="nofollow">Логиниться</a>

      Спасибо за пожелания! Буду стараться!

  4. #7 by allex on 26.02.2012 - 9:29 pm

    Кстати, нашел решение проблемы- можете проверить, описать и выложить где-то здесь на вашем блоге:
    Чтобы избежать конфликта jQuery и Mootools:

    Заключаем код jQuery в следющее:

    jQuery.noConflict();
    ( function($) {код, который используется для нужного эффекта
    })(jQuery);

    например:

    jQuery.noConflict();
    (function($) {
    $(document).ready(function(){
    $(“#slider”).easySlider({
    controlsBefore: ”,
    controlsAfter: ”,
    prevId: ‘prevBtn,
    nextId: ‘nextBtn’
    });
    });
    })(jQuery);

    или

    jQuery.noConflict();
    (function($) {
    $(“#comm-block-show”).click(function () {
    $(“#comm_form”).toggle(“slow”);
    });

    $(this).keydown(function(eventObject){
    if (eventObject.which == 27) $(“#comm_form”).hide(“slow”);
    });
    })(jQuery);

  5. #9 by Виталий on 14.04.2012 - 6:58 pm

    Может не стоило вмешиваться, но все же хочется других предостеречь от ошибки. Мутулс и Джиквери при работе с дом (например для слайдеров, менюшек и прочего) делают одно и тоже, это как ехать на 2-х велосипедах, 5 метров на одном, 5 метров на другом. Это не очень разумно. Собственно это еще одна причина для меня изучить мутулс, это то, что моя любимая джумла использует мутулс, а мне приходилось искоринять ее из джумлы, но это годится если нет расширений, которые используют мутулс.

    Также есть очень хороший фреймворк для js – dojo, но по нему на русском инфы совсем мало.

    • #10 by proglammer on 15.04.2012 - 4:38 am

      Виталий, спасибо за наводку :) видел в интернете упоминания Dojo, но пока не сталкивался. на досуге посмотрю, что это такое!

      • #11 by Виталий on 16.04.2012 - 8:27 pm

        Mootools и JQuery можно рассматривать как некоторые единичные грузовики, а Dojo – скорее автопарк. Очень мощный, его должны понять те, кто в основном программирует на пхп (и т.п.) т.к. он имеет некоторые похожие по логике инстременты, например подгрузка классов require, т.е. он загружает не весь свой “автопарк”, а только те инструменты, которые нужны, например, работа с графиками (в ходит в состав “автопарка”) и например базовые возможности по работе с ДОМ и AJAX…

        Но разобраться со всем этим мешает отсутствие знаний английского. (на оф сайте мало примеров по использованию, а вот по мутулс, благодоря вашей наводке, всеже стал всматриваться в английский текст и в примеры, так, что на сайте мутулс довольно все удобно для изучения, и вам спасибо за ваши материалы).

  6. #12 by Kostya on 29.03.2013 - 3:42 pm

    Подскажите зачем в последнее функции по изменению цвета ссылок использовать .each, если можно на прямую изменить не используя его.

    • #13 by proglammer on 03.04.2013 - 6:01 pm

      собственно не за чем :) когда писал этот пост про domready (а это было уже давно), са не представлял, что можно обойтись просто селектором ссылок: $('a').setStyle('color:#fff')

  7. #14 by Iln on 16.04.2013 - 5:39 am

    Извиняюсь за “нетематичность” вопроса!!! Может поставите ссылку на другие статьи не только на верхней части контента, но и после статьи тоже)) Просто прокручивать вверх не удобно как-то. Спасибо за внимание!

(никто не узнает)

Код на картинке: