В выезжающей панели есть странные смещения .
1) Значок смещен относительно панели на 1 пиксель вправо, что не красиво. Не ровно. (
2) Панель и значок смещены вправо на некоторое расстояние (около 20 пикселей).
Как убрать (задать) эти смещения в выезжающей панели?
https://jsfiddle.net/7mryLzjy/7/
<script type="text/javascript">
$(function(){
$('.ui_float_panel_1').tabSlideOut({ //Класс панели
tabHandle: '.ui_handle_1_out', //Класс кнопки
pathToTabImage: '', //Путь к изображению кнопки button.gif
imageHeight: '122px', //Высота кнопки
imageWidth: '40px', //Ширина кнопки
tabLocation: 'top', //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
speed: 300, //Скорость анимации
action: 'click', //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
topPos: '200px', //Отступ сверху
fixedPosition: false //Позиционирование блока false - position: absolute, true - position: fixed
});
});
</script>
</head>
<body>
<div class="ui_float_panel_1">
<div class="ui_handle_1_out">
<div class="ui_handle_1_in">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
Любое содержание здесь!
</div>
body
{
padding:0px;
margin:0px;
}
.ui_float_panel_1 {
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
width: 100%;
height: 60px;
}
.ui_handle_1_out
{
width: 18px;
height: 18px;
padding: 8px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
cursor:pointer;
}
.ui_handle_1_in
{
position: absolute;
margin-top:3px;
}
.bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #ffffff;
border-radius: 1px;
}
/*
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: '.ui_handle_1',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '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', */
'textIndent' : '-99999px',
'left': '0px',
'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();
});
$(document).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);
Простой