-
javascript help
I'm having an issue with this code
PHP Code:
<head>
<style>
div.div_3sg
{
width: 100%;
}
div.tab_3sg
{
border: 1px solid;
margin: auto;
clear: both;
height: 120px;
width: 98%;
padding-left: 4px;
}
#tabs li {
list-style: none outside none;
}
#tabs ul {
padding: 0;
border-bottom: 0 none !important;
}
#tabs li, #tabs li a {
float: left;
}
#tabs ul li{
font-weight: bold;
padding: 8px;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
<body>
<div id="tabs" class="div_3sg">
<div style="display: block; float: left; ">
<ul>
<script type="text/javascript">
jQuery.getJSON( "include_js.php",function(data){
jQuery.each(data.groups, function(id, group){
var a=1;
document.writeln('<li id="#tab-'+(id+1)+'">A'+group.name+'</li>');
});
});
</script>
</ul>
</div>
</div>
</body>
That code produces the following result.
PHP Code:
<li id="#tab-1">AEvents</li>
<li id="#tab-2">AGroups</li>
<li id="#tab-3">AInformation</li>
Can anyone see why its freaking out and clearing everything off the page.
-
Looks like you missed a </div> tag on the tag before the </body> tag.
-
Fixed the div tag, no change.
If it helps in FF the spinner on the tab keeps spinning.
I've got to get some nocache headers in it. It runs once, fails and I can't open fire bug on it and get it to rereun without closing the tab and entering it from the address bar(no shift-refresh does not work)
-
uploaded here if anyone wants to look
http://3sg.org/beta/3sg_footer.htm
-
Give this a try:
PHP Code:
<head>
<style>
div.div_3sg
{
width: 100%;
}
div.tab_3sg
{
border: 1px solid;
margin: auto;
clear: both;
height: 120px;
width: 98%;
padding-left: 4px;
}
#tabs li {
list-style: none outside none;
}
#tabs ul {
padding: 0;
border-bottom: 0 none !important;
}
#tabs li, #tabs li a {
float: left;
}
#tabs ul li{
font-weight: bold;
padding: 8px;
text-decoration: none;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="tabs" class="div_3sg">
<div id="tabHeader" style="display:block; float:left;">
<!-- Tabs Generated Here -->
</div>
</div>
<script>
$.getJSON('3sgTabs.json', function(data) {
var items = [];
$.each(data.groups, function(id, group) {
items.push('<li id="tab-' + (id+1) + '">' + group.name + '</li>');
});
$('<ul/>', {
'class': 'tabCategories',
html: items.join('')
}).appendTo('#tabHeader');
});
</script>
</body>
Output generated is:
PHP Code:
<div id="tabs" class="div_3sg">
<div id="tabHeader" style="display:block; float:left;">
<ul class="tabCategories">
<li id="tab-1">Events</li>
<li id="tab-2">Groups</li>
<li id="tab-3">Information</li>
</ul>
</div>
</div>
Working demo:
http://www.stealthify.com/3sgto/projects/3sgTabs.php
-
Can you explain why what I did , did what it did?
-
I didn't look too far into it. I just recreated it from scratch with how I would do it, and then adapted it to what you were trying to accomplish.
Looking at it a little closer now, your problem line is using document.writeln to begin writing to the document and then not using the document.close() method to close the output stream.
-
I originally used document.write() would that still need the close?
-
Yep, that's pretty much identical to .writeln, except .writeln will put a new line after it. Both open and write to the output stream.
Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
-
wonder if thats what broke it.
I'll have to try it at lunch
I'll probably use yours tho I like it better.
