Javascript-форум - Конфликт двух плагинов

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Конфликт двух плагинов (https://javascript.ru/forum/jquery/30225-konflikt-dvukh-plaginov.html)

Конфликт двух плагинов

http://stilant.ru/skryitie-bloka-s-sohraneniem-v-kuki/
http://www.rudebox.org.ua/timed-noti...ss-animations/

Всем привет. Выше предоставлены ссылки на уроки, их нужно подружить, но дружить видимо не хотят.

посмотрите демо:
http://stilant.ru/wp-content/upload/id40/index.html
http://www.rudebox.org.ua/demo/timed...ss-animations/

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

Уже пытался реализовать, но вместе работать не хотят, помогите их подружить :)

Вот тестовая страница, где я пытался это сделать, чтобы можно было посмотреть исходный код http://myforum2.4adm.ru/index.php?page=1

Vitaliy21,
1. У Вас этот скрипт -стоит дважды - уберите верхний!

<script type="text/JavaScript">
$(document).ready(function (){
var box1 = $.cookie('box1')
if(box1 =='none'){
$('#box1').remove();
}
$('#boxs1').click(function() {
$('#box1').slideUp(1000);
$.cookie('b88ox1', 'none', { expires: 365});
});
});
</script>
<script type="text/JavaScript">
$(document).ready(function (){
var box2 = $.cookie('box2')
if(box2 =='none'){
$('#box2').remove();
}
$('#boxs2').click(function() {
$('#box2').slideUp(1000);
$.cookie('box2', 'none', { expires: 365});
});
});
</script>

Поправленный кусок страницы с нижним скриптом
(*включить куки и убрать бордер (после тестов) - думаю сможете сами!

[HTML]<script type="text/JavaScript">
$(document).ready(function (){
var box1 = $.cookie('box1')
if(box1 =='none'){
$('#box1').remove();
}
$('#boxs1').click(function() {
$('#box1').slideUp(1000);
$.cookie('box1rr', 'none', { expires: 365});
});
});
</script>
<script type="text/JavaScript">
$(document).ready(function (){
var box2 = $.cookie('box2')
if(box2 =='none'){
$('#box2').remove();
}
$('#boxs2').click(function() {
$('#box2').slideUp(1000);
$.cookie('box2', 'none', { expires: 365});
});
});
</script>


        <div class="container">	
<span style="display:inline-block;border:1px solid red">

			<input type="checkbox" class="fire-check" />x ПРИМЕР 
<br>данное уведомление должно появится при закрытии таблички <<<

<div class="box" id="box1" style="margin-top:-23px;position:relative;z-index:23;">
<div class="close" id="boxs1"><input type="checkbox" class="fire-check">x</div>


При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((

</div></span>
			<section>
			
	            <div class="tn-box tn-box-color-1">
					<p>Ваши персональные настройки были успешно сохранены!</p>
					<div class="tn-progress"></div>
				</div>
			</section>
        </div>




<br />
</div>

<!--
	We request you retain the full copyright notice below including the link to www.phpbb.com.
	This not only gives respect to the large amount of time given freely by the developers
	but also helps build interest, traffic and use of phpBB3. If you (honestly) cannot retain
	the full copyright we ask you at least leave in place the "Powered by phpBB" line, with
	"phpBB" linked to www.phpbb.com. If you refuse to include even this then support on our
	forums may be affected.

	The phpBB Group : 2006
//-->

Deff,

спасибо большое :thanks: , но немного не то, Вы наверное не правильно поняли...

Зайдите ещё раз на http://myforum2.4adm.ru/index.php?page=1 и кликните на "х" пример (верху по средине) далее вылезет всплывающие окно которые сообщит о сохранение настроек.

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

Более наглядный пример:

Дело в этом куске кода наверное:

<input type="checkbox" class="fire-check" />x ПРИМЕР 
<br>данное уведомление должно появится при закрытии таблички <<<

<div class="box" id="box1">
<div class="close" id="boxs1">x</div>

Всплывающие уведомление вызывает код

<input type="checkbox" class="fire-check" />x

А это за закрытие таблички которая слева

<div class="box" id="box1">
<div class="close" id="boxs1">x</div>

Пытался обеденить так:

<div class="box" id="box1">
<div class="close" id="boxs1"><input type="checkbox" class="fire-check">x</div>

но табличка просто закрывается без уведомление, я так понял происходить какой-то конфликт, который не дает сработать input внутри div'a и их функциях...

Vitaliy21,
1. Уберите второй дублирующий скрипт сверху -
2. Поставьте временно предложенную замену - вместо текущего куска кода - отпишитесь что не устраивает - поправлю

Цитата:

Сообщение от Deff

1. Уберите второй дублирующий скрипт сверху -
2. Поставьте временно предложенную замену - вместо текущего куска кода - отпишитесь что не устраивает - поправлю

1, 2, - Сделал! После закрытия таблички нужно сделать чтоб на том же месте всплыла на несколько секунд эта табличка и все :)

Vitaliy21,
Не могу открыть сейчас страницу... Отпишитесь как будет иметься возможность

Цитата:

Сообщение от Deff

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

Видимо что-то с сервером было, уже работает!

Vitaliy21,
Я вам еще раз напоминаю -
1. уберите первый дубль скрипта в начале страницы - у Вас два идентичных!

<script type="text/JavaScript">
$(document).ready(function (){
var box1 = $.cookie('box1')
if(box1 =='none'){
$('#box1').remove();
}
$('#boxs1').click(function() {
$('#box1').slideUp(1000);
$.cookie('box1', 'none', { expires: 365});
});
});
</script>
<script type="text/JavaScript">
$(document).ready(function (){
var box2 = $.cookie('box2')
if(box2 =='none'){
$('#box2').remove();
}
$('#boxs2').click(function() {
$('#box2').slideUp(1000);
$.cookie('box2', 'none', { expires: 365});
});
});
</script>

(Он стоит сразу же за подгружаемыми скриптами!

Deff,

Убрал

Vitaliy21,
Не наю, считаю не стоит делать анимацию часть на css - часть на JQ,
Посколь применение скрипта не избежать, а анимация разовая - лучше всё сделать одним модулем
Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jQuery.js"></script>
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jquery.cookie.js"></script>

<style type="text/css">

#CocieBlock1 {
 text-align: center;
 padding:12px;
 margin:0 auto;
}

#CocieBlock1 *{
 margin:0;
 padding:0;
}

#CocieBlock1 .box {
 padding:12px;
 background-color:#C1C1C1;
}

