[CAst]

Добрый день. Подскажите, как решить такую проблему:

Есть страница на которой меняется контент методом innerHTML. Внутри блоков, которые сменяют друг друга имеется одинаковые галереи только с разными изображениями. Если зайти на страницу, то галерея работает нормально, но если нажать на кнопку и тем самым изменить контент методом innerHTML, то новые галереи перестают работать. Вот код:

Код HTML:

<script type="text/javascript"> 
$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7
	});
});
</script> <div id='conten'></div> // Блок в котором меняется содержимое


<img src='' onclick='toggle("form1");'">   // Кнопка для замены содержимого 1
<img src='' onclick='toggle("form2");'">   // Кнопка для замены содержимого 2


<div id='form1' style='display: none'> ГАЛЕРЕЯ 1 </div>   // Содержимое 1
<div id='form2' style='display: none'> ГАЛЕРЕЯ 2 </div>   // Содержимое 2


<script type='text/javascript'> 
  function toggle(id) {  
  document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;  
  }  
  toggle("form1");  
</script>

[bestxp]

CAst,

Ну могу подсказать, если ты меняешь содержимое через innerHTML то все события привязанныек элементам сбрасываются, за исключением тех у которых явно прописано через onclick и подобные

Первый вариант, не заменять через innerHTML, а просто менять display:block у того элемента что скрыт, и прятать тот элемент который у тебя активен.

То есть получиться у тебя нечто подобное

Код HTML:

<a href='#form1' class='galleryShow'><img src='' ></a>   // Кнопка для замены содержимого 1
<a href='#form2' class='galleryShow'><img src='' ></a>     // Кнопка для замены содержимого 2


<div id='form1' clas='gallery hidden'> ГАЛЕРЕЯ 1 </div>   // Содержимое 1
<div id='form2' style='gallery hidden'> ГАЛЕРЕЯ 2 </div>   // Содержимое 2

<script type='text/javascript'> 
  $('.galleryShow').click(function(e){ 
     e.preventDefault(); // Не дергаем страницу при клике на ссылку с якорем
     var galleryId = $(this).prop('href'); // получаем ID галереи
     $('.gallery').hide(); //Скрываем все галлереи
     $(galleryId).show(); //Показываем ту которую ты кликнул

 })
</script>

В итоге у тебя просто скрывается и возвращается

Если это не решает проблемы и ты захочешь грузить ajax данные
то тебе придется смотреть в сторону $.delegate у jQuuery , который я как смотрю ты используешь по плагину

[evpatiy]

CAst,

Мои глаза

Если честно плохо понятно, что у вас не работает. Точнее почему не работает но для начала я бы посоветовал вам если вы используете библиотеку jquery, вместо innerHTML, у джейквери есть метод $('#id').html('<h1>липучка</h1>');
Также есть такие методы как создать элемент и затем к нему прикрепить как "append" и подобные.

Дальше в библиотеке jquery есть уже готовый метод "toggle" который я бы вам очень советовал использовать (он то и будет скрывать один из элементов(а не удалять) и тогда у вас в "сферическом вакууме" все должно работать хорошо.

А так у вас походу валится, потому что вы удаляете ID и у вас от него отваливаются ивенты, вам надо его скрывать надо, а не удалять... см. абзац выше.

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

[Tairesh]

Если нужно все же перезагружать контент через innerHTML то надо переинициализоровать галерею после каждой перезагрузки.

[cOAPerator]

есть 2 скрипта:

PHP код:

 // datepicker
$(function(){
    $("#datepicker1").datepicker({
        dateFormat:"dd.mm.yy",
        showAnim:"slideDown",
        changeMonth:true,
        changeYear:true,
        constraintInput:true,
        showButtonPanel:true
    });
});
// кнопка наверх
$(function(){
    $("#back-top").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 150) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        $('#back-top a').click(function () {
            $('body,html').animate({scrollTop: 0}, 800);
                return false;
        });
    });
}); 


2 работает только если убрать 1, как быть? нужны оба.

[brainix]

cOAPerator, а так?

код

PHP код:

$(function(){
    $("#back-top").hide();
    $("#datepicker1").datepicker({
        dateFormat:"dd.mm.yy",
        showAnim:"slideDown",
        changeMonth:true,
        changeYear:true,
        constraintInput:true,
        showButtonPanel:true
    });        
    $(window).scroll(function () {
         if ($(this).scrollTop() > 150) {
            $('#back-top').fadeIn();
         } else {
             $('#back-top').fadeOut();
         }
     });
     $('#back-top a').click(function () {
         $('body,html').animate({scrollTop: 0}, 800);
             return false;
     });
}); 


[свернуть]

Если не работает, попробовать убрать из кода $("#back-top").hide(); а уже самому для #back-top через css поставить display:none;

[cOAPerator]

brainix, $("#back-top").hide(); анимирует скрытие, нельзя его убирать. твой вариант не робит.

[brainix]

cOAPerator, $("#back-top").hide(); - скрывает элемент при загрузке страницы.
$('#back-top').fadeOut(); - анимирует скрытие.

[cOAPerator]

Всем привет, есть кто работал с http://api.jqueryui.com/datepicker/ ??

пытаюсь встроить инлайн календарь в страницу, рядом с календарем есть поле с датой.
значение даты в этом поле, меняется при выборе даты в дейтпикере, таким образом:

Код:

onSelect: function(selected,evnt) {
	$('#date').val(selected);
}

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

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

подскажите куда копать?

---------- Сообщение добавлено 01:31 ---------- Предыдущее 00:40 ----------

Нашел решение, точнее сам написал:

Код:

// получаем уже заданную дату в переменную
var date_current = document.getElementById("date").value;

Код:

$(function(){
	var date_current = document.getElementById("date").value;
	$("#datepicker1").datepicker({
		defaultDate: date_current,
		dateFormat:"dd.mm.yy",
		showAnim:"slideDown",
		prevText: '',
		nextText: '',
		changeMonth:true,
		changeYear:true,
		constraintInput:true,
		showButtonPanel:true,
		onSelect: function(selected,evnt) {
			$('#date').val(selected);
		}
	});
});

[DeOne]

cOAPerator, у меня все подсвечивается, да и в демо подсвечивается.