I am in the process of creating a little webpage based on the Periodic Table of Elements, and I'm trying to make it so that if one were to click on an element's square, a dialog box will pop up to display a list of compounds. I've ran into an issue with displaying a jQuery dialog box with a custom theme that I generated at jQuery's ThemeRoller, however - it merely appears as plain text at the top left corner, and as far as I know, I've supplied the necessary links to the associated JS and CSS files.
I did have a working version beforehand, but I also have plans on using multiple themes for the dialog box (in the efforts to make them color-coded for the squares), and now trying to implement that has essentially thrown everything for a loop. Even scanning through the various other related questions on here has proven fruitless, not to mention the link to Filament's posting in regards to using multiple themes (http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/). Currently I only have one theme active.
Here is the code - I apologize for the clunky size (A table with 100+ cells is not exactly small...)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>The Periodic Table of Elements</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" href="js/jquery-ui-1.10.3/themes/blue/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
</head>
<body>
<h3>The Periodic Table of Elements</h3>
<div class="container">
<table width="100%" align="center" cellspacing="1px" cellpadding="1px">
<tr>
<th><p>Group<br/>Period</p></th>
<th><p>1</p></th>
<th><p>2</p></th>
<th><p>3</p></th>
<th><p>4</p></th>
<th><p>5</p></th>
<th><p>6</p></th>
<th><p>7</p></th>
<th><p>8</p></th>
<th><p>9</p></th>
<th><p>10</p></th>
<th><p>11</p></th>
<th><p>12</p></th>
<th><p>13</p></th>
<th><p>14</p></th>
<th><p>15</p></th>
<th><p>16</p></th>
<th><p>17</p></th>
<th><p>18</p></th>
</tr>
<tr>
<td id="number"><p><b>1</b></p></td>
<td>
<div class="element" id="hydrogen" style="background: #6699FF;">
<div class="number"><h6>1</h6></div>
<div class="symbol"><h4>H</h4></div>
<div class="weight"><h5>1.008</h5></div>
</div>
</td>
<td colspan="16"><p>Click on an element square to view associated compounds:</p></td>
<td>
<div class="element" id="helium" style="background: #FFCC33;">
<div class="number"><h6>2</h6></div>
<div class="symbol"><h4>He</h4></div>
<div class="weight"><h5>4.0026</h5></div>
</div>
</td>
</tr>
<tr>
<td id="number"><p><b>2</b></p></td>
<td>
<div class="element" id="lithium" style="background: #6699FF;">
<div class="number"><h6>3</h6></div>
<div class="symbol"><h4>Li</h4></div>
<div class="weight"><h5>6.94</h5></div>
</div>
</td>
<td>
<div class="element" id="beryllium" style="background: #6699FF;">
<div class="number"><h6>4</h6></div>
<div class="symbol"><h4>Be</h4></div>
<div class="weight"><h5>9.012</h5></div>
</div>
</td>
<td colspan="10"></td>
<td>
<div class="element" id="boron" style="background: #FFCC33;">
<div class="number"><h6>5</h6></div>
<div class="symbol"><h4>B</h4></div>
<div class="weight"><h5>10.81</h5></div>
</div>
</td>
<!-- I edited out the rest because it went 2000 characters ABOVE the limit...
but it should supply the general idea. -->
</tr>
</table>
</div>
<div class="dialog" title="Element Info:">
<p>Content</p>
</div>
<script>
$(document).ready(function() {
var blue = $(".dialog");
blue.dialog(
{
width: 400,
height: 500,
autoOpen: false,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(".dialog").hide();
$(".element").click(function(){
$(".dialog").dialog("open");
});
});
</script>
</body>
</html>
$(".dialog").hide();. Once widget is enabled parts of the widget that need to be hidden is handled internally by plugin and you haveautoOpen:falseto manage that. Always use widget API once you enable them