#CocieBlock1 .close {
 line-height:3px;
 width:10px;
 height:10px;
 padding:5px 4px 4px 5px;
 float:right;
 margin-right:0px;
 cursor:pointer;
}

#CocieBlock1 section{
 font-size:17px;
 font-weight:700;
 padding:12px;
 max-width:360px;
 display:none;
}

.box{
 width:500px;
 font: normal normal 400 12px/18px Verdana;
}

.box section hr{
 height:3px;
 padding:0;
}

.tn-box-color-1 {
 max-width:360px;
 text-align: left;
 position:relative;
 background:#FEE791 url(http://s1.uploads.ru/i/MYmFD.png) 12px 50% no-repeat;
 padding:20px 85px 22px 65px!important;
}
.tn-box-color-1 hr{
 position:absolute;
 width:90%;
 margin-top:13px!important;
 left:5%;
 border:#FDFBFD solid 2px;
}
</style>

<script type="text/JavaScript">
$(document).ready(function (){
var box1 = $.cookie('box1')
if(box1 =='none'){
$('#CocieBlock1').remove();
}
$('#boxs1').click(function() {
$('#box1').slideUp(800, function() {
  $('#CocieBlock1 section').slideDown(800,function() {
     setTimeout("$('#CocieBlock1 section').fadeOut(2300)",1500) //.slideUp(2300)",1500) 
     });
  });
//$.cookie('box1', 'none', { expires: 365}); //Временно закомментировал для тестов
});
});
</script>
</head>

<body>


<div id="CocieBlock1" class="container">   
 
  <div class="box" id="box1" >
      <div class="close" id="boxs1">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>






</body>
</html>

Deff,

Супер, то что надо! :dance:

