DjTarik

Все это знают. Не подходит мне. И задача не в строке, а в том, как грамотно это сделать на JS.

Была задача - написать скрипт "бегущей строки". Сделал как можно проще. Ссылка: http://tarik.kasperovich.ru/test_9/index.html Код: // The document is loaded --> onload = function() { runingLine.initial('RunLineLrt', 50, 'ltr'); //runingLine.initial('RunLineRtl', 50, 'rtl'); } // --> var runingLine = {}; // RuningLine initialization --> runingLine.initial = function(id, value, direction) // direction can be 'ltr' or 'rtl' --> { obj = document.getElementById(id); parent = obj.parentNode; speed = Math.round(1000/value); // quantity of pixels in a second --> obj.style.visibility = 'visible'; if (direction == 'ltr') { posStart = parent.offsetWidth; // start coordinate --> posFinish = -(obj.offsetWidth); // finish coordinate --> runingLine.traffic.ltr(); } else if (direction == 'rtl') { posStart = -(obj.offsetWidth); // start coordinate --> posFinish = parent.offsetWidth; // finish coordinate --> runingLine.traffic.rtl(); } obj.onmouseover = function() { clearTimeout(timer); } obj.onmouseout = function() { if (direction == 'ltr') { runingLine.traffic.ltr(); } else if (direction == 'rtl') { runingLine.traffic.rtl(); } } } // --> runingLine.traffic = {}; // RuningLine traffic 'left to right' --> runingLine.traffic.ltr = function() { if (posStart >= posFinish) { posStart-=1; // change coordinate --> obj.style.left = posStart+'px'; timer = setTimeout(arguments.callee, speed); } else { posStart = parent.offsetWidth; // start coordinate --> posFinish = -(obj.offsetWidth); // finish coordinate --> runingLine.traffic.ltr(); } } // --> // RuningLine traffic 'right to left' --> runingLine.traffic.rtl = function() { if (posStart <= posFinish) { posStart+=1; // change coordinate --> obj.style.left = posStart+'px'; timer = setTimeout(arguments.callee, speed); } else { posStart = -(obj.offsetWidth); // start coordinate --> posFinish = parent.offsetWidth; // finish coordinate --> runingLine.traffic.rtl(); } } // --> Вроде всё просто. Но есть пару вопросов: 1. У меня есть объект "var runingLine = {};". Я от него создавал функцию "runingLine.initial()", чтобы как-то удобнее скомпоновать свой код. Это вообще верный подход? Где можно почитать об этом? (в смысле, как улучшить код и как грамотнее работать с объектами) 2. У меня есть объект "var runingLine = {};". Я от него создавал "runingLine.traffic = {};" и потом ещё "runingLine.traffic.rtl()" и т.д. Можно ли так делать, или это неграмотно? Я только учусь, и не знаю, где взять информацию о том, как грамотно работать с объектами и в чём фишка объектно=ориентированного подхода. =( P.S. Есть ещё вопросы, но о них чуть позже. Пока интересует только это. Спасибо.

Здравствуйте. Поставили такую задачу. Есть вот такая штука на флэше: http://catalog.onliner.by/prodimage/5800xm/3d/#image Необходимо сделать что-то похожее на JS. Имеются уже нарезанные картинки с шагом в 10 градусов, к примеру. Вопросы: 1. Возможно ли вообще такое на JS. 2. Какой будет аглоритм? (нужно всё как можно проще и без наворотов) 3. Может уже есть такие готовые скрипты и я плохо искал? P.S. Если такое уже спрашивали, дайте ссылку. Или может кто знает какую-нить инфу по этому вопросу? Спасибо.

Так а куда можно написать, что бы посмотрели и рассказали, в чём проблема? Никогда "багрепорты" не писал)))

Кстати - это очень узкое решение. Если ты присмотришься - то заметишь, что при чётной/нечётной ширине браузера твой бэкгроунд дергается на 1px. Именно поэтому там столько рассуждений. =)

Есть решение. Я задавался таким же вопросом год назад) Где-то есть тема, поищи. +ещё мне Максим рассказывал, как сделать тени, уходящие за экран. Там та же фигня. Короче - поиск, на форуме всё есть.

я тут подумал, что проблема всё-таки в моем ie. Эмулятор глючит, скорее всего. Теперь вроде всё норм.

а я себе уже сделал. Только в ie не пашет. До всего додумался, всё меня устраивает - а замыкания в ie - так и не получились. Может ты подскажешь: array = ['SlideShow1', 'SlideShow2', 'SlideShow3']; // array of id --> for (var i=0; i<array.length; i++) { var img = document.getElementById(array[i]); img.src = 'img/slideshow/'+images[i]; (function(i){ // short circuits --> img.onload = function() { alert(i); if(i == array.length-1) // last image is loaded --> { setTimeout(function(){ slideshow.opacity.install('show', 0); }, 500); } } })(i); } Почему везде alert(i) выведет '0,1,2', а в ie - '0,1'. Без двойки? O_o

