Javascript.RU

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

запомнить позицию
Здравствуйте, уважаемые!
У меня есть прокручиваемый список на javascript(картинки прокручиваются) довольно-таки длинный... при клике на картинку страница перезагружается и на странице выводиться новый контент с этой картинкой... трабл в том, что если прокрутить этот список довольно далеко(а он длинный), то при перезагрузке страницы список возвращается в первоначальное состояние, те если захочешь посмотреть след картинку, тебе придется прокручивать этот список еще тучу времени... так вот... как сделать так, чтобы этот список, при клике на картинку оставался в том же положении?
Похожий пример тут http://www.4thorder.us/Scripts/Scrip...iewerBLACK.htm , и тут http://www.proklondike.com/contentview.php?content=323

вот код:

<div class="spbox">
	<img src="/images/left_arrow.gif" style="position: absolute; left: 0; top: 35px; cursor: pointer;" id="prew" onmousedown="ScrollLeft()" onmouseup="stopscroll()" onmouseout="stopscroll()">
	<img src="/images/right_arrow.gif" style="position: absolute; right: 0; top: 35px; cursor: pointer;" id="next" onmousedown="ScrollRight()" onmouseup="stopscroll()" onmouseout="stopscroll()">
	<div class="spbox_body" id="panorama">
		<ul class="lenta" id="lenta">

		{foreach from=$products item=item key=id}
			<li>
				<a href="/auto/?id_car={$id}&id_categor={$item.id_categor}&special=1">
					<img src="/images/catalog/medium/{if $item.foto1}{$item.foto1}{else}nofoto2.jpg{/if}" width="146" height="94" class="">
					{*<span class="sp_model">{$item.model}</span>*}
					<span class="sp_model">{$item.main_marka}</span>
					<span class="sp_date">{$item.year} г.</span>
					<span class="sp_count">{$item.cost} р.</span>
					<span class="sp_run">{$item.run} км</span>
				</a>
			</li>
		{/foreach}

		</ul>
	</div>
</div>
{literal}
<script type="text/javascript">
var Timer;
		$("#panorama").ready(function(){
			$("ul.lenta li:first").css("margin-left","0")
			var lg = $("ul.lenta li").length;
			var elwidth = $("ul.lenta li").css("width");
			elwidth = elwidth.substring(0, elwidth.length-2);
			var w = (elwidth)*lg+10*lg-10;
			$("ul.lenta").css("width",w+"px");
			checkscroll();
		});
		function ScrollLeft(){
			Timer = setInterval("document.getElementById('panorama').scrollLeft -= 3", 5);
		}
		function ScrollRight(){
			Timer = setInterval("document.getElementById('panorama').scrollLeft += 3", 5);
		}
		function stopscroll(){
			clearInterval(Timer);
			checkscroll();
		}
		function checkscroll(){
			var lenta = document.getElementById('lenta').offsetWidth;
			var spb = document.getElementById('panorama').offsetWidth;
			var sc = document.getElementById('panorama').scrollLeft;
			if($.browser.opera){lenta = lenta+46}
			if ((lenta-spb)==sc)
				$("#next").addClass("opacity")
			else
				$("#next").removeClass("opacity")
			if ((sc)==0)
				$("#prew").addClass("opacity")
			else
				$("#prew").removeClass("opacity")
			//alert(sc+" : "+(lenta-spb));
		}
</script>
{/literal}


Помогите пожалуйста!
Заранее спасибо!=)

Последний раз редактировалось Андрей Параничев, 06.11.2008 в 15:49. Причина: Пользуйтесь bb-кодами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 06.11.2008, 16:24
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

понял, надо с куками работать... Теперь возник вопрос как это правильно сделать?
Я так понимаю надо запомнить в куках ScrollLeft () а потом считать его и дописать в конец ссылки?
Ответить с цитированием
  #3 (permalink)  
Старый 06.11.2008, 16:47
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

можно по идее только номер элемента запоминать.
А потом, взяв из куки этот номер, производить все вычисления и перематывать на него (если картинки по размеру одинаковые, например).
А можно и число пикселей.

Только не забудте при загрузки страницы сделать проверку на наличие кук и выполнить соответствующее действие.

В общем Вы все сами и написали =)
Ответить с цитированием
  #4 (permalink)  
Старый 06.11.2008, 17:46
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

что-то ничего не получается...

сделал 2 функции:
function setCookie (szName, szValue) {
  
            document.cookie = szName + "=" + szValue + ";
        }

и
function getCookie (szName) {
		    var i = 0;
            var nStartPosition = 0;
            var nEndPosition = 0;  
            var szCookieString = document.cookie;
			while(i <= szCookieString.length) 
  {
    nStartPosition = i;
    nEndPosition = nStartPosition + szName.length;

    if(szCookieString.substring( 
        nStartPosition,nEndPosition) == szName) 
    {
      nStartPosition = nEndPosition + 1;
      nEndPosition = 
        document.cookie.indexOf(";",nStartPosition);

      if(nEndPosition < nStartPosition)
        nEndPosition = document.cookie.length;

      return document.cookie.substring( 
          nStartPosition,nEndPosition);  
      break;    
    }
    i++;  
  }
  return "";
  alert(getCookie(ScrollLeft));
		}


что с ними теперь делать - не пойму!=(
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как определить позицию элемента относительно окна scuter Events/DOM/Window 5 07.05.2008 18:47