вопрос
Здравствуйте!
В общем суть проблемы вот в чём.
Имеется выезжающая панель с чатом.
Не получается подключить cookies для того что бы запоминалось состояние чата свёрнут, или открыт.
Нужно что бы после обновления страницы чат если был открыт то должен быть открыт, ну а если же закрыт то открыт.
Вот HTML код панельки чата
А вот код javascript-а
Прошу помощи в данной проблеме.
В общем суть проблемы вот в чём.
Имеется выезжающая панель с чатом.
Не получается подключить 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);
Прошу помощи в данной проблеме.
