I have to jsfiddles
Below are complete codes per warning
HTML with tabs
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
</head>
<body>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div id="pane1">Tab1 content</div>
<div id="pane2">Tab2 content</div>
</div>
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
test.css
body {
margin: 0;
padding:50px 80px;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
.panes div {
display:none;
padding:15px 10px;
border-top :1px solid #999;
height:500px;
font-size:14px;
background-color:#fff;
}
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
height:30px;
}
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
}
ul.tabs a {
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
ul.tabs a:hover {
color:red;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
font-size: 14px;
cursor:default !important;
color:#000 !important;
}
.panes .pane {
display:none;
}
#pane2 {
position: absolute;
top: 80px;
bottom: 10px;
left: 80px;
right: 10px;
}
HTML with ACE Editor embedded
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
</head>
<body>
<div id="pane2">
function foo(items){
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="test.js"></script>
</body>
</html>
test.css - is the same
test.js
var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");
So, my goal is combine those two pages into one, where in first tab there is some content, and in second one there should be editor itself. When I do it as following
HTML with tabs and ACE Editor in second tab
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
</head>
<body>
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div id="pane1">Tab1 content</div>
<div id="pane2">
function foo(items){
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
<script>
$(function() {
$("ul.tabs").tabs("div.panes > div");
});
</script>
<script src="test.js"></script>
</body>
</html>
test.css - is the same
test.js - is the same
then Tab 1 shows content correctly but there's no editor in tab 2. This is the jsfiddle of non-working code.
Any hints, help, ready-to-go code that fix the problem are appreciated. Thanks in advance.
