Создаю пользовательский интерфейс, который имеет левую панель и среднюю панель, Am динамически добавляет ширину в среднюю панель с помощью функции window.resize. но пользовательский интерфейс не показывает идеально, но когда я проверяю элемент за один раз, он исправляет все навсегда, как это решить.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<style>
html, body, #mapDiv, #googleMap {
padding: 0;
margin: 0;
height: 100%!important;
width:100%!important;
overflow:hidden;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
textarea {
resize: vertical;
}
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.pull-right{
float: right;
}
.pull-left{
float: left;
}
.nav-icon {
display:none;
}
.header-top {
height: 40px;
}
/******************* header Tab *******************/
.tab-content {
background: #f9f9f9;
}
.nav a {
color: #fff;
}
.nav a:hover {
color: #000;
}
/*.collapse_height {
height: 151px;
overflow-y: scroll;
}*/
.navigation1 {
position: relative;
top: 44px;
float:right;
}
.navigation1 ul {
margin:0;
list-style: none;
padding:0;
}
.navigation1 ul li{
position: relative;
clear:both;
}
.navigation1 ul li ul li {
border-bottom: 1px solid #e5e5e5;
}
.navigation1 ul li ul {
display: none;
}
.navigation1 ul li:hover ul {
display: block;
position: absolute;
border: 1px solid #eee;
top: 36px;
right: 1px;
width: 200px;
z-index:9999;
}
.navigation1 ul li a i {
margin-right: 5px;
}
.navigation1 ul li a{
line-height: 30px;
height: 30px;
transition: all linear .5s;
padding-left: 10px;
text-decoration:none;
display:block;
background-color:#d1dcf2;
}
.navigation1 ul li li a{
background: #f5f5f5;
}
.navigation1 ul li a:hover {
background-color: #fff;
}
.navigation {
height: 30px;
background: #4285f4;
overflow:hidden;
}
.navigation ul {
margin:0;
list-style: none;
padding:0;
text-align: right;
}
.navigation ul li{
display:inline-block;
margin-right: 5px;
}
.navigation ul li a{
line-height: 24px;
height: 24px;
transition: all linear .5s;
}
.navigation ul li a:hover {
opacity: .7;
}
/*.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 2px 8px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn-primary {
background-color: #337ab7;
border-color: #2e6da4;
border-radius: 3px;
color: #fff;
cursor: pointer;
}
.btn-primary:hover {
background-color: #286090;
border-color: #204d74;
color: #fff;
}*/
.input-row { margin-bottom: 10px;}
.input-row label {
display: block;
margin-bottom: 3px;
}
.input-row select {
background-clip: padding-box;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
color: #888888;
padding: 0;
width: 98%;
}
.input-row select {
height: 30px;
line-height: 30px;
}
.ClickedRadio{
margin-left:-15px;
}
.chnagePosBTN
{
position: absolute;
left:0px;
top:48%;
z-index:1;
height: 35px;
width: 35px;
border: 1px solid #eff2f9;
border-radius: 0px;
border-left: none;
/*border-top: none;*/
background: url(../img/right-accord.png) #fff no-repeat;
background-position: 55%;
cursor: pointer;
background-color: #dbe1c7;
}
.btnClass
{
position:absolute;
left:314px;
top:48%;
z-index:1;
height: 35px;
width: 35px;
border: 1px solid #eff2f9;
border-left: none;
/*border-top: none;*/
background: url(../img/left-accord.png) #fff no-repeat;
background-position: 55%;
cursor: pointer;
border-radius: 0px;
background-color: #dbe1c7;
box-shadow: 3px 3px 2px #0000003b;
}
.slider-arrow {
padding:5px;
width:20px;
float:left;
border: 1px solid #ccc;
border-left:none;
border-top:none;
text-decoration:none;
position:relative;
left:-300px;
}
.show {
background: url(../img/right-accord.png) no-repeat;
height: 30px;
width: 30px;
}
.hide1 {
height: 30px;
width: 30px;
background: url(../img/left-accord.png) no-repeat;
}
#content,#sidebar {
text-align: left;
}
.leftPannel-content{
padding: 10px;
overflow:auto;
}
#main { height: 100%; width: 100%; }
#sidebar {
background-color: #DEF;
border-color: #BCD;
display: none;
}
.leftPannel
{
width:314px;
background: #dbe1c7;
float:left;
display:none;
margin-top:0px;
/*text-align: center;
overflow-y:auto;*/
}
.leftPannel-content {
padding: 10px;
overflow: auto;
/* border-right: 1px solid #666;*/
}
.mapPannel
{
float:left;
position: relative;
}
.leftPannelCollapse
{
float:left;
background:purple;
width:0px;
}
.map-container {
width:100%;
height:100%;
/*position:absolute;*/
top:0px;
overflow-y:hidden
}
.esriSimpleSliderTL {
top:36px!important;
left: 4px!important;
}
.user {
float: left;
margin: 6px 0px 0 5px;
color: #1b7dbf;
text-decoration:none;
background:url(../img/person1.png) no-repeat 10px 8px;
padding-left: 30px;
text-indent: 20px;
padding-right: 10px;
line-height: 34px;
height: 34px;
position:relative;
border-radius: 5px 5px 0 0;
}
.user-add{
background:#eee url(../img/person.png) no-repeat 10px 8px;
}
.clearout {
height:20px;
clear:both;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:100%;
}
.nbs-flexisel-ul {
position:relative;
width:9999px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
.nbs-flexisel-inner {
overflow:hidden;
float:left;
width:100%;
}
.nbs-flexisel-item {
float:left;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
cursor: pointer;
position: relative;
/* margin-top: 10px;
margin-bottom: 10px;*/
max-width:24px;
max-height:24px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
}
.nbs-flexisel-nav-left {
left: 1px;
background: url(../img/button-prev.png) no-repeat 0 1px;
height: 24px;
width: 24px;
}
.nbs-flexisel-nav-right {
right: 1px;
background: url(../img/button-next1.png) no-repeat 0 1px;
height: 24px;
width: 24px;
}
.close1 {
text-align: right;
height: 16px;
width: 16px;
cursor:pointer;
position: absolute;
right: 10px;
}
.bottom-panel {
/* border: 1px solid #003b1c;*/
/*background: #fff;*/
width: 100%;
position: absolute;
bottom: 10px;
left: 0px;
border-radius: 5px;
z-index: 99;
display: block;
}
.custom-panel .panel-footer {
background-color: #f6f9ff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #d9edf7;
padding: 10px 15px;
}
.custom-panel .panel-default,
.leftPannel .panel-default ,
.bottom-panel .panel-default{
border: none;
}
.custom-panel .panel-heading,
.leftPannel .panel-heading,
.bottom-panel .panel-heading {
background: #ffffff;
}/*.leftPannel .panel-heading:hover,
.bottom-panel .panel-heading:hover{
background: #5e94ff;
}*/
.custom-panel .panel-default > .panel-heading {
border-color: #d9edf7;
color: #333;
}
.leftPannel .panel,
.botom-panel .panel {
box-shadow: none;
}
.leftPannel .panel-heading a {
background: url(../img/down-accord.png) no-repeat left 1px;
padding-left: 20px;
min-height: 16px;
}
.leftPannel .panel-heading a.collapsed {
background: url(../img/up-accord.png) no-repeat left 1px;
padding-left: 20px;
min-height: 16px;
}
.bottom-panel .panel-heading a,
.leftPannel .panel-heading a {
background: url(../img/down-accord.png) no-repeat right 0px;
padding-left: 16px;
min-height: 16px;
font-size: 14px;
}
.bottom-panel .panel-heading a.collapsed,
.leftPannel .panel-heading a.collapsed {
background: url(../img/up-accord.png) no-repeat left 0px;
padding-left: 20px;
min-height: 16px;
}
.bottom-panel .panel-default>.panel-heading {
background: #dbe1c7;
font-size: 14px!important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 45px;
position: absolute;
top: -40px;
border: 1px solid #eff2f9;
}
.bottom-panel .table.table-bordered thead {
background: #f5f5f5;
}
.bottom-panel table{
margin-bottom:0;
width: 100%;
}
.top-70 {
top:-70px !important;
}
.bottom-panel .panel-body{
padding:0px!important;
}
.bottom-panel .table.table-bordered thead {
background: #f5f5f5;
}
.bottom-panel table{
margin-bottom:0;
width: 100%;
background: #fff;
}
.bottom-panel table tr {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.bottom-panel table tr th {
border-bottom: 1px solid #506529;
border-right: 1px solid #506529;
padding: 5px;
text-align:center;
vertical-align: middle;
background: #839367;
color: #fff;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
}
.bottom-panel table tr td {
border: 1px solid #839367;
padding: 4px 10px;
font-size: 12px;
border-left: 0;
}
.table-striped {
}
tablle#CadastralInfotable tbody tr:nth-child(odd) {
background-color: #ccc;
}
.esriSimpleSliderTL {
left: 20px;
top: 10px!important;
}
.tab-nav {
margin: 0;
padding: 0;
overflow:hidden;
}
.tab-nav li {
display: inline-block;
padding: 3px 12px;
text-align: center;
}
.tab-nav li a {
display: block;
font-size: 13px;
text-decoration:none;
}
.tab-nav li a:hover {
color:#333;
display: block;
}
.tab-nav-icon {
display: block;
height: 16px;
line-height: 16px;
}
.tab-nav-icon img{
height: 16px;
line-height: 16px;
}
/*#ShowIcons {
background: #4285f4;
}*/
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#canvas-holder1 {
width: 300px;
margin: 20px auto;
}
#canvas-holder2 {
width: 50%;
margin: 20px 25%;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.chartjs-tooltip-key{
display:inline-block;
width:10px;
height:10px;
}
.contentPannel {
overflow: auto;
}
.mbn {
margin-bottom: 0 !important;
}
.mt5 {
margin-top: 5px !important;
}
.fs30 {
font-size: 30px !important;
}
.br-grey {
border-color: #d9d9d9 !important;
}
.br-a {
border: 1px solid #eeeeee !important;
}
.m0 { margin:0!important;}
.pageContent
{
margin: 0;
padding: 80px 20px 74px;
position: relative;
}
.toolBoxes
{
height: 100%;
width: 100%;
}
.infoBox
{
background-color: #f4f9f9;
border: 1px solid #e0e7ea;
box-shadow: 5px 5px 5px #d5e9f5;
height: 293px;
position: relative;
background: -moz-linear-gradient(90deg, #f0f6f6 0%, #ffffff 100%);/* FF3.6+ */
background: -webkit-gradient(linear, 90deg, color-stop(0%, #f0f6f6), color-stop(100%, #ffffff));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(90deg, #f0f6f6 0%, #ffffff 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(90deg, #f0f6f6 0%, #ffffff 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(90deg, #f0f6f6 0%, #ffffff 100%);/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f6f6', endColorstr='#ffffff', GradientType='0'); /* for IE */
background: linear-gradient(0deg, #f0f6f6 0%, #ffffff 100%);/* W3C */
margin-bottom: 20px;
}
</style>
<div class="leftPannel" id="effect" style="background:red; height:100px; float:left; color:white" >
This is left
</div>
<span style="background:green; padding:5px; color:white; " class="chnagePosBTN">Click me</span>
<div class="mapPannel" style="background:blue; float:left; color:white; height:100px;">
my mid panel
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function windowsizing() {
window_width = $(window).width();
window_height = $(window).height();
banner_height = $(".header_r").height() + 40;
leftPanel_width = window_width - $(".leftPannel").width() + "px";
height_sansBanner = window_height - banner_height + "20px";
$('.wrapper').css("height", window_height) + "px";
$('.wrapper').css("width", window_width) + "px";
$('.leftPannel').css("height", height_sansBanner) + "px";
$('.mapPannel').css("height", height_sansBanner) + "px";
$('.leftPannel-content').css("height", height_sansBanner) + "px";
$('.mapPannel').css("width", leftPanel_width) + "px";
$('.contentPannel').css("width", window_width) + "px";
$('.contentPannel').css("height", height_sansBanner) + "px";
//ABU
$('.tabPannel').css("height", height_sansBanner) + "px";
$('.tabPannel-content').css("height", height_sansBanner) + "px";
}
$(document).ready(function () {
windowsizing();
});
$(window).resize(function () {
windowsizing();
$(".leftPannel").css({ 'display': 'block', 'width': '314px' });
$(".chnagePosBTN").addClass('btnClass');
$('.mapPannel').css({ 'width': (($(window).width()) - 314) + 'px' });
if ($(".leftPannel").css('display') == 'none') {
$('.chnagePosBTN').click(function () {
$('.chnagePosBTN').toggleClass('btnClass');
if ($('.leftPannel').css('display') == 'block') {
$('.leftPannel').css({
'display': 'none',
'width': '0px'
});
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
} else {
$('.leftPannel').css({
'display': 'block',
'width': '314px'
});
$('.mapPannel').css({ 'width': (($(window).width()) - 314) + 'px' });
}
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 100);
});
}
if ($(window).width() < 768) {
$('.leftPannel').css({
'display': 'none',
'width': '0px'
});
$('.chnagePosBTN').removeClass('btnClass');
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
$(".chnagePosBTN").click(function () {
if ($(window).width() <= 768 && $(".leftPannel").css('display') == 'block') {
$('.leftPannel').css('width', '100%');
$('.mapPannel').css({ 'width': (($(window).width()) - 100) + '%' });
}
else if ($(window).width() > 768 && $(".leftPannel").css('display') == 'block') {
$('.leftPannel').css('width', '314px');
$('.mapPannel').css({ 'width': (($(window).width()) - 314) + 'px' });
}
else {
$('.leftPannel').css('width', '0px');
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
}
});
}
});
$(window).load(function () {
windowsizing();
if ($(".leftPannel").css('display') == 'none') {
$(".leftPannel").css('display', 'block');
$(".chnagePosBTN").addClass('btnClass');
$('.mapPannel').css({ 'width': (($(window).width()) - 314) + 'px' });
$('.chnagePosBTN').click(function () {
$('.chnagePosBTN').toggleClass('btnClass');
if ($('.leftPannel').css('display') == 'block') {
$('.leftPannel').css({
'display': 'none',
'width': '0px',
});
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
} else {
$('.leftPannel').css({
'display': 'block',
'width': '314px'
});
$('.mapPannel').css({ 'width': (($(window).width()) - 314) + 'px' });
}
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 100);
});
}
if ($(window).width() < 768) {
$('.leftPannel').css({
'display': 'none',
'width': '0px'
});
$('.chnagePosBTN').removeClass('btnClass');
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
$(".chnagePosBTN").click(function () {
if ($(window).width() < 768 && $(".leftPannel").css('display') == 'block') {
$('.leftPannel').css('width', '100%');
$('.mapPannel').css({ 'width': (($(window).width()) - 100) + '%' });
}
else {
$('.leftPannel').css('width', '0px');
$('.mapPannel').css({ 'width': (($(window).width()) - 0) + 'px' });
}
});
}
});// JavaScript Document
</script>
</body>
</html>