А ещё получится сделать чтоб уведомление через секунд 5 тоже исчезло? (Пример как на JQ http://www.rudebox.org.ua/demo/timed...ss-animations/)

Vitaliy21,
Поправил

Цитата:

Сообщение от Deff

Поправил

Спасибо большое!

Эту строчку можно уже раскоментить?

//$.cookie('box1', 'none', { expires: 365}); //Временно закомментировал для тестов

Я так понимаю это время действия кук в днях?

Vitaliy21,
Да - естественно - для топика закомментировал...

Цитата:

Сообщение от Vitaliy21

Я так понимаю это время действия кук в днях?

Да

Deff,

Скажите, а прогресс бар можно вернуть? А то я смотрю выделенный кусок Вы из css убрали...

Код:

      <section>

                <div class="tn-box tn-box-color-1">

                    <p>Ваши персональные настройки были успешно сохранены!</p>

<hr>

                    <div class="tn-progress"></div>

                </div>

      </section>

Vitaliy21,
Ну он наверное вместо <hr> ( посколь я не увидел его в действии, поставил типо аналог того, что увидел) надеюсь с изменениями верстки Вы сами справитесь ?

Цитата:

Сообщение от Deff

надеюсь с изменениями верстки Вы сами справитесь ?

Думаю да, в принципе уже настроил как мне надо, спасибо большое за помощь!

Deff,

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

Я сделать изменения на тестовой страницы, блоки для который нужно сделать возможность закрытия http://myforum2.4adm.ru/index.php?page=1

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

Куки:
Имя: Block1; Срок: 7 дней;
Имя: Block2; Срок: 14 дней;
Имя: Block3; Срок: 20 дней.

Я пытался дублировать java код и изменить имя, но так почему-то не работало...

Гы - к вечеру...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jQuery.js"></script>
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jquery.cookie.js"></script>

<style type="text/css">

div[id^="CocieBlock"] {
 text-align: center;
 padding:12px;
 margin:0 auto;
}

div[id^="CocieBlock"] *{
 margin:0;
 padding:0;
}

div[id^="CocieBlock"] .box {
 padding:12px;
 background-color:#C1C1C1;
}

div[id^="CocieBlock"] .close {
 line-height:3px;
 width:10px;
 height:10px;
 padding:5px 4px 4px 5px;
 float:right;
 margin-right:0px;
 cursor:pointer;
}

div[id^="CocieBlock"] section{
 font-size:17px;
 font-weight:700;
 padding:12px;
 max-width:360px;
 display:none;
}

.box{
 width:500px;
 font: normal normal 400 12px/18px Verdana;
}

.box section hr{
 height:3px;
 padding:0;
}

.tn-box-color-1 {
 max-width:360px;
 text-align: left;
 position:relative;
 background:#FEE791 url(http://s1.uploads.ru/i/MYmFD.png) 12px 50% no-repeat;
 padding:20px 85px 22px 65px!important;
}
.tn-box-color-1 hr{
 position:absolute;
 width:90%;
 margin-top:13px!important;
 left:5%;
 border:#FDFBFD solid 2px;
}
</style>

<script type="text/JavaScript">
$(document).ready(function (){

var boxN={box1:7,box2:14,box3:20};

for(var key in boxN){

  if($.cookie(key)!=null){
    var id = key.replace('box','')
    $('#CocieBlock'+id).remove();
  }
}


$('.close').click(function() {
$(this).parent().slideUp(800, function() {
  var Zr1=$(this).parents('div[id^="CocieBlock"]').find('section');
     Zr1.slideDown(800,function() {
     setTimeout(function() {Zr1.fadeOut(2300)},1500) //.slideUp(2300)",1500) 
     });
  });
  var id=$(this).parents('div[id^="CocieBlock"]').attr("id").replace("CocieBlock","");
  //alert(boxN['box'+id])

  $.cookie('box'+id,'none',{ expires: parseInt(boxN['box'+id]) }); //Временно закомментировал для тестов
});
});
</script>
</head>

<body>


<div id="CocieBlock1" class="container">   
 
  <div class="box" id="box1" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>


<div id="CocieBlock2" class="container">   
 
  <div class="box" id="box2" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>

<div id="CocieBlock3" class="container">   
 
  <div class="box" id="box3" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>



</body>
</html>

Cледущий Вариант только за плюшки!