Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2013, 10:29
Новичок на форуме
Отправить личное сообщение для J.Strannik Посмотреть профиль Найти все сообщения от J.Strannik
 
Регистрация: 08.07.2013
Сообщений: 6

Двойная полоса прокрутки images не работает - HELP!
Есть проблема, решения найти не могу, хотя решение понимаю что есть...
Задача сделать в одной таблице две полосы прокрутки!
Использовал любезно предоставленный скрипт с сайта: SDWS
Тут всё понятно и просто, и одна полоса работает отлично...
Но не могу разобраться как переделать скрипт и где именно правильно вставить идентификаторы что-бы появилась мультифункциональность?

Просто поменять
<div id="photos">
не даёт результат с учётом смены АйдИ в строке скрипта
var obj = document.getElementById('photos');


Подскажите прошу...
Внешний вид того, что пытаюсь сделать на СТРАНИЧКЕ
Хочу что-бы можно было прокручивать в разные стороны и цветы и вазоны...
Что делать?
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2013, 10:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Загляни в консоль ошибок:
Цитата:
FB.getLoginStatus() called before calling FB.init(). all.js:55
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th...es/bg-page.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th.../bg-inner1.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th.../bg-inner2.png
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
2
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
4
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
9
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
2
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2013, 10:52
Новичок на форуме
Отправить личное сообщение для J.Strannik Посмотреть профиль Найти все сообщения от J.Strannik
 
Регистрация: 08.07.2013
Сообщений: 6

Это да. Но вопрос как переделать предлагаемый СКРИПТ, что-бы работало одновременно 2 полосы прокруток ИЗОБРАЖЕНИЙ!
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2013, 11:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

J.Strannik,
заменить тупо все переменные и названия функций и id
но лучше найдите плагин карусели -- этот скрипт не критичен к множественному запуску

Последний раз редактировалось рони, 08.07.2013 в 11:08.
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2013, 11:10
Новичок на форуме
Отправить личное сообщение для J.Strannik Посмотреть профиль Найти все сообщения от J.Strannik
 
Регистрация: 08.07.2013
Сообщений: 6

Заменить "ТУПО" идея не плохая! Но именно так менял и ни чего не вышло! )

Нужно же не весь скрипт дублировать, а только его часть и в ней менять АйДи, но какие?
И какую часть скрипта копировать?
var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
 
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
 
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}
Ответить с цитированием
  #6 (permalink)  
Старый 08.07.2013, 11:14
Новичок на форуме
Отправить личное сообщение для J.Strannik Посмотреть профиль Найти все сообщения от J.Strannik
 
Регистрация: 08.07.2013
Сообщений: 6

С учётом того, что переменных в самой таблице не так и много?!?!
<a  onmouseout="clearInterval(Timer);" onmouseover="ScrollBrands(-2);">
   <img src="arrow.gif" alt='<' border='0' width='20' height='128'>
   </a>  
  </td>
  <td>
   <div id="photos" class="pictures">

Создавай другую строку , меня АйДи "photos" на другой, и копируя два разу верхний скрипт меняя только переменную "photos" не даёт результата, и вообще скрипт перестаёт работать ((
Ответить с цитированием
  #7 (permalink)  
Старый 08.07.2013, 11:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

J.Strannik,Timer currentID Rotate 'photos' ScrollBrands SetCenter везде на новое
Ответить с цитированием
  #8 (permalink)  
Старый 08.07.2013, 11:18
Новичок на форуме
Отправить личное сообщение для J.Strannik Посмотреть профиль Найти все сообщения от J.Strannik
 
Регистрация: 08.07.2013
Сообщений: 6

рони, Если не сложно, укажите пример с произвольными айди на при примере
var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
 
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
 
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}
Ответить с цитированием
  #9 (permalink)  
Старый 08.07.2013, 12:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<style>
        body{
            text-align: center;
        }
        .scroller{
            margin-bottom: 10px;
        }
	.scroll-area{
		width: 700px;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
	}
	.scroll-control{
		height: 230px;
		line-height: 230px;
		display: inline-block;
		vertical-align: middle;
		border: 1px solid #ccc;
		padding: 0 10px;
	}
</style>
<div class="scroller" id="scroller1">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<div class="scroller" id="scroller2">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<script>
var Scroller = function(container) {
	this.container = container;
	this.buttons = container.querySelectorAll('.scroll-control');
	this.element = container.querySelector('.scroll-area');
	this.timerId = null;
	var scroller = this;
	for (var i = 0; i < this.buttons.length; i++) {
		this.buttons[i].onmouseover = function() {
			scroller.start(this.getAttribute('data-step')|0);
		};
		this.buttons[i].onmouseout = function() {
			scroller.stop();
		};
	}
};
Scroller.prototype = {
    start: function(step) {
        var scroller = this;
        this.stop();
        this.timerId = setInterval(function(){
            if (!scroller._scroll(step))
                this.stop();
        });
    },
    stop: function() {
        clearInterval(this.timerId);
    },
    _scroll: function(step) {
        var scrollLeft = this.element.scrollLeft;
        this.element.scrollLeft += step;
        return this.element.scrollLeft - scrollLeft;
    }
};
</script>
<script>
	new Scroller(document.getElementById('scroller1'));
	new Scroller(document.getElementById('scroller2'));
</script>
Ответить с цитированием
  #10 (permalink)  
Старый 08.07.2013, 12:38
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

К слову сайт не влазиит на экран 1024px, а дизайн чуть более чем уныл. Это так, для поднятия настроения )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена значения в store страно работает I3ev ExtJS 0 09.12.2012 14:22
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03
Динамическая HTML форма (FireFox - работает, IE - не работает) dm1tr1y Общие вопросы Javascript 10 11.12.2009 15:59
Полоса прокрутки popov654 Общие вопросы Javascript 3 10.01.2009 21:30