Loading ...
Sorry, an error occurred while loading the content.
 

YUI menu + event onDOMReady + JS/CSS 304 status code

Expand Messages
  • Jeff L.
    In my setup, I combine all my javascripts and all my css into one gzipped file each. These files are cache and if browser requested them again within expiry
    Message 1 of 1 , May 5 11:58 PM
      In my setup, I combine all my javascripts and all my css into one gzipped file each. These files are cache and if browser requested them again within expiry period, the server will simply return 304 status code (or not modified indication) such that the javascripts and the css will not be downloaded again.

      Testing with YUI menu
      css: /yui/reset-fonts/reset-fonts.css,/yui/menu/assets/skins/sam/menu.css

      js: /yui/yahoo-dom-event/yahoo-dom-event.js,/yui/container/container_core-min.js,/yui/menu/menu-min.js

      With the following markup (from YUI menu example):
      <div id="mymenubar" class="yui-skin-sam yuimenubar yuimenubarnav">
          <div class="bd">
              <ul class="first-of-type">
                  <li class="yuimenubaritem first-of-type">
                  
                      <a class="yuimenubaritemlabel" href="#file">File</a>

                      <div id="file" class="yuimenu">
                          <div class="bd">
                              <ul>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#">New File <em class="helptext">Ctrl + N</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#">New Folder</a>
                                  </li>
                                  <li class="yuimenuitem">

                                      <a class="yuimenuitemlabel" href="#open">Open <em class="helptext">Ctrl + O</em></a>

                                      <div id="open" class="yuimenu">
                                          <div class="bd">
                                              <ul class="first-of-type">
                                                  <li class="yuimenuitem">
                                                      <a class="yuimenuitemlabel" href="#">Application 1</a>
                                                  </li>
                                                  <li class="yuimenuitem">
                                                      <a class="yuimenuitemlabel" href="#">Application 2</a>
                                                  </li>
                                                  <li class="yuimenuitem">
                                                      <a class="yuimenuitemlabel" href="#">Application 3</a>
                                                  </li>
                                                  <li class="yuimenuitem">
                                                      <a class="yuimenuitemlabel" href="#">Application 4</a>
                                                  </li>
                                              </ul>            
                                          </div>
                                      </div>                    
                                  
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#">Print <em class="helptext">Ctrl + P</em></a>
                                  </li>
                              </ul>
                          </div>
                      </div>      
                  
                  </li>
                  <li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="#"edit>Edit</a>

                     <div id="pim" class="yuimenu">
                          <div class="bd">
                              <ul class="first-of-type">
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
                                  </li>
                              </ul>            

                              <ul>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Paste<em class="helptext">Ctrl + V</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
                                  </li>
                              </ul>            

                              <ul>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Select All<em class="helptext">Ctrl + A</em></a>
                                  </li>
                              </ul>            

                              <ul>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
                                  </li>
                                  <li class="yuimenuitem">
                                      <a class="yuimenuitemlabel" href="#"> Find Again<em class="helptext">Ctrl + G</em></a>
                                  </li>
                              </ul>            

                          </div>
                      </div>                      

                  </li>
              </ul>
          </div>
      </div>    

      And the following javascript (from YUI menu example):
      <?php echo javascript_tag("
      YAHOO.util.Event.onDOMReady(function () {

          //    Instantiate a MenuBar, passing in the id of the HTML element
          //    representing the MenuBar.

          var oMenuBar = new YAHOO.widget.MenuBar('mymenubar', { autosubmenudisplay: true });
          

          // Render the MenuBar instance
          
          oMenuBar.render();
          
      });
      ") ?>

      Everything looks fine the first time (with browser downloaded gzipped JS/CSS). But if I click refresh, the JS/CSS will not be re-downloaded as the server returns 304 status code, the menu is not displayed correctly.
      I suspect that the onDOMReady event is triggered too early somehow?

      Since I don't know how to upload screencapture with this post, a little hard to explain what the menu looks like when things are not working. I'll try to describe anyway: The styling is not displayed but the hover action is still working. The menu is shown as unstyled list.

      Any help is appreciated.
      Thanks.


    Your message has been successfully submitted and would be delivered to recipients shortly.