I have a webpage that has div tags in it that loads menu bar/sub bar content dynamically through jQuery (I want the content external so I can load it on multiple pages). In the page, there is a jQuery function that alters the menu bar contents when the mouse is over a specific part of the menu bar (like the one on msn.com).
The problem is the content loads, but the jQuery doesn't work (using the .on() function).
The first part of the function shows a sub menu based upon which menu item you mouse over. The second part(s) of the function set the background color of the mouse over-ed menu item and also sets the color of the other items back to its original.
If I put the content directly on the page, it works fine. Any help is appreciated as I can not figure this out.
HTML - content loaded dynamically into each div
<tr>
<td align="center" valign="middle">
<div id="menubar_index">
<!--menubar contents are loaded dynamically-->
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div id="menubar_sub">
<!--menubar contents are loaded dynamically-->
</div>
</td>
</tr>
HTML Content that is loaded into first div(menubar_index):
<div class="topgradientblueline">
<div id="wrapper">
<div id="menuspacer">
</div>
<div id="dmsmenu" style="font-family:Sans-Serif; font-size:small; ">
Document Management Solutions
</div>
<div id="lsTMFmenu" style="font-family:Sans-Serif; font-size:small; ">
Life Science TMF Solutions
</div>
<div id="lssampmenu" style="font-family:Sans-Serif; font-size:small; ">
Life Science Sampling Solutions
</div>
<div id="drsmenu" style="font-family:Sans-Serif; font-size:small; ">
About DRS
</div>
</div>
</div>
HTML Content that is loaded into the second div(menubar_sub):
<div style="height:50px; width:950px;">
<div id="dmssubmenu" style="display: none">
<a href="#" style="text-decoration:none">DMS Sub Menu</a>
</div>
<div id="lsTMFsubmenu" style="display: none">
<a href="#" style="text-decoration:none">LSTMF Sub Menu</a>
</div>
<div id="lssampsubmenu" style="display: none">
<a href="#" style="text-decoration:none">LSSamp Sub Menu</a>
</div>
<div id="drssubmenu" style="display: none">
<a href="#" style="text-decoration:none">DRS Sub Menu</a>
</div>
</div>
jQuery that resides on the page:
<script type="text/javascript">
$(document).ready(function(){
$("#menubar_index").load("menubar_index.html");
$("#menubar_sub").load("menubar_sub.html");
$("#menubar_ims").load("menubar_ims.html");
$("#pageheader").load("page_header.html");
$("#footer_news").load("footer_news.html");
$("#vmenubar_ims").load("vmenubar_ims.html");
$("#vmenubar_tmfps").load("vmenubar_tmfps.html");
$("#pagefooter").load("page_footer.html");
});
//jquery to show & hide divs
$(document).ready(function() {
// doc mgmt slns menu item
$("#dmsmenu").on("mouseenter", function() {
// hide/show sub menus
$("#dmssubmenu").show();
$("#lsTMFsubmenu").hide();
$("#lssampsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background(blue), text(white) of all other menu items
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// life sci TMF slns menu item
$("#lsTMFmenu").on("mouseenter", function() {
// hide/show sub menus
$("#lsTMFsubmenu").show();
$("#dmssubmenu").hide();
$("#lssampsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff');
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background(blue), text(white) of all other menu items
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// life sci samp slns menu item
$("#lssampmenu").on("mouseenter", function() {
// hide/show sub menus
$("#lssampsubmenu").show();
$("#dmssubmenu").hide();
$("#lsTMFsubmenu").hide();
$("#drssubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background/text of other menu items back to normal
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#drsmenu").css('background', '#0A0A2A');
$("#drsmenu").css('color', '#ffffff');
});
// about DRS menu item
$("#drsmenu").on("mouseenter", function() {
// hide/show sub menus
$("#drssubmenu").show();
$("#dmssubmenu").hide();
$("#lsTMFsubmenu").hide();
$("#lssampsubmenu").hide();
// set background(white), text(orange) and cursor(pointer) of this item
$(this).css('background', '#ffffff')
$(this).css('color', '#DF7401');
$(this).css('cursor', 'pointer');
// set background/text of other menu items back to normal
$("#lsTMFmenu").css('background', '#0A0A2A');
$("#lsTMFmenu").css('color', '#ffffff');
$("#dmsmenu").css('background', '#0A0A2A');
$("#dmsmenu").css('color', '#ffffff');
$("#lssampmenu").css('background', '#0A0A2A');
$("#lssampmenu").css('color', '#ffffff');
});
});
</script>
CSS:
#wrapper {
width: 1360px;
margin: 0 auto;
background-color:#0B0B3B;
}
#dmsmenu, #lsTMFmenu, #menuspacer, #lssampmenu, #drsmenu {
float: left;
min-height: 20px;
color:White;
border-spacing:2px;
}
#dmsmenu {
width: 230px;
text-align:center;
font-weight:bold;
}
#lssampmenu {
width: 230px;
text-align:center;
font-weight:bold;
}
#drsmenu {
width: 130px;
text-align:center;
font-weight:bold;
}
#menuspacer {
width: 50px;
}
#lsTMFmenu {
width: 220px;
text-align:center;
font-weight:bold;
}
.topgradientblueline
{
background-color: #0A0A2A;
width:1100px;
height:20px;
}
