0
Я пытаюсь создать собственный JS Builder. У меня проблема с шириной div.Проблема с функцией возврата JavaScript! =
HTML
<html>
<head>
<meta charset="utf-8">
<title>JSCodePlayer</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<style>
body{
margin:0;
padding:0;
font-family:Lucida Sans;
}
#header{
width:100%;
height:50px;
background-color:#0084FF;
float:left;
color:white;
}
.fixedwidth{
margin:0 auto;
width:1250px;
}
#logodiv{
padding:12px 0 0 0;
float:left;
font-size:1.2em;
}
#rundiv{
float:right;
}
#rundiv button{
width:150px;
padding:7px;
border-radius:5px;
height:50px;
font-size:1.1em;
background-color:#0463C8;
border:1px solid #0084FF;
}
#toggles{
margin:0 auto;
width:324px;
}
#toggles ul{
margin:0;
border:1px solid #0463C8;
height:47px;
padding:0;
}
#toggles li{
float:left;
list style:none;
padding:15px;
position:relative;
}
.border-right{border-right:2px solid #0084FF;}
.codeContainer{
height:100%;
width:50%;
float:left;
position:relative;
}
.codeContainer textarea{
height:100%;
width:100%;
border:none;
border-right:1px solid #0463C8;
font-size:110%;
}
.codeLabel{
position:absolute;
top:2%;
left:90%;
}
#CSSContainer, #JavaScriptContainer{
display:none;
}
iframe{
height:100%;
width:100%;
border:none;
}
.selected{
background-color:#0463C8;
}
</style>
<div id="wrapper">
<div id="header">
<div class="fixedwidth">
<div id="logodiv">JSCodePlayer</div>
<div id="rundiv"><button>Run</button></div>
<div id="toggles">
<ul>
<li class="toggles border-right selected">HTML</li>
<li class="toggles border-right" >CSS</li>
<li class="toggles border-right">JavaScript</li>
<li class="toggles selected">Result</li>
</ul>
</div>
</div>
</div>
<div class="codeContainer" id="HTMLContainer">
<div class="codeLabel">HTML</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="CSSContainer">
<div class="codeLabel">CSS</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="JavaScriptContainer">
<div class="codeLabel">JS</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="ResultContainer">
<div class="codeLabel">Result</div>
<iframe></iframe>
</div>
</div>
<script>
var windowHeight=$(window).height();
var headerHeight=$("#header").height();
var codeContainerHeight=windowHeight-headerHeight;
$(".codeContainer").height(codeContainerHeight);
$(".toggles").click(function() {
$(this).toggleClass("selected");
var activeDiv=$(this).html();
$("#"+activeDiv+"Container").toggle();
alert(showingDivs);
});
var showingDivs=$(".codeContainer").filter(function() {
return($(this).css("display")!="none");
}).length;
alert(showingDivs);
var width=100/showingDivs;
$(".codeContainer").width(width+"%");
</script>
</body>
Следующее утверждение не работает должным образом. Мне нужна помощь немедленно.
var showingDivs=$(".codeContainer").filter(function() {
return($(this).css("display")!="none");
}).length;
Благодарим Вас за то, что уделили мне время и усилия.
Да, похоже, что хочет OP, количество видимые divs, если он хочет коллекцию, ему просто нужно удалить .length – mplungjan