нужна помощь по javascript

svip · 30 Мар 2008

Испольую скрипты mootools+iCarousel+jd.gallery.v2
но не получается его вложить в див.

Если отдельно пускаю - то работает:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
<head>
<title></title>

<link type="text/css" rel="stylesheet" href="css/this.css"></link>
<link rel="stylesheet" href="css/jd.gallery.v2.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mootools.v1.1.js"></script>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/iCarousel.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

<script src="js/mootools.v1.11.js" type="text/javascript"></script>
<script src="js/HistoryManager.js" type="text/javascript"></script>
<script src="js/jd.gallery.v2.js" type="text/javascript"></script>
<script src="js/jd.gallery.transitions.js" type="text/javascript"></script>

<script type="text/javascript">

window.addEvent("domready", function() {
//new Accordion($$(".accordion_toggler"), $$(".accordion_content"));

dp.SyntaxHighlighter.HighlightAll("usage");

var Carousel = new iCarousel("content", {
idPrevious: "previous",
idNext: "next",
idToggle: "undefined",
item: {
klass: "item",
size: 560
},
animation: {
type: "scroll",
duration: 1000,
amount: 1
}
});

$("thumb0").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0)});
$("thumb1").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(1)});
$("thumb2").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(2)});
$("thumb3").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(3)});
});

</script>

</head>
<body>
<div class="logo"> </div>
<div class="bg"> </div>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick download" href="" id="thumb0"><span>Download now</span></a></li>
<li><a class="kwick documentation" href="" id="thumb1"><span>Documentation</span></a></li>
<li><a class="kwick blog" href="" id="thumb2"><span>The Blog</span></a></li>
<li><a class="kwick trac" href="" id="thumb3"><span>Keep Trac</span></a></li>
</ul>
</div>

<div id="container">
<div id="container_bd" align="center">
<div id="svip" align="left">
<ul id="content">
<li class="item">
<div id="co">
<div align="center">
<b style="color:9F4000">Создание сайтов: </b> </div> <div style="margin-left: 10px;"> <p>     Создание web-сайта и раскрутка его в Интернете - один из самых эффективных способов развития бизнеса с нуля и привлечения новых и главное целевых клиентов для уже существующей и стремящейся к развитию компании. <p>     Мы профессионально разработаем для Вашей организации web-сайт от простого сайта визитки до Интернет-магазина или портала любой сложности и осуществим дальнейшую поддержку.
<p>     Создание сайта - это кропотливый процесс, требующий комплексного и командного подхода целого звена специалистов: web-дизайнера, программиста, оптимизатора, верстальщика. <p>     Создание сайта в нашей компании начинается с детального изучения Ваших пожеланий по дизайну и структуре сайта, а так же особенностей и потребностей сайта для практических целей в соответствии с деятельностью Вашей организации. <p>
</div>
</div></li>
<li class="item">
<div id="co">
текст
</div>
</li>
<li class="item">
<div id="co">
1 Создание web-сайта и раскрутка его в Интернете - один из
самых эффективных способов развития бизнеса с нуля и
привлечения новых и главное целевых клиентов для уже
существующей и стремящейся к развитию компании.
Мы профессионально разработаем для Вашей организации web-сайт
от простого сайта визитки до Интернет-магазина или портала
любой сложности и осуществим дальнейшую поддержку.
</div>
</li>
<li class="item">
<div id="co">
3 Создание web-сайта и раскрутка его в Интернете - один из
самых эффективных способов развития бизнеса с нуля и
привлечения новых и главное целевых клиентов для уже
существующей и стремящейся к развитию компании.
Мы профессионально разработаем для Вашей организации web-сайт
от простого сайта визитки до Интернет-магазина или портала
любой сложности и осуществим дальнейшую поддержку.
</div>
</li>
</ul>

</div>
</div>

<a id="previous" href="#left"><span>←</span></a>
<a id="next" href="#right"><span>→</span></a>
</div>

