Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена класса блока по нажатию на кнопку (https://javascript.ru/forum/dom-window/32298-smena-klassa-bloka-po-nazhatiyu-na-knopku.html)

noid 10.10.2012 19:52

Смена класса блока по нажатию на кнопку
 
Хочется на jquery. Задача такая:

Миничат в левой колонке сайта, по нажатию на кнопку "зафиксировать" меняет position:relative и становится fixed, при чем желательно, чтобы fixed не относительно родителя, а относительно всего документа. И таким образом прилипает к верхней части экрана. Кнопка меняется на "открепить" и по её нажатию блок возвращается в первоначальное положение. И куки не помешают, чтобы при обновлении не обнулялось.

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

Спасибо за помощь.:)

ksa 11.10.2012 10:27

Цитата:

Сообщение от noid
желательно, чтобы fixed не относительно родителя, а относительно всего документа

Тут "желательно" не подходит, ибо!
Цитата:

fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
http://htmlbook.ru/css/position

Margarita 11.10.2012 10:54

http://jsfiddle.net/fS5cZ/6/

noid 11.10.2012 14:09

Цитата:

Сообщение от Margarita (Сообщение 209402)

Спасибо, в принципе оно. Но я уже битый час бьюсь, что-то не срабатывает http://memkey.net/chat/d.html и оригинал тоже http://memkey.net/chat/a.html. Не меняется click.

И, если можно, прикрутить бы куки. У меня и так уже используется jquery.cookie.js

И плавный переход бы от fixed к нормальному состоянию. Animate наверное, да?

noid 11.10.2012 17:04

Нарыл скрипт простенький, с куками, только кнопка после обновления не запоминает свой value, как поправить? http://memkey.net/chat/b.html

<script> 
$(document).ready(function() {
    var box_class = $.cookie('box_class');
    if(box_class) {
        $('div#box').attr('class', box_class);
    }
    $("#run").click(function() {
        $("div#box").toggleClass("block");
        $.cookie('box_class', $('div#box').attr('class'));
    });
});
</script>

<div style="width:800px;" id="content">
    <div style="float:left; width:800px; height:300px; background:#99CCCC">Хэдэр</div>
    
    <div style="float:left; width:400px;">
        <!--start_chat-->   
        <div id="box" class="blockoff">Чат<br /><br /><br />
            <input type="button" id="run" value="прикрепить" onClick="this.value=this.value=='прикрепить'?'отлепить':'прикрепить';">
        </div>
        <!--end_chat-->      
        <div><img src="img2.jpg" /></div> 
    </div>

    <div style="float:right; width:400px;">    
        <div><img src="img1.jpg" /></div>
    </div>
</div>


И вопрос с плавным переходом остаётся на повестке дня. Может через какой-нибудь fadein/fadeout?

Your 13.10.2012 13:28

addClass()
removeClass()

noid 16.10.2012 21:01

Всем спасибо, вариант от Margarita забрал.


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