I am seeing a failure of the ui.dialog in IE7/8. With IE debugger turned on, it is saying that the "object doesn't support this property or method" when it runs the dialog.js (line 27) and "ui.dialog.overlay" is null or not an object (line 672).
Then when it tries to run and set up/render my accordion, I get failures like "Object doesn't support this property or method" on ui.accordion.js (line 16 and 17).
My dialog never does appear. And my accordion fails intermittently with its functionality.
On the jQuery UI website, it says that the Dialog.js depends on the ui.core.js (mandatory) and then either/both ui.draggable.js or ui.resizable.js as options. The accordion has dependencies of ui.core.js and then ui.effects.core.js (only if you are using non-default animations).
Even though the website does not state it, do I need to attach the ui.widget.core.js file??
Does anyone know why I am seeing these darn bugs??
When I link in the widget.js, I get a "Object expected" at line 51.
What the heck
Tony
UPDATE: Ok, I got accordion to work. I found a typo "fillspace" vice "fillSpace". But I am still seeing alot of errors with my modal dialog box. Any insight would be much appreciated.
It is not the job you get handed, but what you have done with it in the end that people remember.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="'One Stop' shopping for U.S. Army ammunition related data - physical descriptions, transportation and stowage" />
<meta name="keywords" content="ammunition, munitions, defense, center, multimedia, encyclopedia, small arms, grenades, bombs, missiles, rockets, chemical, demolition, land mines, artillery, CAD, PAD, pyrotechnics" />
<meta name="author" content="Anthony Jackman" />
<link type="text/css" rel="stylesheet" href="css/main.css" media="screen" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jq/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/js/droppy.js"></script>
<script type="text/javascript" src="scripts/jq/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jq/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="scripts/jq/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="scripts/jq/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="scripts/js/jquery.textshadow.js"></script>
<script type="text/javascript" src="scripts/js/ame-ui.js"></script>
<script type="text/javascript">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#securityNotice").dialog ({
modal.true,
resizable: true,
buttons: {
I Agree: function() {
$(this).dialog('close');
}
}
});
});
</script>
<title>Deparment of Army - DAC - Ammunition Multimedia Encyclopedia</title>
</head>
<body>
<div class="header" id="header"> <img src="media/DAClogo.png" alt="Defense Ammo Center logo" width="83" height="87" />
<h1>Ammunition Multimedia Encyclopedia</h1>
<h4>Defense Ammunition Center, McAlister, Oklahoma, USA</h4>
</div>
<div id="navWrapper">
<ul id="nav">
<li><a href="#" title="#"><span>Home</span></a></li>
<li><a href="#" title="#"><span>Small Arms</span></a>
<ul>
<li><a href="#" title="#"><span>Shot Gun</span></a></li>
<li><a href="#" title="#"><span>Bullet</span></a>
<ul>
<li><a href="#" title="#"><span>22 cal</span></a></li>
<li><a href="#" title="#"><span>38 cal</span></a></li>
<li><a href="#" title="#"><span>45 cal</span></a></li>
<li><a href="#" title="#"><span>50 cal</span></a></li>
<li><a href="#" title="#"><span>5.56 mm</span></a></li>
<li><a href="#" title="#"><span>7.62 mm</span></a></li>
<li><a href="#" title="#"><span>9 mm</span></a></li>
<li><a href="#" title="#"><span>20 mm</span></a></li>
<li><a href="#" title="#"><span>25 mm</span></a></li>
<li><a href="#" title="#"><span>30 mm</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="#"><span>Bombs</span></a>
<ul>
<li><a href="#" title="#"><span>Practice</span></a></li>
<li><a href="#" title="#"><span>500 lb</span></a></li>
<li><a href="#" title="#"><span>1000 lb</span></a></li>
<li><a href="#" title="#"><span>2000 lb</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Grenades</span></a>
<ul>
<li><a href="#" title="#"><span>Hand</span></a></li>
<li><a href="#" title="#"><span>Practice</span></a></li>
<li><a href="#" title="#"><span>Special</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Land Mines</span></a>
<ul>
<li><a href="#" title="#"><span>Anti-Personnel</span></a></li>
<li><a href="#" title="#"><span>Anti-Tank</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Missiles</span></a></li>
<li><a href="#" title="#"><span>Artillery</span></a>
<ul>
<li><a href="#" title="#"><span>40 mm</span></a></li>
<li><a href="#" title="#"><span>60 mm</span></a></li>
<li><a href="#" title="#"><span>75 mm</span></a></li>
<li><a href="#" title="#"><span>81 mm</span></a></li>
<li><a href="#" title="#"><span>105 mm</span></a>
<ul>
<li><a href="#" title="#"><span>Anti-Tank</span></a></li>
<li><a href="#" title="#"><span>Howitzer</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>120 mm</span></a>
<ul>
<li><a href="#" title="#"><span>Anti-Tank</span></a></li>
<li><a href="#" title="#"><span>Mortar</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>155 mm</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Rockets</span></a>
<ul>
<li><a href="#" title="#"><span>Aircraft Launched</span></a></li>
<li><a href="#" title="#"><span>Ground Launched</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>CAD/PAD</span></a>
<ul>
<li><a href="#" title="#"><span>Cartridge Activated Device</span></a></li>
<li><a href="#" title="#"><span>Propellant Activated Device</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Pyrotechnics</span></a>
<ul>
<li><a href="#" title="#"><span>Flares</span></a></li>
<li><a href="#" title="#"><span>Signals</span></a></li>
<li><a href="#" title="#"><span>Simulators</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Demolition</span></a>
<ul>
<li><a href="#" title="#"><span>Charges</span></a></li>
<li><a href="#" title="#"><span>Kits</span></a></li>
<li><a href="#" title="#"><span>Initators/Primers</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Chemical</span></a>
<ul>
<li><a href="#" title="#"><span>Smoke</span></a></li>
<li><a href="#" title="#"><span>Riot</span></a></li>
</ul>
</li>
<li><a href="#" title="#"><span>Search</span></a></li>
<li><a href="#" title="#"><span>Help</span></a></li>
</ul>
</div>
<div id="weapon">
<div id="itemBrief" style="color: black; font-weight: bold">This is the item brief containing nomenclature, description, use, wpn, type and dodic
<p id="nomen"></p>
<p id="descript"></p>
<p id="use"></p>
<p id="wpn"></p>
<p id="type"></p>
<p id="dodic"></p>
</div>
<div id="left">
<h3><a href="#" title="#">Weapon Particulars</a></h3>
<div id="wpnPartics">
<p>Now is the time for all good men to come to the aid of their country</p>
</div>
<h3><a href="#" title="#">Visual Aides</a></h3>
<div id="visAides">
<p>Who cares if they come to the aid of their own country. It has already gone to hell!</p>
</div>
</div>
<div id="right">
<h3><a href="#" title="#">Performance</a></h3>
<div id="perfs">
<p>Now is the time for all good men to come to the aid of their country</p>
</div>
<h3><a href="#" title="#">Containers</a></h3>
<div id="containers">
<p>Who cares if they come to the aid of their own country. It has already gone to hell!</p>
</div>
<h3><a href="#" title="#">Transportation Data</a></h3>
<div id="transData">
<p>Who cares if they come to the aid of their own country. It has already gone to hell!</p>
</div>
<h3><a href="#" title="#">References</a></h3>
<div id="References">
<p>Who cares if they come to the aid of their own country. It has already gone to hell!</p>
</div>
</div>
</div>
<div id="welcome">
<h2>Welcome to the Ammunition Multimedia Encyclopedia</h2>
<p>One mission within the DAC is to provide training on the storage, transport, and handling of munitions. This includes initial training as well as periodic follow-on training as new munitions are developed and shipped to the field. The goal of this website is to provide a comprehensive "one stop shop" to support personnel handling munitions. It provides an encyclopedia of currently used munitions which can be used for identification and refresher training.</p>
</div>
<div id="searchRequest"></div>
<div id="searchResults"></div>
<div id="securityNotice" title="Security Notice">
<p>You are not supposed to be here. Get out while you still can. We are tracking your IP and MAC address. Your computer will cease to operate in 60 seconds.
</p>
</div>
</body>
</html>
- // Specific JS scripting for AME Library
$(document).ready(function() {
$('#nav').droppy({
speed: 100
});
$('#left, #right').accordion({
fillspace: true,
autoHeight: false
});
});
/**************************** Global Site Styles **************************/
body {
background: #999999;
margin: 0 0 0 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
width: 975px;
height: 590px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#securityNotice {
display: none;
}
/******************************** Site Title/Header Styles ************************************/
div#header {
background-color: #FF9900;
border-style: none;
width: 100%;
height: 97px;
margin: 0 0 0 0;
}
div#header img {
float: left;
height: auto;
width: auto;
margin-left: 10px;
margin-top: 5px;
}
div#header h1 {
font-family: Garamond, Wide Latin, serif;
font-size: 36px;
font-style: oblique;
color: #385535;
text-align: center;
position: relative;
font-weight: bold;
padding-top: 10px;
margin-top: 0px;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#385535,direction=67,strength=15);
}
div#header h4 {
font-family: Garamond, Verdana, Arial, serif;
color: #385535;
text-align: center;
position: relative;
font-weight: bold;
font-style: oblique;
padding-bottom: 5px;
}
/********************End of Site Header styles ****************************/
/******************** Navigation Menu Styles *****************************/
/***************** Basic code - don't modify **************************/
#navWrapper {
z-index: 99;
}
#nav {
margin: 0;
padding: 0;
position: relative;
}
#nav li {
display: block;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
}
#nav a {
display: block;
}
#nav ul {
display: none;
position: absolute;
left: 0;
margin: 0;
padding: 0;
}
* html #nav ul {
line-height: 0;
} /* IE6 fix */
#nav ul a {
zoom: 1;
} /* IE6/7 fix */
#nav ul li {
float: none;
}
#nav ul ul {
top: 0;
}
/******************** Essentials - configure this *******************/
#nav ul {
width: 130px;
}
#nav ul ul {
left: 131px;
}
/***********************End of Configuration ***********************/
/********************* Everything else is theming ********************/
#nav {
background-color: #30A8C3;
height: 24px;
}
#navWrapper {
z-index: 99;
}
#nav *:hover {
background-color: blue;
}
#nav a {
border-right: 1px solid white;
color: white;
font-size: 12px;
padding: 6px;
line-height: 1;
}
#nav li.hover a {
background-color: #5E5A5A;
}
#nav ul {
top: 25px;
}
#nav ul li a {
background-color: #5E5A5A;
}
#nav ul a.hover {
background-color: #30A8C3;
}
#nav ul a {
border-bottom: none; /* 1px solid white */
border-right: none;
/*opacity: 0.9; This only works with FF */
filter: alpha(opacity=90); /* part of the CSS3 recommendation, this style is IE only */
}
/************************End of menu section ************************/
/*********************** content area styles *************************/
div#weapon {
height: 465px;
background-color: #000033;
text-align: center;
color:#FFFF00;
border: 1px solid red;
}
div#welcome {
display: block;
font-family: Arial, Helvetica, Verdana, sans-serif;
padding-right: 30px;
padding-left: 40px;
border: 1px solid red;
}
div#welcome h2 {
margin-top: 0;
padding-top: 60px;
padding-bottom: 30px;
text-align: center;
}
div#welcome p {
text-align: left;
}
div#weapon div#itemBrief {
background-color: #00FFCC;
border: medium dashed #660000;
}
div#weapon div#left {
clear: none;
float: left;
width: 45%;
}
div#weapon div#right {
clear: none;
float: left;
width: 45%;
}