- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Всем привет.
Не подскажите, можно ли как то реализовать в блочной верстке, чтобы один блок, который в коде находится выше, визуально был под блоком, который в коде находится ниже.
Пример:
<div class="main">
<div class="container1">Нужно вывести ниже</div>
<div class="container2">Нужно вывести выше</div>
</div>
Насколько я знаю, это можно реализовать путем либо абсолютного позиционирования, либо путем сдвигов margin для блоков container1 и container 2 относительно родителького блока main (в примере). Но что делать, если высота блока container2, под которым нужно визуально разместить блок container1 не имеет фиксированной высоты? Тогда абсолютное позиционирование и все сдвиги относительно края родительского блока, не помогают, так как рассчитать необходимый отступ для container1 от блока main невозможно.
Что делать в таком случае, есть ли другие варианты, решающие эту проблему?
Это можно сделать при помощи jQuery. Простейший скрипт в четыре строчки:
var j = jQuery.noConflict();
j(document).ready(function() {
jQuery('.container1').insertAfter('.container2');
});
Теперь container1 будет ниже container2, и ему будет фиолетово, что верхний контейнер растягивается...
Это можно сделать при помощи jQuery
И пусть юзер чумеет, наблюдая, как все прыгает и скачет.
И пусть юзер чумеет, наблюдая, как все прыгает и скачет.
Вообще то браузер, прежде, чем загрузить страницу, считывает весь ее код, исполняет скрипты, и лишь потом выдает страницу на экран монитора. Страница загрузится с уже переставленными блоками. Юзер ни о чем не догадается😂
Это можно сделать при помощи jQuery. Простейший скрипт в четыре строчки:
var j = jQuery.noConflict();
j(document).ready(function() {
jQuery('.container1').insertAfter('.container2');
});
Теперь container1 будет ниже container2, и ему будет фиолетово, что верхний контейнер растягивается...
Отлично, спасибо большое!
Вообще то браузер, прежде, чем загрузить страницу, считывает весь ее код, исполняет скрипты, и лишь потом выдает страницу на экран монитора. Страница загрузится с уже переставленными блоками. Юзер ни о чем не догадается😂
Полная чушь
Полная чушь
Спасибо! В своем подробном ответе Вы потрясающе глубоко раскрыли суть обсуждаемого вопроса, не был упущен ни один нюанс! Я узнал для себя много нового) Спасибо, что посетили нас!!!
Saitoff, $(document).ready(function(){some code...}); будет срабатывать после загрузки страницы. Так что Fearful прав - чушь.
palladin_jedi, $(document).ready(function(){some code...}); срабатывает не после загрузки страницы, а после загрузки браузером DOM-дерева. А кто Вам сказал, что браузер сразу выдает на экран загруженный код страницы? Как насчет обработки CSS и Js? Вот Вам код, вставьте его в пустой HTML документ и проверьте, как все загружается:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").insertAfter("#foo"); // check after() examples
});
</script>
<style>#foo { background:yellow; }</style>
</head>
<body>
<p> Я в коде первый, но оказался вторым (юзер очумел;)) </p><div id="foo">Я в коде второй</div>
</body>
</html>
palladin_jedi, $(document).ready(function(){some code...}); срабатывает не после загрузки страницы, а после загрузки браузером DOM-дерева. А кто Вам сказал, что браузер сразу выдает на экран загруженный код страницы? Как насчет обработки CSS и Js?
Расскажи как браузер ждет пока подгрузятся кнопочки социалок, счетчиков, метрик, попандеров, и прочей фигни.
З.Ы. Специально для тебя заскринил, как браузер рендерит страницу
Fearful, браузер сперва исполняет CSS и Js и лишь потом это показывает юзеру.
С чего начинается сайт?
Для браузера сайт начинается с GET-запроса страницы.
Сервер на этот запрос высылает HTML-код страницы.
Браузер разбирает код и начинает загрузку всех внешних файлов (JS, CSS, Flash и др.) в порядке их следования в коде.
Обычно браузер использует не более 2х потоков для загрузки внешних файлов, а CSS и JS загружаются вообще в одном потоке.
Время на каждый запрос зависит от размера возвращаемого ответа, загрузки сервера и активности на каждой машине на всем пути между браузером и сервером.
Чем больше размер файла - тем дольше он будет доставляться браузеру.
Чем больше количество файлов - тем дольше будет загружаться вся страница.
Как браузер рендерит страницу?
До момента полной загрузки JS из HEAD пользователь видит "белую страницу". Когда все внешние скрипты загружены, начинается выполение JS в порядке следования на странице (сверху вниз), а пользователь уже начинает видеть контент страницы, и по мере загрузки CSS и картинок, страница отрисовывается полностью.
Таким образом, чтобы увеличить скорость загрузки страницы нужно:
Уменьшить размеры скриптов дабы ускорить первичный отклик страницы
Уменьшить количество файлов (картинки объединяются в спрайты, а JS и CSS аггрегируются)
Использовать HTTP-сжатие
Увеличить количество хостов, с которых загружается статика сайта, чтобы браузер мог увеличить лимит одновременных соединений
Поместить JavaScript в footer страницы, чтобы они загружались последними, а пользователь мог уже пользоваться страницей.
Вот полный вариант статьи разработчиков дистрибутивов для Drupal. Почитай, там много интересного и куча полезных ссылок)
Кстати, может ты сам подскажешь Маэстро, как поменять дивы местами без изменения кода? А то в полемику вступать все горазды...