Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2010, 03:54
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

узнать координаты div и передать их в переменную
всем привет,

в js я начинающий, но есть опыт с actionscript, поэтому не совсем ноль. получить нужно следущее: есть серия div-ов - thumbnails, при клике на каждый из них всплывает соответствующий div поверх всего, где картинка покрупнее и поле с описанием. то есть по сути галерея с lightbox. только ни lightbox, ни fancуbox, ни shadowbox и тд меня как готовые решения не устроили , хочу гибкой адаптации под себя (div должен всплывать, "вырастая" из кликнутого thumbnail, то есть из исходных координат его левого верхнего угла и его начальных width и height). нашел на jquery практически то, что нужно: http://trevordavis.net/play/using-jq...or-a-lightbox/. не знаю только, как задать здесь координаты упомянутые выше.


вот скрипт
$(document).ready(function() {
	$('ul.ornaments a').click(function() {								   
		//Setup the modal window
		$('body').append('<div id="overlay"></div><div id="modal"><div id="modalInner"><a href="#" id="close" title="Close">Close</a><div id="modalImageColumn"></div><div id="modalTextColumn"></div><div class="clearing"></div></div></div>');
		
		if($.browser.msie && $.browser.version <= 6.0) {
			var windowHeight = $(document).height();
			$('#overlay').height(windowHeight);
		}
		
		$('#overlay').css('opacity', 0.5).fadeIn('fast');
		$('#modal').fadeIn('slow');
		
		//Position it in the viewport
		var scrollPos = $(window).scrollTop() + 50;		
		$('div#modal').css('top',scrollPos+'px');
		
		//Handle the clicking of close button or clicking the background
		$('div#modal a#close,div#overlay').bind('click', function() {
			$('div#modal').fadeOut('fast',function() {
				$('div#overlay').fadeOut('fast',function() {
					$(this).remove();							   
				});
				$(this).remove();							   
			});
			return false;
		});	
		
		//Get the image
		var imgUrl = $(this).attr('href');
		$('div#modalImageColumn').append('<img src="'+imgUrl+'" alt="" class="frame" height="400" id="ornament" width="400" />');
		$('img#ornament').load(function() {
			$(this).fadeIn();								
		});
		
		$(this).siblings('.stateDescription').clone().appendTo('div#modalTextColumn');
		
		return false;
	});
});
где через //Position it in the viewport надо вплести координаты кликнутого
ul.ornaments a
. отыскал вот такую хреновину для определения координат:
function findPos(obj) {
	var curleft = curtop = 0;
if (obj.offsetParent) {
do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
но не знаю правильного синтаксиса js. пробовал перед //Position it in the viewport вделать
function findPos(obj) {
	var curleft = curtop = 0;
if (obj.offsetParent) {
do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];

var coordinates = findPos(this)

console.log(coordinates)

}
но ругается сильно. как это верно прописать?

спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2010, 11:56
Аватар для Cr@ZyBoY
Аспирант
Отправить личное сообщение для Cr@ZyBoY Посмотреть профиль Найти все сообщения от Cr@ZyBoY
 
Регистрация: 08.02.2010
Сообщений: 52

dschmitz,
вот именно поэтому надо сначала учить сам язык, а не всякие jquery
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2010, 12:17
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Для расположения элемента от вьюпорта есть position: fixed. Не работает нативно в IE6, правда, но для него есть костыли.
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2010, 12:25
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

@ Cr@ZyBoY:
вот я и хотел узнать такую базовую функцию на будущее. если кто-нибудь не сочтет за труд ответить, это мне прояснит принцип. другое дело, что может ответ нужен обширный. но мне как начинающему эта функция такой базисной кажется.

@ subzey: да, но как послать координату X кликнутого div в переменную?
Ответить с цитированием
  #5 (permalink)  
Старый 16.03.2010, 12:37
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от dschmitz
узнать координаты div
http://javascript.ru/ui/offset

Что вы вообще понимаете под фразой "послать в переменную"?
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2010, 12:49
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

ссылку сейчас посмотрю, спасибо. под "послать в переменную" я имею ввиду передать координату кликнутого div в переменную, которую потом подсунуть окну, отрывающемуся поверх, чтобы его X был таким же.
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2010, 12:51
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от dschmitz
передать координату кликнутого div в переменную
Как и во многих других языках, в JavaScript есть оператор присваивания.
Ответить с цитированием
  #8 (permalink)  
Старый 16.03.2010, 13:12
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

спасибо за ссылку, Kolyaj. выглядит неплохо. буду пробовать...
Ответить с цитированием
  #9 (permalink)  
Старый 16.03.2010, 13:27
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

мерси, Kolyaj. отличный способ с getBoundingClientRect() !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
$.ajax-как передать переменную в данных Dimaz jQuery 1 15.02.2010 16:00
Как передать переменную в handleServerResponse Motoko AJAX и COMET 2 17.07.2009 11:04
Как передать getElementById в качестве параметра переменную? Littleprince Events/DOM/Window 3 19.05.2009 00:18
Узнать keywords и передать на сервер azgard Общие вопросы Javascript 3 30.04.2009 14:42