<div class="content">
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
useHistoryManager: true,
defaultTransition: "fadeslideleft"
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="gallery-images/item-1/" title="open image" class="open"></a>
<img src="images/77196_6784-gallery.jpg" class="full" alt="Item 1 Title" />
<img src="images/77196_6784-mini.jpg" class="thumbnail" alt="thumbnail of Item 1 Title" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="gallery-images/item-2/" title="open image" class="open"></a>
<img src="images/165392_5486-gallery.jpg" class="full" alt="Item 2 Title" />
<img src="images/165392_5486-mini.jpg" class="thumbnail" alt="thumbnail of Item 2 Title" />
</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="gallery-images/item-3/" title="open image" class="open"></a>
<img src="images/83808_7948-gallery.jpg" class="full" alt="Item 3 Title" />
<img src="images/83808_7948-mini.jpg" class="thumbnail" alt="thumbnail of Item 3 Title" />
</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="gallery-images/item-4-title/" title="open image" class="open"></a>
<img src="images/87914_9172-gallery.jpg" class="full" alt="Item 4 Title" />
<img src="images/87914_9172-mini.jpg" class="thumbnail" alt="thumbnail of Item 4 Title" />
</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="gallery-images/item-5-title/" title="open image" class="open"></a>
<img src="images/150103_4500-gallery.jpg" class="full" alt="Item 5 Title" />
<img src="images/150103_4500-mini.jpg" class="thumbnail" alt="thumbnail of Item 5 Title" />
</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="gallery-images/item-6-title/" title="open image" class="open"></a>
<img src="images/78130_1037-gallery.jpg" class="full" alt="Item 6 Title" />
<img src="images/78130_1037-mini.jpg" class="thumbnail" alt="thumbnail of Item 6 Title" />
</div>
<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="gallery-images/item-7-title/" title="open image" class="open"></a>
<img src="images/73831_3266-gallery.jpg" class="full" alt="Item 7 Title" />
<img src="images/73831_3266-mini.jpg" class="thumbnail" alt="thumbnail of Item 7 Title" />
</div>

</div>

</div>

</body>
</html>

если вкладываю вот так, то не работает:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
<head>
<title></title>

<link type="text/css" rel="stylesheet" href="css/this.css"></link>
<link rel="stylesheet" href="css/jd.gallery.v2.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mootools.v1.1.js"></script>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/iCarousel.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

<script src="js/mootools.v1.11.js" type="text/javascript"></script>
<script src="js/HistoryManager.js" type="text/javascript"></script>
<script src="js/jd.gallery.v2.js" type="text/javascript"></script>
<script src="js/jd.gallery.transitions.js" type="text/javascript"></script>

<script type="text/javascript">

window.addEvent("domready", function() {
//new Accordion($$(".accordion_toggler"), $$(".accordion_content"));

dp.SyntaxHighlighter.HighlightAll("usage");

var Carousel = new iCarousel("content", {
idPrevious: "previous",
idNext: "next",
idToggle: "undefined",
item: {
klass: "item",
size: 560
},
animation: {
type: "scroll",
duration: 1000,
amount: 1
}
});

$("thumb0").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0)});
$("thumb1").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(1)});
$("thumb2").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(2)});
$("thumb3").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(3)});
});

</script>

</head>
<body>
<div class="logo"> </div>
<div class="bg"> </div>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick download" href="" id="thumb0"><span>Download now</span></a></li>
<li><a class="kwick documentation" href="" id="thumb1"><span>Documentation</span></a></li>
<li><a class="kwick blog" href="" id="thumb2"><span>The Blog</span></a></li>
<li><a class="kwick trac" href="" id="thumb3"><span>Keep Trac</span></a></li>
</ul>
</div>

