Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавное исчезание, якорь, обновление страницы (https://javascript.ru/forum/jquery/32390-plavnoe-ischezanie-yakor-obnovlenie-stranicy.html)

Mikle1990 15.10.2012 03:32

Плавное исчезание, якорь, обновление страницы
 
Сразу несколько вопросов... (jQuery)

1. Мне нужно сделать плавное исчезание текста внутри div'a, а потом на его месте плавное появление нового текста. Всё, что я пока смог это:
$("#deshead").text("Новое значение");
- очень резко сменяется, а нужно плавно как при fadeIn fadeOut...чтоб ещё можно было задать время исчезания/появления.
Обратите внимание, что речь идёт о замене текста внутри элемента(тега div), а не о замене самого элемента(тега div).

2.
<div id="info">
Большой текст
[Кнопка которая прячет #info и показывает #drugoeinfo ]
</div>
<div id="drugoeinfo">
Другой большой текст
</div>

Оба текста большие => имеют полосу прокрутки.
Вопрос: Как сделать, чтобы при нажатии на кнопку, я резко попадал на самый верх "Другого большого текст".
А то после нажатия я остаюсь внизу, и чтобы прочитать начало текста, приходиться проматывать вверх полосу прокрутки :(

3. Посмотрите на HTML-код в задаче 2. Теперь давайте представим, что я нажал на кнопку и получил "Другой большой текст". Если я обновлю страницу, то передо мной предстанет "Большой текст". Как сделать, чтобы после обновления страницы, передо мной оставался "Другой большой текст"?

NikolasGrad 15.10.2012 09:28

// 1),2),3)
$("#drugoeinfo").css("display", "none"); // скрываем второй текст

// 3) только для третьего пункта
if (document.cookie.length > 0) { // проверяем куки
  var cookies = document.cookie.split(";");
  var cookieArray = new Array();
  for (var i = 0; i < cookies.length; i++) {
    var cookiei =cookies[i].split("=");
    cookieArray[unescape(cookiei[0])] = unescape(cookiei[1]);
  }
  if (cookieArray['info'] == "2"){ // есть куки info=2 (второй текст)
    $("#info").remove(); // прячем первый текст
    $("#drugoeinfo").css("display", "block"); // показываем  второй текст
  }
}
// /3) конец только для третьего пункта

// 1),2),3)
$("#second").click(function(){ // нажимаем кнопку
  $("#info").fadeOut("slow", function () { // медленно скрываем первый текст
    //$("#info").remove();

    $("#drugoeinfo").text("Новое значение"); // 1) только для первого пункта

    $("#drugoeinfo").fadeIn("slow"); // медленно показываем  второй текст

    document.cookie = escape("info=2;"); // 3) только для третьего пункта запись куки

  });
});

<div id="info">
Большой текст
<button id="second">другой</button>
</div>
<div id="drugoeinfo">
Другой большой текст
</div>

Mikle1990 17.10.2012 11:28

NikolasGrad,
По поводу пункта 1 - большое спасибо.

За второй пункт спасибо пока не могу сказать :(
Не работает...

Очень бы хотелось ещё решить проблему из пункта 2. А то если этого не сделать, то пункт 1 и 3 вообще станут неактуальными.

Mikle1990 18.10.2012 22:47

С пунктом 3 разобрался. Осталось только:
3. Посмотрите на HTML-код в задаче 2. Теперь давайте представим, что я нажал на кнопку и получил "Другой большой текст". Если я обновлю страницу, то передо мной предстанет "Большой текст". Как сделать, чтобы после обновления страницы, передо мной оставался "Другой большой текст"

Mikle1990 19.10.2012 09:07

Ещё раз повторюсь, чтобы никто не путался.
Имеется
<div id="info">
Текст 1
<button id="second">Показать Текст 2</button>
</div>
<div id="drugoeinfo">
Текст 2
<button id="second">Показать Текст 1</button>
</div>


Текст 1 - показан.
Текст 2 - скрыт (по умолчанию).

Действие: Нажимаем кнопку "Показать Текст 2" и нам показывается "Текст 2", а "Текст 1" - скрывается.

Как есть сейчас: Если после этого действия, произвести обновление страницы, то мы снова попадём в изначальное положение (Текст 1 - показан, Текст 2 - скрыт)

Как надо: Чтобы, если мы уже нажимали кнопку, то после обновления страницы всё было также, как после нажатия на кнопку (Текст 1 - скрыт, Текст 2 - показан).

Аналогично и для ситуации "Показать Текст 1".


Часовой пояс GMT +3, время: 13:33.