-1

The code below is in the head section of my webpage. The HTML for the tags it is referencing(#dmsmenu and #dmssubmenu) are located in an external file that is loaded dynamically when the page loads. The problem is in IE8 specifically (everything works fine in Chrome and Safari). When the page loads, it will go into the function, but not execute the code contained in it. The code changes the background color and text color of the main menu bar, and should display the submenu. Any help would be appreciated.

$(window).load(function() {
$("#dmsmenu").css('background', '#FFFFFF');
$("#dmsmenu").css('color', '#DF7401');
$("#dmssubmenu").appendTo('#dmssubmenu');          
$("#dmssubmenu").show();
});

HTML 

<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>

Ext HTML menubar_index div

<div class="topgradientblueline">

<div id="wrapper">
    <div id="menuspacer">
        &nbsp;
    </div>
    <div id="dmsmenu" style="font-family:Sans-Serif; font-size:small; text-   decoration:none ">
        <a href="document_management_solutions.html">Document Management Solutions</a>
    </div>
    <div id="lsTMFmenu" style="font-family:Sans-Serif; font-size:small; ">
        <a href="TMF_solutions.html">Life Science TMF Solutions</a>
    </div>
    <div id="lssampmenu" style="font-family:Sans-Serif; font-size:small; ">
        <a href="lss_solutions.html">Life Science Sampling Solutions</a>
    </div>
    <div id="drsmenu" style="font-family:Sans-Serif; font-size:small; ">
        <a href="about_drs.html">About DRS</a>
    </div>

</div>                

</div>

Ext HTML menubar_sub div

<div style="height:50px; width:950px;">
<div id="dmssubmenu" style="display: none">
    <span class="menu2ndlevel"><a id="dmprofsvc" href="" style="text-decoration:none">Professional Services</a></span>
    <span class="menu2ndlevelorangeline">|</span> 
    <span class="menu2ndlevel"><a id="dmdocimgproc" href="#" style="text-decoration:none">Document/Image Processing</a></span>
    <span class="menu2ndlevelorangeline">|</span> 
    <span class="menu2ndlevel"><a id="dmworkflow" href="#" style="text-decoration:none">Workflow</a></span>
    <span class="menu2ndlevelorangeline">|</span> 
    <span class="menu2ndlevel"><a id="dmsoftware" href="#" style="text-decoration:none">Software Solutions</a></span>
    <span class="menu2ndlevelorangeline">|</span> 
    <span class="menu2ndlevel"><a id="dmdocretieval" href="#" style="text-decoration:none">Document Retrieval</a></span> 
</div>
</div>
Phil
  • 45
  • 1
  • 1
  • 4

1 Answers1

1

ie might take a little longer to load the whole page... try waiting a little longer, or a more commonly used practice is to use 

$(document).ready(function(){ ... });

Because this will execute when the HTML DOM is ready to be used & accessed.

Another option per SpYk3HH's suggestion is 

$(function() { ... });

jQuery - What are differences between $(document).ready and $(window).load?

Community
  • 1
  • 1
Adjit
  • 10,134
  • 12
  • 53
  • 98
  • Also same as `$(function() {` – SpYk3HH Jul 28 '14 at 15:33
  • I already tried document.ready. That makes it not work in Chrome also. – Phil Jul 28 '14 at 15:36
  • Then there is something going on with your code. 90% of my coding is done in chrome and I primarily use `$(document).ready()` – Adjit Jul 28 '14 at 15:38
  • @Phil then you're doing something else wrong. No reason `$(document).ready` wouldn't work. Now, you said something about stuff loading dynamically. If that's the case, you'll need to do styling work on those elements either from server, or on load via ajax. If there is events to assign, then you can use `$(document).on('event', '#elementID', function(e) { callback })` – SpYk3HH Jul 28 '14 at 15:39
  • I suspect because your menu is being loaded in dynamically, and because of the way different browsers handle the events, your menu has not been loading when the code executes. Do you have any console errors? (f12) – Adjit Jul 28 '14 at 15:40
  • So you may need to resort to AJAX to determine if the element has been loaded yet, and then do stuff. – Adjit Jul 28 '14 at 15:49
  • Do you have an example of that? – Phil Jul 28 '14 at 15:56
  • @Phil unfortunately I don't really have too much experience with AJAX – Adjit Jul 28 '14 at 17:48
  • My point was if window load is happening too late, switching to dom ready won't make help the problem (since it triggers even earlier.) Not to mention, why blindly suggest using one vs the other? The answer here suggests "waiting longer" by using the dom ready event instead of window load, which makes no sense because window load waits far longer than dom ready. – Kevin B Jul 28 '14 at 17:49
  • I added the following to the code - var q = document.getElementById("dmsmenu"); alert(q);. I get back null in the alert window which tells me that the element doesnt exist and IE wont apply the styles. So the question is how do I know when the elemen is created? – Phil Jul 28 '14 at 17:52
  • @KevinB that's not entirely true. In this situation, it is because window load fires after document ready. I had missed the part where the OP said the info was loaded dynamically. Also, I was suggesting that ie takes longer to load everything, so if you just check for the DOM to be ready instead of the whole page it might work. Was the first debugging idea that came to mind. – Adjit Jul 28 '14 at 17:54
  • @Phil AJAX. you can also try using `$('#menubar_index').load(function(){ ... });` – Adjit Jul 28 '14 at 17:58
  • I tried - $('#menubar_index').load(function(){$("#dmsmenu").css('background', '#FFFFFF');$("#dmsmenu").css('color', '#DF7401'); }); with no success – Phil Jul 28 '14 at 18:02
  • You could also try using `setInterval` and checking the existence of elements, and when you find it exists, execute. But I am not sure how efficient that is. – Adjit Jul 28 '14 at 20:40