<div id="container">
<div id="container_bd" align="center">
<div id="svip" align="left">
<ul id="content">
<li class="item">
<div id="co">
<div align="center">
<b style="color:9F4000">Создание сайтов: </b> </div> <div style="margin-left: 10px;"> <p>     Создание web-сайта и раскрутка его в Интернете - один из самых эффективных способов развития бизнеса с нуля и привлечения новых и главное целевых клиентов для уже существующей и стремящейся к развитию компании. <p>     Мы профессионально разработаем для Вашей организации web-сайт от простого сайта визитки до Интернет-магазина или портала любой сложности и осуществим дальнейшую поддержку.
<p>     Создание сайта - это кропотливый процесс, требующий комплексного и командного подхода целого звена специалистов: web-дизайнера, программиста, оптимизатора, верстальщика. <p>     Создание сайта в нашей компании начинается с детального изучения Ваших пожеланий по дизайну и структуре сайта, а так же особенностей и потребностей сайта для практических целей в соответствии с деятельностью Вашей организации. <p>
</div>
</div></li>
<li class="item">
<div id="co">

<div class="content">
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
useHistoryManager: true,
defaultTransition: "fadeslideleft"
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="gallery-images/item-1/" title="open image" class="open"></a>
<img src="images/77196_6784-gallery.jpg" class="full" alt="Item 1 Title" />
<img src="images/77196_6784-mini.jpg" class="thumbnail" alt="thumbnail of Item 1 Title" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="gallery-images/item-2/" title="open image" class="open"></a>
<img src="images/165392_5486-gallery.jpg" class="full" alt="Item 2 Title" />
<img src="images/165392_5486-mini.jpg" class="thumbnail" alt="thumbnail of Item 2 Title" />
</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="gallery-images/item-3/" title="open image" class="open"></a>
<img src="images/83808_7948-gallery.jpg" class="full" alt="Item 3 Title" />
<img src="images/83808_7948-mini.jpg" class="thumbnail" alt="thumbnail of Item 3 Title" />
</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="gallery-images/item-4-title/" title="open image" class="open"></a>
<img src="images/87914_9172-gallery.jpg" class="full" alt="Item 4 Title" />
<img src="images/87914_9172-mini.jpg" class="thumbnail" alt="thumbnail of Item 4 Title" />
</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="gallery-images/item-5-title/" title="open image" class="open"></a>
<img src="images/150103_4500-gallery.jpg" class="full" alt="Item 5 Title" />
<img src="images/150103_4500-mini.jpg" class="thumbnail" alt="thumbnail of Item 5 Title" />
</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="gallery-images/item-6-title/" title="open image" class="open"></a>
<img src="images/78130_1037-gallery.jpg" class="full" alt="Item 6 Title" />
<img src="images/78130_1037-mini.jpg" class="thumbnail" alt="thumbnail of Item 6 Title" />
</div>
<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="gallery-images/item-7-title/" title="open image" class="open"></a>
<img src="images/73831_3266-gallery.jpg" class="full" alt="Item 7 Title" />
<img src="images/73831_3266-mini.jpg" class="thumbnail" alt="thumbnail of Item 7 Title" />
</div>

</div>

</div>

</div>
</li>
<li class="item">
<div id="co">
1 Создание web-сайта и раскрутка его в Интернете - один из
самых эффективных способов развития бизнеса с нуля и
привлечения новых и главное целевых клиентов для уже
существующей и стремящейся к развитию компании.
Мы профессионально разработаем для Вашей организации web-сайт
от простого сайта визитки до Интернет-магазина или портала
любой сложности и осуществим дальнейшую поддержку.
</div>
</li>
<li class="item">
<div id="co">
3 Создание web-сайта и раскрутка его в Интернете - один из
самых эффективных способов развития бизнеса с нуля и
привлечения новых и главное целевых клиентов для уже
существующей и стремящейся к развитию компании.
Мы профессионально разработаем для Вашей организации web-сайт
от простого сайта визитки до Интернет-магазина или портала
любой сложности и осуществим дальнейшую поддержку.
</div>
</li>
</ul>

</div>
</div>

<a id="previous" href="#left"><span>←</span></a>
<a id="next" href="#right"><span>→</span></a>
</div>

</body>
</html>

Подскажите как вложить. в чем я ошибся???

svip · 31 Мар 2008

Народ помогите. уже все методы перепробовал. Ничего не могу понять. В чем загвоздка.

ggRay · 31 Мар 2008

вообще радует, что это как бы твой заработок

слей в архив - завтра посмотрю локально

svip · 31 Мар 2008

Да это я для своего сайта делаю

архив

Pretender · 1 Апр 2008

не смог открыть ни одну ссылку сам работаю над sideblog.gaphost.com юзаем чуть другую схему для использования карусели.

ggRay · 1 Апр 2008

борда не работала, когда я был свободен, так что на завтра, если терпит...

ggRay · 2 Апр 2008

ээх RTFM, svip читаем и ещё раз читаем доки, если изучать все те компоненты которые используешь можно обнаружить, что iCarousel не просто делает перемотку, а клонирует DOM для прокручиваемых элементов, следовательно при таком использовании у тебя на странице будет несколько элементов которые отображают твою галлерею, т.е. использование id неуместно, поэтому меняем:
Код
<div id="myGallery">
на Код
<div class="myGallery">
далее не забываем что дефолтом описан этот id, поэтому в своём CSS пишем класс для галереи:
Код
.myGallery {
border:1px solid #000000;
height:345px;
width:460px;
}

и соотвественно нужно переписать скрипт инициирующий галерею на DOM объектах:
Код
function startGallery() {

$$('div.myGallery').each(function(item, index){
new gallery(item, {
timed: false,
useHistoryManager: true,
defaultTransition: "fadeslideleft"
});

});
}

и опять же, не забываем, что функция должна выполняться уже на существующем доме, клонированном первым вызовом iCarousel, т.е. нужно вызвать уже позже.

в атаче только исправленные файлы.

svip · 2 Апр 2008

спасибо большое. в javascript я новичек

вот и учусь.

ggRay · 2 Апр 2008

svip
ну судя по сайту, ещё и в вёрстке сайтов новичёк,
советую сначала разобраться с CSS+HTML и нативный JavaScript понять, а потом уже использовать сложные контролы, осознавая принцип их работы.

и читать документацию в конце концов

)))
удачи

svip · 2 Апр 2008

Так сайт то еще не готов. да и не верстал еще ничего.

только библиотеку прикрутил и все.

ggRay · 3 Апр 2008

svip
я говорю о том кошмаре который находится тут _http://svip-www.net.ru , с основной идеей - "мы разрабатываем сайты", даже смешно, честно

svip · 3 Апр 2008

Согласен. там брака дофига, т к сайт этот был сделан в 2003 году и ничего там никто не переделывал

времени не было. Вот делаем новый и с Божей и с Вашей помошью надеюсь будет он уже на уровне

Еще раз спасибо за помощь и за критику. Будем развиваться.

P.S. Вопрос решен. тему можно закрывать.

ggRay · 3 Апр 2008

svip
удачи

svip · 9 Апр 2008

И снова возникла проблема. не получается выполнить document.getElementById('ans').innerHTML ="текст";
Вставляю в вышеприведенном коде в контейнер <div id="co">:
<div id="ans" style="border:1px solid #000; padding:2px">12345
</div>

по нажатию кнопки делаю document.getElementById('ans').innerHTML ="текст";
но текст в контейнере не меняется.
если сделать по нажатию кнопки так:
Код

alert(document.getElementById('ans').innerHTML);
document.getElementById('ans').innerHTML ="текст";

то при первом нажатии выскакивает окно с тестом "12345"
при втором и далее нажатиях - с текстом "текст", но на самой стринице "12345" на "текст" не меняется.

Подскажите как быть. понимаю что вопрос идентичный предыдущему, но не совсем понял как привязаться к классу а не к id

ggRay · 9 Апр 2008

svip
в вашем вопросе содержится и ответ, что тут непонятного?

