Подключение cookies к чату.

Здравствуйте!
В общем суть проблемы вот в чём.
Имеется выезжающая панель с чатом.

Не получается подключить cookies для того что бы запоминалось состояние чата свёрнут, или открыт.
Нужно что бы после обновления страницы чат если был открыт то должен быть открыт, ну а если же закрыт то открыт.
Вот HTML код панельки чата

Показать / Скрыть текст

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" class="stylish-select">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/chat.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/jquery.tabSlideOut.v1.2.js"></script>
    <script>
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //класс элемента вкладки
            pathToTabImage: './images/chatnya.png',            //путь к изображению "обязательно"
            imageHeight: '165px',                      //высота изображения "обязательно"
            imageWidth: '175px',                      //ширина изображения "обязательно"    
            tabLocation: 'bottom',                      //сторона на которой будет вкладка top, right, bottom, или left
            speed: 300,                               //скорость анимации
            action: 'click',                          //опции=: 'click' или 'hover', анимация при нажатии или наведении
            fixedPosition: true                      //опции: true сделает данную вкладку неподвижной при скролле
        });

    });
    
    </script>
</head>
<body>
<div class="slide-out-div open" style="line-height: 1; position: fixed; right: 0px; bottom: -3px;"> <a class="handle" style="background-image: url(./images/chatnya.png); width: 175px; height: 165px; display: block; text-indent: -99999px; outline: none; position: absolute; right: 0px; top: -165px; background-position: initial initial; background-repeat: no-repeat no-repeat;">Chat</a> <a class="handle" style="z-index: 10000; padding-bottom: 16px; background-image: url(./images/chatnya.png); width: 175px; height: 165px; display: block; text-indent: -99999px; outline: none; position: absolute; right: 0px; top: -165px; background-position: initial initial; background-repeat: no-repeat no-repeat;">Chat</a>
    <div id="chatContainer">
        <div id="chatLineHolder" style="overflow: hidden; padding: 0px; width: 254px;" class="">

        </div>
        <div id="chatBottomBar" class="rounded">
            <form id="submitForm" method="post" action="" style="display: inline;">
                <input id="chatText" name="chatText" class="rounded" maxlength="285">
                <input type="submit" class="blueButton" value="">
            </form>
            <img id="sm-box" width="20px" height="20px" src="./images/chatsmiles.png">
        </div>
        <div id="checkboxchat">
            <label>
                <input id="scrCheck" type="checkbox" class="styled" checked="checked" style="position: absolute; left: -9999px;">
                <span class="checkboxchat checked" style="display:inline-block"></span>Автопрокрутка
            </label>
        </div>
    </div>
</div>
</body>
</html>

А вот код javascript-а

Показать / Скрыть текст

/*
    tabSlideOUt v1.1
    
    By William Paoli: http://wpaoli.building58.com

    To use you must have an image ready to go as your tab
    Make sure to pass in at minimum the path to the image and its dimensions:
    
    example:
    
        $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
                pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
                imageHeight: '133px',                         //height of tab image *required*
                imageWidth: '44px',                           //width of tab image *required*    
        });

    
*/


(function($){
    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            rightPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null                       
        }, callerSettings||{});

        settings.tabHandle = $(settings.tabHandle);
        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
        
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
        
        //set initial tabHandle css
        settings.tabHandle.css({ 
            'display': 'block',
            'width' : settings.imageWidth,
            'height': settings.imageHeight,
            'textIndent' : '-99999px',
            'background' : 'url('+settings.pathToTabImage+') no-repeat',
            'outline' : 'none',
            'position' : 'absolute'
        });
        
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });

        
        var properties = {
                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                };

        //set calculated css
        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
            obj.css({'left' : settings.leftPos});
            settings.tabHandle.css({'right' : 0});
        }
        
        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
            
        }
        
        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
            
            settings.tabHandle.css({'top' : 0});
        }
        
        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
            
            $('html').css('overflow-x', 'hidden');
        }

        //functions for animation events
        
        settings.tabHandle.click(function(event){
            event.preventDefault();
        });
        
        var slideIn = function() {
            
            if (settings.tabLocation === 'top') {
                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
            }    
            
        };
        
        var slideOut = function() {
            
            if (settings.tabLocation == 'top') {
                obj.animate({top:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({left:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({right:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
            }
        };

        var clickScreenToClose = function() {
            obj.click(function(event){
                event.stopPropagation();
            });
            
            $(tabHandle).click(function(){
                slideIn();
            });
        };
        
        var clickAction = function(){
            settings.tabHandle.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();
                } else {
                    slideOut();
                }
            });
            
            clickScreenToClose();
        };
        
        var hoverAction = function(){
            obj.hover(
                function(){
                    slideOut();
                },
                
                function(){
                    slideIn();
                });
                
                settings.tabHandle.click(function(event){
                    if (obj.hasClass('open')) {
                        slideIn();
                    }
                });
                clickScreenToClose();
                
        };
        
        //choose which type of action to bind
        if (settings.action === 'click') {
            clickAction();
        }
        
        if (settings.action === 'hover') {
            hoverAction();
        }
    };
})(jQuery);

Прошу помощи в данной проблеме.

Источник:dle-faq.pro, DLE

Перейти на сайт

Подключение cookies к чату.

Похожие новости