Собственно, вот такой скрипт: // The document is loaded --> onload = function() { slideshow.initial(1); } // --> var slideshow = {}; // Slideshow initialization --> slideshow.initial = function(num) { i = num; if (i>4) { i = 1; } var image = document.getElementById('SlideShow1'); image.src = 'img/slideshow/img_1-'+i+'.jpg'; image.onload = function() { setTimeout(function(){ slideshow.opacity.install('SlideShow1', 'show', 0); }, 250); } image.onerror = function() { image.src = 'img/spacer.gif'; } } // --> slideshow.opacity = {}; // Slideshow installation transparency --> slideshow.opacity.install = function(id, method, value) { obj = document.getElementById(id); opacity = value; if (method == 'show') { slideshow.opacity.show(); } else if (method == 'hide') { slideshow.opacity.hide(); } } // --> // Slideshow transparency show --> slideshow.opacity.show = function() { if (opacity <= 100) { opacity+=2; obj.style.opacity = opacity/100; // for normal browsers --> obj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity*10+')'; // for ie --> setTimeout(arguments.callee, 50); } else { setTimeout(function(){ slideshow.opacity.install('SlideShow1', 'hide', 100); }, 5000); } } // --> // Slideshow transparency hide --> slideshow.opacity.hide = function() { if (opacity >= 0) { opacity-=2; obj.style.opacity = opacity/100; // for normal browsers --> obj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity*10+')'; // for ie --> setTimeout(arguments.callee, 50); } else { slideshow.initial(i+1); } } // --> И сразу линк, на всякий: http://tarik.kasperovich.ru/test_8/index.html Всё работает, но не могу понять, как сделать всё это для нескольких картинок сразу. Делал так: setTimeout(function(){ slideshow.opacity.install('SlideShow1', 'show', 0); slideshow.opacity.install('SlideShow2', 'show', 0); }, 250); по-моему конфликтуют таймауты. Есть функция с таймаутом - я её хочу использовать для разных айдишников. Спасибо.

Про display:table - это я о другой странице. Там без :after - а всё равно прыгает. И как бы это не выход, под каждую отдельную страницу писать и править стиль.

знаю я про дисплей тэйбл. Он тоже не пашет в ие - и так и так зум нужен. P.S. И кстати - из за него тоже прыгает)))) P.P.S. И тоже не на всех страницах. Жесть... =(

А я не могу докопаться, в чём там фишка. Закономерностей нету - поэтому не знаю, как решить...

Ну, это распространенный метод. Можно и оверфлоу - но тогда за блок нельзя будет ничего вытянуть. Я с такой конструкцией никогда проблем не имел. Интересует, почему на одной странице прыгает, а на другой - с такой же версткой - нет?)

да 100%, что дергается... но вот почему - так никто и не ответил)))

Когда страница полностью загружена. Крутим до конца вниз. Наводим на подвал - и резко дергается на пару десятков пикселей вверх. Причём верстка одинакова везде. А дергается - только на этой странице. В чём баг - пока не ясно. в версиях 10.50, 10.60. В 10.00 - всё норм.

А дома есть? Сможешь посмотреть, сказать? У тебя опыт огромный - может ты сходу скажешь, что к чему. Наведи вниз, на подвал. А потом подыми на контент. Дергается?

Да вроде не в этом дело. Сейчас ещё поищу пример. http://www.kasper-hosting.by/hosting/tarify/ - вот тут тоже. Причём только на этой странице...

Ну так в этом и проблема - как узнать, когда она закончилась? Хотел задать флаг. Не получилось... =( Через рекурсию пробовал.

Собственно, часто вижу сайты, в которых в Opera дергается экран. А точнее сказать - поднимается на разное расстояние от низа страницы. последнее, что пришло в голову http://intoishn.ru/webdesign Смотреть в Опере. Сайт не мой, но таких много. Кто-нить сталкивался с таким? Отчего так происходит? Самое интересное то, что на одной странице прыгает, а на другой (с точно такой же структурой по вёрстке) - нет. Сверстал очередной проект - та же проблема. Не могу найти закономерность. Спасибо.

Возможно) Вопрос был про валидность - я привёл примеры.

C события ми всё понятно. так и делаю. вот этого не понял: У меня затемнение идёт одно временно с созданием дива, в который будет загружаться изображение.

rel="nofollow" для гугла. <!--noindex-->текст, индексирование которого нужно запретить<!--/noindex--> - для Ядекса

На самом деле так и получается - три разные функции, вызываются одна за одной. Но так как первая идёт с таймаутом - получается, что вторая начинает работу быстрее первой. А надо именно подряд.

Если нельзя сделать паузу - как тогда делают в лайтбоксах, что вначале они затемняются, только потом появляются изображения, и только потом - центрируются? Там же как то вся по порядку идёт, друг за другом, по цепочке. Сначала одно, потом второе и т.д.

Где-то читал, что типо циклом можно замутить то, что мне нужно. Но так и не понял, как? O_o