ну нельзя с такими компонентами использовать контейнеры с id
а делаем собственно как и подсказал:
Код

<div class="ans" style="border:1px solid #000; padding:2px">12345
</div>

Код

$$('div.ans').each(function(item, index){
item.innerHTML = 'текст';
});

svip · 10 Апр 2008

ага понял в чем была ошибка. Спасибо

svip · 5 Июн 2008

Опять проблемы с клонированием:
Есть (и работает):
Код
<script type=\"text/javascript\">
function startGallery()
{
var portfolio = new gallery($('portfolio'), {
timed: false,
useHistoryManager: true,
defaultTransition: \"fadeslideleft\"
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
</script>

и

Код
<div id="portfolio">

<div class="imageElement">
<h3>имя1</h3>
<p align="left">Описание</p>
<a href="foto2.jpg" style="cursor: hand;" class="open"></a>
<img src="/templates/mini_foto.php?mini_foto=foto2.jpg&size=760" class="full" alt="Item 1 Title" />
<img src="/templates/mini_foto.php?mini_foto=foto2.jpg&size=150" class="thumbnail" alt="123" />
</div>

<div class="imageElement">
<h3>имя2</h3>
<p align="left">Описание</p>
<a href="foto1.jpg" style="cursor: hand;" class="open"></a>
<img src="/templates/mini_foto.php?mini_foto=foto1.jpg&size=760" class="full" alt="Item 1 Title" />
<img src="/templates/mini_foto.php?mini_foto=foto1.jpg&size=150" class="thumbnail" alt="123" />
</div>

</div>

Переделываю( и не работает):

Код
<script type="text/javascript">
function startGallery() {
$$('div.portfolio').each(function(imageElement, index){
new gallery(portfolio, {
timed: false,
useHistoryManager: true,
defaultTransition: "fadeslideleft"
});
});

HistoryManager.start();
}

window.addEvent('domready', startGallery);
</script>

Код
<div class="portfolio">

<div class="imageElement">
<h3>имя1</h3>
<p align="left">Описание</p>
<a href="foto2.jpg" style="cursor: hand;" class="open"></a>
<img src="/templates/mini_foto.php?mini_foto=foto2.jpg&size=760" class="full" alt="Item 1 Title" />
<img src="/templates/mini_foto.php?mini_foto=foto2.jpg&size=150" class="thumbnail" alt="123" />
</div>

<div class="imageElement">
<h3>имя2</h3>
<p align="left">Описание</p>
<a href="foto1.jpg" style="cursor: hand;" class="open"></a>
<img src="/templates/mini_foto.php?mini_foto=foto1.jpg&size=760" class="full" alt="Item 1 Title" />
<img src="/templates/mini_foto.php?mini_foto=foto1.jpg&size=150" class="thumbnail" alt="123" />
</div>

</div>

Подскажите где напорол?

ggRay · 6 Июн 2008

вот этот кусок в вашем коде не в тему:
Код
$$('div.portfolio').each(function(imageElement, index){
new gallery(portfolio, {...

нужно соотвественно
Код
$$('div.portfolio').each(function(portfolioInst, index){
new gallery(portfolioInst, {

как совет - называйте переменные своими именами, а то у вас перепутаны названия классов и названия переменных

да и ещё раз - прочитайте книги по JS, ведь кусок кода:
Цитата
new gallery(portfolio, {...
совсем не должен работать

нужна помощь по javascript

svip

Местный житель

svip

Местный житель

ggRay

серый наблюдатель

svip

Местный житель

Pretender

Местный житель

ggRay

серый наблюдатель

ggRay

серый наблюдатель

Вложения

svip

Местный житель

ggRay

серый наблюдатель

svip

Местный житель

ggRay

серый наблюдатель

svip

Местный житель

ggRay

серый наблюдатель

svip

Местный житель

ggRay

серый наблюдатель

svip

Местный житель

svip

Местный житель

ggRay

серый наблюдатель