Форум

Deff · #11 (**permalink**) 29.07.2012, 02:07

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>

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

Vitaliy21 · #12 (**permalink**) 29.07.2012, 08:56

Deff,

Убрал

Deff · #13 (**permalink**) 29.07.2012, 13:47

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>

Vitaliy21 · #14 (**permalink**) 29.07.2012, 15:12

Deff,

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

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

Deff · #15 (**permalink**) 29.07.2012, 18:12

Vitaliy21,
Поправил

Vitaliy21 · #16 (**permalink**) 29.07.2012, 19:13

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

Поправил

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

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

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

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

Deff · #17 (**permalink**) 29.07.2012, 19:20

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

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

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

Да

Vitaliy21 · #18 (**permalink**) 30.07.2012, 17:29

Deff,

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

Код:

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

Deff · #19 (**permalink**) 30.07.2012, 17:42

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

Vitaliy21 · #20 (**permalink**) 30.07.2012, 18:24

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

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

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

Форум

Справочник

Discord чат

Курсы javascript