SCHNITZER
-
Posts
126 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SCHNITZER
-
Ajax и jQuery с индикатором загрузки, после загрузки контента
SCHNITZER replied to SCHNITZER's question in JavaScript
Не получается. <script type="text/javascript"> $('#menu_element').click(function () { $('#el1, #el2, #el3').fadeOut(200); $('#preloader').fadeIn(150); $('#container').load('loadpage.html', function () { $('#preloader').hide(); $('#new_content').show(); }); }); </script>Все равно вижу процесс загрузки изображения (изображений). Из описания load: "Назначает функцию к событию load для каждого элемента набора. Если связано с объектом window, то это событие вызывается только в том случае, когда агент пользователя завершит загрузку всего содержимого документа, включая фреймы, объекты, изображения и т.д. В случае привязки к элементу, эта функция вызывается когда целевой элемент и все его содержимое полностью загружено. Примечание: функция load будет работать только в том случае, если Вы настроили её перед тем, как элемент был полностью загружен, иначе, ничего не произойдет. Подобного не происходит в $(document).ready()." Help, SOS, ...—... -
Ajax и jQuery с индикатором загрузки, после загрузки контента
SCHNITZER posted a question in JavaScript
Всем привет! Задача. На странице есть меню. По нажатию на элемент меню – сначала исчезает вся прочая информация с разными id. Потом появляется индикатор загрузки, и загружается контент в подготовленный блок из отдельного файла html. Новая информация отображается только после полной загрузки контента, находящегося в отдельном файле. Для отображения контента, находящегося на странице, после его полной загрузки, посоветовали следующее: <script type="text/javascript"> function init() {if (arguments.callee.done) return; arguments.callee.done = true;$('#content').fadeIn (1000);};window.onload = init;</script>(#content {display:none;})Но вопрос в подгружаемой информация из другого файла, так что это не подходит. Сейчас код выглядит так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>тестирование</title> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <style type="text/css"> p#menu_element { text-decoration: underline; cursor: pointer; } img#preloader { display: none; } </style></head><body> <p id="menu_element">Элемент меню</p> <p id="el1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p id="el2">Nunc dictum, lacus ut malesuada pharetra, lacus tortor dapibus magna, eu porttitor nisl enim et magna.</p> <p id="el3">Morbi congue odio ac lacus lobortis, sed tempor lorem porttitor. </p> <img id="preloader" src="loading.gif" alt="preloader" /> <div id="container"></div> <script type="text/javascript"> $(document).ready(function () { $('#menu_element').click(function () { $('#el1, #el2, #el3').fadeOut(200); $('#preloader').fadeIn(150); $('#container').load('loadpage.html'); }); }); </script></body></html>Код отдельного файла loadpage.html: <div id="new_content"> <img src="picbig.png" alt="img" width="640" height="980" /></div>Я хочу добавить #new_content {display:none;}, и в скрипте после полной загрузки добавить #preloader fadeOut(240), а #new_content fadeIn(500), но не знаю как. P. S. Полный чайник, если можно, напишите поподробней. И, хотелось бы, на jQuery, JS совсем не знаю, так что исходный код предпочтительно кардинально не менять. Заранее спасибо!! -
Jquery, Последовательное выполнение функций разных div в одном скрипте.
SCHNITZER posted a question in JavaScript
Идея простая. Есть блок, id=’animation_block’. В нем находятся четыре div-а, с display:none. Эти блоки имеют id: im1, im2, im3, im4. В каждом своя текстура. Я хочу, что бы они плавно появлялись и исчезали по очереди, и так по кругу. Как я себе представляю код: <script type="text/javascript"> $(document).ready(function () { setInterval(function () { $('#im1').fadeIn(1000).fadeOut(400); $('#im2').fadeIn(1000).fadeOut(400); $('#im3').fadeIn(1000).fadeOut(400); $('#im4').fadeIn(1000).fadeOut(400);}, 0); }); </script> Но анимация происходит не последовательно, а вместе. Знаю, как решить вопрос setTimeout, но хотелось бы без этого обойтись. Помогите, пжлста! Хотелось бы реализовать именно на jQuery, в JS полный чайник. Пытался сделать с queue, бился несколько часов, безуспешно (queue могла помочь?). Заранее, спасибо! -
Большое спасибо, буду изучать!
-
Стоит ли на профессиональном форуме отвечать на вопросы, не прочтя и не вдумавшись в сам вопрос...
-
Нет. "убрать прокрутку скролла у #container колесом мыши" Скролл у блока есть, он не прокручивается мышью.
-
Скролл колесом мыши (средней кнопкой), при чем тут overflow: hidden; ?
-
Здравствуйте! Следующий вопрос. На сайте есть блок (id='container'), в котором находится блок большего размера (id='content'). Соответственно, у #container появляется скролл. #container больше страницы, у страницы тоже скролл. Задача: убрать прокрутку скролла у #container колесом мыши. Не у всей страницы, а только у данного блока. Есть такой код (для FF): <script type="text/javascript"> document.addEventListener('DOMMouseScroll', function (e) { e.stopPropagation(); e.preventDefault(); e.cancelBubble = false; return false; }, false); </script> Все хорошо, только он убирает прокрутку всей страницы. Помогите, пжлста, отредактировать код, что бы он применялся только к #container.
-
Да, я так и сделал. Создал файл .htaccess, написал в нем: RewriteEngine on RewriteCond %{HTTP_USER_AGENT} iPhone RewriteRule .* http://html-test.1gb.ru/iphone.html/ [R] Добавил на сервер. При загрузки страницы index.html, меняет адресную строку "http://html-test.1gb.ru/" на "http://html-test.1gb.ru/iphone.html/", и пишет: не может подключиться к серверу из-за большого кол-ва переадресаций. Что делать? P.S. И еще. Как еще сделать для iPad?
-
Как переместить пользователей iPhone (iPod, iPad) на другую страницу, например, indexIphone.html Есть такая история: http://www.htaccesstools.com/articles/dete...edirect-iphone/ Не понимаю как реализовать, как должен выглядеть код.
-
Есть блок, id='xxx' CSS: display:block; width:0px; height:4px; background:#808080; position:fixed; Далее <script type="text/javascript"> $(document).ready(function(){ $("#xxx").animate({ width:"182px", }, 5000); }); </script> Не ратотает в IE (6 версия не интересует). <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> И IE ругается. Что делать?
-
Проблема такая. Есть просмотр галереи. http://www.nickstakenburg.com/projects/lightview/ Но он не работает с jQuery. 1. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script> <script type='text/javascript' src='js/lightview.js'></script> не работает jQuery. 2. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script> <script type='text/javascript' src='js/lightview.js'></script> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> не работает Lightview. Есть идеи почему. И как починить?
-
Плавный скроллинг, не работает в chrome и safari
SCHNITZER replied to SCHNITZER's question in JavaScript
psywalker: Да, вот теперь нормально. Осталось название поменять, и все в порядке А можно ошибки пофиксить? Там их 6 штук (валидация). Хотя я скопировал, поменял кодировку, и все нормально. -
Плавный скроллинг, не работает в chrome и safari
SCHNITZER replied to SCHNITZER's question in JavaScript
Чем дальше в лес... Спасибо, этот способ работает! По крайней мере, в интересующих меня браузерах. Буду разбираться. -
Плавный скроллинг, не работает в chrome и safari
SCHNITZER replied to SCHNITZER's question in JavaScript
)) занятный глюк Тоже траблы в хроме и сафари. -
Да, спасибо. Вот не мог просто найти так коротко, находил скрипты с текстом на пол страницы, так все ясно, спасибо.
-
Вот есть такой вариант. http://szenprogs.ru/blog/plavnyj_skrolling...y/2009-09-17-70 Другие варианты то же есть, но у них есть одно общее - не работают в chrome и safari. ?
-
При появлении скролла, контент, привязанный по середине прыгает
SCHNITZER replied to SCHNITZER's question in HTML Coding
АААхахахахаааа!!! Я с собой больше не дружу )) но, к слову, в моей настольной библии http://htmlbook.ru/css/overflow такого нет, специально пересмотрел. Забыл азы. Спасибо, оперативно. -
При появлении скролла, контент, привязанный по середине прыгает
SCHNITZER replied to SCHNITZER's question in HTML Coding
IE никогда не нервничает ))) Дергается в других браузерах. Подскажите, уже все остальное написал, только это осталось. -
При появлении скролла, контент, привязанный по середине прыгает
SCHNITZER posted a question in HTML Coding
В ie справа отображается полоса по умолчанию. В остальных нет. Проблема в том, что сначала страница будет маленькая, потом можно будет открыть блок, и страница разворачивается. Контент привязан по середине. А с появлением полосы прокрутки 100% изменяется, и контент прыгает, не приятно. Сделать полосы прокрутки сразу - так появляется еще и полоса внизу, не очень нра. надо, что бы способ работал тут: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Поиск по символам</title> <style type="text/css"> *{ margin: 0; padding: 0;} html,body { height: 100%; min-width: 800px;} body {background:grey;} #page { margin: 0 auto; min-height: 100%; width: 800px; overflow: hidden; } * html #wrap { height: 100%; overflow: visible;} #footer { margin: -50px 0 0;background: red; height: 50px;} #basis { background: blue; margin-bottom: 220px;} </style> </head> <body> <!--Сама страница--> <div id="page"> <div id='blackBlock' style='display:block; width:400px; height:400px; background:black; border:2px solid white;'></div> <!-- /Сама страница--> </div> <!--Footer--> <div id="footer"> <!-- /Footer--> </div> </body> </html> -
Можно еще как-то помочь, не получается.
-
Такой же, да не такой. Первый вариант вполне подходит! Все нормально. А вообще я на большом количестве сайтов видел этот баг. Решается, оказывается, просто. Уважаемые модераторы, тема не там где надо, давайте вы ее удалите просто, дабы не захламлять форум... psywalker - Спасибо тебе большое, ты созидаешь счастье! )
-
УУУУУУУУГГГГГГГГГГГРРРРРРРРРРРРРРР Гхм. Нет. Мне не нравится, что если окно уже центрального элемента, то при горизонтальном скроле ширина footer будет с ширину окна, а далее будет прерываться. Центральная часть - 1000px, окно браузера 800px (ну не знаю, открыли боковую панель с закладками). Footer, имеющий ширину 100%, будет шириной 800px, а на 200px горизонтального скрола будет дырка.
-
Рома, теска, как же ж ты так... Там все тоже самое. Задают параметры высоты html и body, и 100% ширины становится понятием относительным.
-
Да ладно лукавить http://html-test.1gb.ru/008/podval.html Вот. Уменьши окно браузера, и посмотри как footer будет выглядеть. известная проблема. Только вот решения пока не нашел.