#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    349
    Rep Power
    15

    Question JavaScript: Forcing a script to load before page is displayed


    I use a popular dropdown menu script but always get errors the first time I visit the page on any computer. I think the problem is that the main HTML page is loaded before the very long script files are loaded. The HTML looks something like this:
    Code:
    <html>
    <head>
    <script language="javascript" src="includes/general.js"></script>
    </head>
    <body>
    <script language="javascript" src="includes/menu.js"></script>
    
    <div id="configurationMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="page.html">Page 1</a>
    
    blah blah blah
    
    </body>
    </html>
    How can I avoid the errors by forcing the JavaScript to load before the HTML is finished loading? Thanks!
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    14

    Lightbulb Clarification


    The scripts (external or internal) load before the HTML is processed, though they are not executed. Only after the page is loaded and rendered (event onLoad fires), the browser starts executing code.

    I use a popular dropdown menu script but (...)
    Let me ask you: do you know if you need to call any Initialization functions before you can use the scripts?
    Last edited by #ShAm4n; February 8th, 2004 at 12:51 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    349
    Rep Power
    15
    I don't know :-(

    Here is the HTML

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Shopping Cart System Administration</title>
    <link rel="stylesheet" type="text/css" href="includes/stylesheet.css">
    <script language="javascript" src="includes/general.js"></script>
    </head>
    <body bgcolor="#FFFFFF">
    <!-- header //-->
    <script language="javascript" src="includes/menu.js"></script>
    <!-- Menu bar #2. --><div class="menuBar" style="width:100%;"><a class="menuButton" href="" onclick="return buttonClick(event, 'configurationMenu');" onmouseover="buttonMouseover(event, 'configurationMenu');">Configuration</a><a class="menuButton" href="" onclick="return buttonClick(event, 'catalogMenu');" onmouseover="buttonMouseover(event, 'catalogMenu');">Catalog</a><a class="menuButton" href="" onclick="return buttonClick(event, 'modulesMenu');" onmouseover="buttonMouseover(event, 'modulesMenu');">Modules</a><a class="menuButton" href="" onclick="return buttonClick(event, 'customersMenu');" onmouseover="buttonMouseover(event, 'customersMenu');">Customers</a><a class="menuButton" href="" onclick="return buttonClick(event, 'taxesMenu');" onmouseover="buttonMouseover(event, 'taxesMenu');">Locations / Taxes</a><a class="menuButton" href="" onclick="return buttonClick(event, 'localizationMenu');" onmouseover="buttonMouseover(event, 'localizationMenu');">Localization</a><a class="menuButton" href="" onclick="return buttonClick(event, 'reportsMenu');" onmouseover="buttonMouseover(event, 'reportsMenu');">Reports</a><a class="menuButton" href="" onclick="return buttonClick(event, 'toolsMenu');" onmouseover="buttonMouseover(event, 'toolsMenu');">Tools</a></div><!-- configuration //-->
              <tr>
                <td>
    <div id="configurationMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=1"  >My Store</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=2"  >Minimum Values</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=3"  >Maximum Values</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=4"  >Images</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=5"  >Customer Details</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=7"  >Shipping/Packaging</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=8"  >Product Listing</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=9"  >Stock</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=10"  >Logging</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=11"  >Cache</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=12"  >E-Mail Options</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=13"  >Download</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=14"  >GZip Compression</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=15"  >Sessions</a> </div>            </td>
              </tr>
    <!-- configuration_eof //-->
    
    <!-- catalog //-->
              <tr>
                <td>
    <div id="catalogMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/categories.php"  >Categories/Products</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/products_attributes.php"  >Products Attributes</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/manufacturers.php"  >Manufacturers</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/reviews.php"  >Reviews</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/specials.php"  >Specials</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/products_expected.php"  >Products Expected</a></div>            </td>
              </tr>
    <!-- catalog_eof //-->
    
    
    <!-- modules //-->
              <tr>
                <td>
    <div id="modulesMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/modules.php?set=payment"  >Payment</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/modules.php?set=shipping"  >Shipping</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/modules.php?set=ordertotal"  >Order Total</a></div>            </td>
              </tr>
    <!-- modules_eof //-->
    <!-- customers //-->
              <tr>
                <td>
    <div id="customersMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/customers.php"  >Customers</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/orders.php"  >Orders</a></div>            </td>
              </tr>
    <!-- customers_eof //-->
    
    
    <!-- taxes //-->
              <tr>
                <td>
    <div id="taxesMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/countries.php"  >Countries</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/zones.php"  >Zones</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/geo_zones.php"  >Tax Zones</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/tax_classes.php"  >Tax Classes</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/tax_rates.php"  >Tax Rates</a></div>            </td>
              </tr>
    <!-- taxes_eof //-->
    
    <!-- reports //-->
              <tr>
                <td>
    <div id="toolsMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/backup.php"  >Database Backup</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/banner_manager.php"  >Banner Manager</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/cache.php"  >Cache Control</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/define_language.php"  >Define Languages</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/file_manager.php"  >File Manager</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/mail.php"  >Send Email</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/newsletters.php"  >Newsletter Manager</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/server_info.php"  >Server Info</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/whos_online.php"  >Who's Online</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/pdf_catalogue.php"   target="_BLANK">Update PDF Catalog</a> </div>            </td>
              </tr>
    <!-- tools_eof //-->
    
    <!-- header_eof //-->
    
    <!-- body //-->
    
    
    
    
    <table border="0" width="100%" cellspacing="2" cellpadding="2">
      <tr>
        <td width="0" valign="top"><table border="0" width="0" cellspacing="1" cellpadding="1" class="columnLeft">
    <!-- left_navigation //-->
    <!-- configuration //-->
              <tr>
                <td>
    <div id="configurationMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=1"  >My Store</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=2"  >Minimum Values</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=3"  >Maximum Values</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=4"  >Images</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=5"  >Customer Details</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=7"  >Shipping/Packaging</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=8"  >Product Listing</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=9"  >Stock</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=10"  >Logging</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=11"  >Cache</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=12"  >E-Mail Options</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=13"  >Download</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=14"  >GZip Compression</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/configuration.php?gID=15"  >Sessions</a> </div>            </td>
              </tr>
    <!-- configuration_eof //-->
    
    <!-- catalog //-->
              <tr>
                <td>
    <div id="catalogMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.surfbonus.com/cat_admin/categories.php"  >Categories/Products</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/products_attributes.php"  >Products Attributes</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/manufacturers.php"  >Manufacturers</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/reviews.php"  >Reviews</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/specials.php"  >Specials</a> <a class="menuItem" href="http://www.surfbonus.com/cat_admin/products_expected.php"  >Products Expected</a></div>            </td>
              </tr>
    <!-- catalog_eof //-->
    
        </table>
    <!-- body_text //-->
    <br>
    </body>
    </html>
  6. #4
  7. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2004
    Location
    0ffice[c0mput3r] || (Uni())
    Posts
    543
    Rep Power
    14
    hknight,

    It is impossible to learn what the scripts do and require YOU to do. As you may have noticed by now, the dropdown menu scripts are located externally. Therefore, noone can evaluate what is going on with your code as you've not included in your post...

    Try to look in those external scripts for any function(s) which may seem to initialize something....

    I can't do any better as you've not provided much info.


    Anyway, it is better not to post the ENTIRE code because of space issues, I think...
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1959
    To make it easier on everyone, yourself included, please format and reduce your code. For example, there is a single line that runs 15&ndash;1600 characters. That is very hard to read. The line begins
    Code:
    <div id="configurationMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="http://www.sur&hellip;
    Formatted and reduced, it would look something like this;
    Code:
              <div id="configurationMenu" class="menu" onmouseover=
              "menuMouseover(event)">
    	  
              <a class="menuItem" href=
                "http://www.surfbonus.com/cat_admin/configuration.php?gID=1">
                My Store</a>
    	  <a class="menuItem" href=
                "http://www.surfbonus.com/cat_admin/configuration.php?gID=2">
                Minimum Values</a>
    
    &hellip; <!-- more links -->
    
            </div>
          </td>
    cheers,

    gary
    Last edited by kk5st; February 8th, 2004 at 02:50 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo