I really hope this isn't a duplicate question as it seems to be a big question, but I've searched for a long while now to no avail... I have made an HTML5 tabbed interface that's calling a .js file for functionality. The project works AMAZING on my local computer but when I moved it to the server we're using there is no more functionality. The server is sql server 2008, I've developed the project in Visual Studio 2010. Minded the project is still on-going but all I want is for those tabs to work like on my local computer. Here's some code...
Home.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabbed Interface</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">Home</li>
<li id="tabHeader_2">New Case</li>
<li id="tabHeader_3">Search</li>
<li id="tabHeader_4">Reports</li>
<li id="tabHeader_5">Administration</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>Home</h2>
<p>Some Content</p>
</div>
<div class="tabpage" id="tabpage_2">
<div id="wrapper2">
<div id="newCaseTabContainer">
<div class="newCaseTabs">
<ul>
<li id="tabHeader_6">Customer Information</li>
<li id="tabHeader_7">Incident Information</li>
<li id="tabHeader_8">Operator Information</li>
<li id="tabHeader_9">Incident Analysis</li>
<li id="tabHeader_10">Audit Log</li>
</ul>
</div>
<div class="newCaseTabContent">
<div class="tabpage" id="tabpage_6">
<h2>Customer</h2>
</div>
<div class="tabpage" id="tabpage_7">
<h2>Incident</h2>
</div>
<div class="tabpage" id="tabpage_8">
<h2>Operator</h2>
</div>
<div class="tabpage" id="tabpage_9">
<h2>Analysis</h2>
</div>
<div class="tabpage" id="tabpage_10">
<h2>Audit</h2>
</div>
</div>
</div>
</div>
</div>
<div class="tabpage" id="tabpage_3">
<h2>Search</h2>
<p>CONTENT GALORE!!</p>
</div>
<div class="tabpage" id="tabpage_4">
<h2>Reports</h2>
<p>WOOO</p>
</div>
<div class="tabpage" id="tabpage_5">
<h2>Administration</h2>
<p>YEAH!!!!!!</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/Script.js"></script>
</body>
</html>
Script.js
window.onload = function () {
// get tab containers
var container = document.getElementById("tabContainer");
var check = document.getElementById("newCaseTabContainer");
// set current tab
// also set the new case tab when new case tab is selected
var navitem = container.querySelector(".tabs ul li");
var checkitem = check.querySelector(".newCaseTabs ul li");
//store which tab we are on
var ident = navitem.id.split("_")[1];
navitem.parentNode.setAttribute("data-current", ident);
var checkident = checkitem.id.split("_")[1];
checkitem.parentNode.setAttribute("data-current", checkident);
//set current tabs with class of activetabheader
navitem.setAttribute("class", "tabActiveHeader");
checkitem.setAttribute("class", "tabActiveHeader");
//get new case tab element to display tab control within
var displayNewCaseTabs = document.getElementById("tabHeader_2");
//hide other tab contents we don't need
var pages = container.querySelectorAll(".tabpage");
for (var i = 1; i < pages.length; i++) {
pages[i].style.display = "none";
}
var newCasePages = check.querySelectorAll(".tabpage");
for (var i = 1; i < newCasePages.length; i++) {
newCasePages[i].style.display = "none";
}
//this adds click event to tabs
var tabs = container.querySelectorAll(".tabs ul li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = displayPage;
}
var newCaseTabs = check.querySelectorAll(".newCaseTabs ul li");
for (var i = 0; i < newCaseTabs.length; i++) {
newCaseTabs[i].onclick = displayPage;
}
}
// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current).removeAttribute("class");
document.getElementById("tabpage_" + current).style.display = "none";
var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class", "tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display = "block";
this.parentNode.setAttribute("data-current", ident);
}
The Style.css the javascript is referencing...
*
{
margin:0;
padding:0;
}
body
{
width:75%;
font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
h2
{
margin-bottom:10px;
margin-left:10px;
}
#wrapper
{
width:720px;
margin:40px auto 0;
}
#wrapper2
{
width:720px;
margin:40px 40px 0px 20px;
}
#wrapper h2
{
color:Black;
text-align:left;
margin-bottom:20px;
}
#wrapper2 h2
{
color:Black;
text-align:left;
margin: 10px 10px 25px 30px;
}
#wrapper a
{
display:block;
font-size:1.2em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#wrapper2 a
{
display:block;
font-size:1.2em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#tabContainer
{
width:75%;
height:100%;
position:absolute;
padding:15px;
background-color:#2e2e2e;
-moz-border-radius: 4px;
border-radius: 4px;
}
#newCaseTabContainer
{
width:75%;
height:80%;
position:absolute;
padding:15px;
border-radius: 2px;
}
.newCaseTabs
{
height:30px;
}
.newCaseTabs > ul
{
font-size:1em;
list-style:none;
}
.newCaseTabs > ul > li
{
margin-left:15px;
padding:7px 10px;
display:block;
float:left;
color:#333;
border: 1px solid Black;
border-bottom-width: 0px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #E0E0E0; /* old browsers */
background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.newCaseTabs > ul > li:hover
{
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}
.newCaseTabs > ul > li.tabActiveHeader
{
background: #FF0000; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #FFF;
}
.tabs
{
height:30px;
}
.tabs > ul
{
font-size: 1em;
list-style:none;
}
.tabs > ul > li
{
margin:0 2px 0 0;
margin-left:10px;
padding:7px 10px;
display:block;
float:left;
color:#333;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 1px solid Black;
border-bottom-width: 0px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #E0E0E0; /* old browsers */
background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabs > ul > li:hover
{
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #333;
}
.tabs > ul > li.tabActiveHeader
{
background: #0000FF; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
cursor:pointer;
color: #FFF;
}
.tabscontent
{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding:10px 10px 25px;
height:90%;
background: #E8E8E8; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
margin:0;
color:#333;
}
.newCaseTabContent
{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border: 2px solid;
border-top-width: 1px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #CCCCCC; /* old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
}
This is probably a newb mistake but I really need some extreme help with this... Thanks in advance...
EDIT Mind you the .css and .js files are in their own folders within my project, which is why it states Styles/Style.css and Scripts/Script.js
IMPORTANT UPDATE!!: Ok so I've found out the compatibility mode is turned on in my browser, then when I turn it off the application works PERFECTLY!! Exactly like it is on my local machine. I don't think, or don't know, if this is the solution to this problem, as it just works on my machine, and possibly not others, as anyone using this application would have to turn off that setting individually... How can I make it so my users don't have to do that? Is there some code I can put in to make it so that everyone can view it like how it's supposed to??
Based on your most recent post edit, I assume it's an IE compatibility issue.
This will make IE use the most recent rendering mode (i.e. best HTML5 compatibility):
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
(You have to put this into your html document's head.)