1) Есть див (d1), в нём другой див(d2) и в этом диве есть элемент (картинка допустим). 2) Картинка имеет по отношению к (d2) значение css допустим left: 20px; 3) (d2) движется горизонтально в (d1). Вопрос, как узнать координаты картинки по отношению к (d1)? Юзаю jQuery $("#...").css("left") - он выдаёт координаты к родительскому элементу, а мне нужно к родителю родителя. Хэлп, плисссс
Не, эта конструкция $("#elem_id").parent() тоже что и $("#parent_elem_id"). Буду пробовать перебирать все элементы в d2, складывать их ширину с маржинами и прочим пока не доберусь до искомого элемента, потом рассчитаю на сколько сдвинут d2 и по разнице найду координаты нужного элемента. Короче изврат, и не универсально. Ну, надежда что вдруг появяться отцы и скажут таки как этого добиться "лёгким росчерком пера" пока не исчезает.
Не, это тоже не то. Я таким образом получаю очередного родителя. Но для меня это не проблема, все ID я итак знаю. Суть вопроса в общем такая. Я делаю галлерею типа: http://coffeescripter.com/code/ad-gallery/ К сожалению из тех галлерей что я знаю у всех присутствует недостаток: нет динамического изменения размеров и пропорций. Моя галлерея будет выглядеть одинаково что на 2900х1500 что 320х200 (тока всё будет микроскопическим в последнем случае). Что ещё меня парит в галлереях - пятьсот миллиардов дивов, списков вложенных друг в друга, css на десятки строк. Бред. Я обошёлся тремя дивами и 15 строчками стилей. Короче сорри за лирику. И вот всё было хорошо, но я столкнулся с такой проблемой. В эту галлерею в качестве иконок в нижний див загружаются неизвестные мне изображения в неизвестном количестве. Нижний див прокручивается влево-вправо через onmousexxx. Когда остановить прокрутку вправо - выяснить до безобразия просто. А вот когда остановить прокрутку влево, как узнать что последняя фотка справа появилась на экране и прокрутку нужно заблокировать? И главное как это сделать красиво, а не наговнокодить сотни строк, надеясь что в .js этого никто не увидит?
Нужно знать длину дива и длину "окна". Можно посадить onload на изображения внутри этого дива и пересчитывать его длину на каждом срабатывании.
ЗЫ: без кучи кодинга с такой задачей - не обойтись. У меня подобная затея вылилась в тысячу строчек JS кода.
Кстати насчет длины дива. Я пытался сделать её динамически раширяющейся по мере добавления фоток-тумбсов. Тогда было бы очень легко рассчитать момент остановки. Но верхний див-контейнер блокировал расположение фоток по одной линии и соответственно длина дива для тумбсов была по ширине верхнего дива-контейнера, а фотки тупо переносились вертикально. Короче я парился-парился, выставил ширину дива 9000 px. Всё стало нормально, но тут и возник вопрос когда остановить скроллинг влево.
Я же ответил >посадить onload на изображения внутри этого дива и пересчитывать его длину на каждом срабатывании А если ширина превьюх фиксирована - то еще проще = число превьюх на ширину + бордеры/маржины/паддинги
Как всё сложно. И всё от того, что не охота ещё один "лишний" контейнер положить в твой 9000-пиксельный? PS. .. только не div, конечно
Любой контейнер. Прописать ему стиль display:inline-block;, и по его ширине узнать, сколько пикселей занял ряд картинок. Потом контейнеру, у которого есть прокрутка (overflow:auto, скриптом можно менять scrollLeft, или как ты там прокручиваешь?.. HTML: <html> <head> <title>title</title> <style type="text/css"> #container{ position:relative; width:600px; height:150px; overflow:auto; } #listDiv{ position:relative; width:9000px; border:1px solid red; } #ul{ position:relative; left:0; top:0; display:inline-block; overflow:hidden; padding:0; border:1px solid blue; } li { float:left; padding-right:5px; list-style:none outside; } </style> </head> <body> <div id="container"> <div id="listDiv"> <ul id="ul"> <li><a href="http://coffeescripter.com/code/ad-gallery/images/1.jpg"><img alt="1.jpg" title="1.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t1.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/10.jpg"><img alt="10.jpg" title="10.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t10.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/11.jpg"><img alt="11.jpg" title="11.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t11.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/12.jpg"><img alt="12.jpg" title="12.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t12.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/7.jpg"><img alt="7.jpg" title="7.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t7.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/8.jpg"><img alt="8.jpg" title="8.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t8.jpg"></a></li> <li><a href="http://coffeescripter.com/code/ad-gallery/images/9.jpg"><img alt="9.jpg" title="9.jpg" src="http://coffeescripter.com/code/ad-gallery/images/thumbs/t9.jpg"></a></li> </ul> </div> </div> <input type="button" value="до конца >>" onclick="var blockW=document.getElementById('ul').clientWidth;document.getElementById('container').scrollLeft=(blockW-600);"> </body> </html>
Проблема в том, что ширина будет зависеть от стадии загрузки картинок. Нужно или прописывать им жестко ширину заранее, или если она неизвестна - ловить момент, когда все картинки загрузятся.
Сэнки всем за помощь в каком направлении копать. У меня две стрелки по краям превьюшeк: HTML: <img id="toursThumbsLeftArr" src="images/thumbsLeftArr.png" onmouseover='LetsScroll = window.setInterval("slideToursThumbs(true)", 50);' onmouseout=' window.clearInterval(LetsScroll); ' /> <img id="toursThumbsRightArr" src="images/thumbsRightArr.png" onmouseover='LetsScroll = window.setInterval("slideToursThumbs(false)", 50);' onmouseout=' window.clearInterval(LetsScroll); ' /> А это функция которая двигает див влево-вправо: [js]function slideToursThumbs(moveLeft) { var pos=parseInt($("#thumbslider").css("left"),10); $("#thumbslider").css("left", (moveLeft ? pos<0 ? pos+10 : {} : pos-10)+"px"); }[/js]
Сделал. Вдруг если кому будет интересно, то я использовал .offset(). Строку которую я загружаю в див с превьюшками формирует PHP скрипт. Формат такой: HTML: <img class="thumbsPix" onclick="showLargePix(this)" src="../Galleries/Tours/t1/thumbs/1.jpg" /> <img class="thumbsPix" onclick="showLargePix(this)" src="../Galleries/Tours/t1/thumbs/2.jpg" /> <img class="thumbsPix" onclick="showLargePix(this)" src="../Galleries/Tours/t1/thumbs/3.jpg" /> . . . . . . . . . . . . . В конце скрипт добавляет невидимую никому (кроме американских спецслужб ) 2х2 альфа-гифку. HTML: <img id="StopScrollMe" class="thumbsPix" src="aboutHTML/alpha.gif" /> а в функцию которую я привел выше добавляется строка (nr. 3), которая проверяет через оффсет если абсолютная позиция гифки не выползла в видимую область контейнера : [js]function slideToursThumbs(moveLeft) { var pos=parseInt($("#thumbslider").css("left"),10); if ($("#StopScrollMe").offset().left<($("#ToursScr").offset().left+$("#ToursScr").width())) pos+=10; $("#thumbslider").css("left", (moveLeft ? pos<0 ? pos+10 : {} : pos-10)+"px"); }[/js]
Хорошая идея, молодца. Можно в принципе и без доп. картинки, типа ".thumbsPix:last".offset.left + ".thumbsPix:last".width, но твой вариант лучше по производительности - поиск по ID быстрее всего.