SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Do I Initialize Onmouseover Event from External File?

    This javascript code works fine when embeded in a given page and fails to work when I transfer it over to an external file. I don't have much of an idea why. Can anyone help me figure out how to make this work externally, please? My goal is to make it work and to understand why it works.

    -------------------------------------------------------------------
    <html>
    <head>
    <title>Blah Blah Blah</title>

    <style type="text/css">

    #description_box {
    width: 100%;
    background-color: #9C7BBD; /* purple */
    border-bottom: 1px solid #E0E0E0; /* light-gray */
    font-weight: 600;
    }

    .description_block {
    display: none;
    }

    .active_description_block {

    display: block;
    width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: small;
    color: #FFFFFF; /* white */
    text-align: left;
    font-family: verdana, arial;
    }

    </style>

    <script type="text/javascript">

    var theDescription;

    function showLinkDescription(descriptNum) {
    if(theDescription) {
    theDescription.className = "description_block";
    }
    theDescription = document.getElementById('description_' + descriptNum);
    theDescription.className = "active_description_block";

    }

    function init(currentPage) {
    document.getElementById(currentPage).onmouseover();
    }

    </script>


    </head>

    <body id="prep-course_index" onLoad="init('faculty')" >

    <div id="navbar">

    <ul id="navigation">
    <li><a name="home" id="home" href="index.html" target="_self" onmouseover="showLinkDescription('1')">Prep-Course Home</a></li>
    <li><a name="faculty" id="faculty" href="estate_planning_faculty.html" target="_self" onmouseover="showLinkDescription('2')">Estate Planning Faculty</a></li>
    <li><a name="content_library" id="content_library" href="enter_content_library.html" target="_self" onmouseover="showLinkDescription('3')">EnTER Content Library</a></li>
    <li><a name="registration" id="registration" href="assets/csg_registration.pdf" target="_self" onmouseover="showLinkDescription('4')">Register</a></li>
    <li><a name="contact_enter" id="contact_enter" href="contact_enter.html" target="_self" onmouseover="showLinkDescription('5')">Contact EnTER</a></li>
    </ul>

    </div>

    <div id="description_box">

    <p id="description_1" class="description_block">Basic information about the EnTER Prep Course and about the Certified Specialist Exam</p>
    <p id="description_2" class="description_block">A list of the EnTER Faculty with links to their individual home pages.</p>
    <p id="description_3" class="description_block">Subject matter of each 2-hour (audio/video) segment.</p>
    <p id="description_4" class="description_block">Complete this form to register for the 2007 Estate Planning Specialist Course.</p>
    <p id="description_5" class="description_block">Contact us at Estate &amp; Trust Education Resources, LLC.</p>

    </div>

    </body>

    </html>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to wrap all that javascript in this:
    Code:
    window.onload = function() {
    //all that JS
    }

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is this line supposed to do?
    Code:
    document.getElementById(currentPage).onmouseover();

  4. #4
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    You need to wrap all that javascript in this:
    Code:
    window.onload = function() {
    //all that JS
    }
    I've tried that. The code in my external file still isn't working. Am I doing something wrong? It looks like this:
    --------------------------------------------------------------------
    window.onload = function() {

    var theDescription;

    function showLinkDescription(descriptNum) {
    if(theDescription) {
    theDescription.className = "description_block";
    }
    theDescription = document.getElementById('description_' + descriptNum);
    theDescription.className = "active_description_block";

    }

    function init(currentPage) {
    document.getElementById(currentPage).onmouseover();
    }

    }

  5. #5
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser
    What is this line supposed to do?
    Code:
    document.getElementById(currentPage).onmouseover();
    This line is meant to initialize the page's first visible description based on the value passed from the body's onload event.
    Code:
    <body id="prep-course_index" onLoad="init('faculty')" >
    The value is essentially just the page name.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, you can't put () after onmouseover. And things inside getElementById() should have single quotation marks (' ').

    Check your page in Firefox and see what errors the javascript console spits out.

  7. #7
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ------------------------------------------
    Error: Error in parsing value for property 'background-repeat'. Declaration dropped.
    Source File: .../css/prep-course_styles.css
    Line: 150
    ------------------------------------------

    Error: init is not defined
    Source File: .../index.html
    Line: 1
    ------------------------------------------

    I don't mind the first error. I just deleted the "()" from onmouseover and I still get the same error. I get different errors from my IDE: "Expected an assignment or function call and instead saw an expression" and "onmouseover declaration is not found".

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you call mouseover and not onmouseover.

    like programatically calling a click on a button you use

    document.getElementById('button').click();

    When programatically setting an event, such as onload you remove the parenthesis, and if it is required then you wrap it in an function.

    window.onload = init; // without paramaters
    window.onload = function()
    {
    init('parameter'); // with paramaters
    };


  9. #9
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts
    you call mouseover and not onmouseover.

    like programatically calling a click on a button you use

    document.getElementById('button').click();

    When programatically setting an event, such as onload you remove the parenthesis, and if it is required then you wrap it in an function.

    window.onload = init; // without paramaters
    window.onload = function()
    {
    init('parameter'); // with paramaters
    };
    This is valuable information I'm sure but I haven't found a way to apply it to my code successfully. I've been working on it from the moment you posted to now... Would you (or someone) mind showing me how to apply this to my code? I am trying to create the following effect from an external file rather than from a script embedded in every page:
    Code:
    <html>
      <head>
        <title>Blah Blah Blah</title>
         
         <style type="text/css">
         
              #description_box {
                   width: 100%;
                   background-color: #9C7BBD; /* purple */
                  border-bottom: 1px solid #E0E0E0; /* light-gray */
                  font-weight: 600;
              }
    
              .description_block {
                   display: none;
              }
    
              .active_description_block {
                   
                   display: block;
                   width: 680px;
                   margin-left: auto;
                   margin-right: auto;
                   padding-top: 8px;
                   padding-bottom: 8px;
                   font-size:  small;
                   color: #FFFFFF; /* white */
                   text-align: left;
                   font-family: verdana, arial;
              }
              
         </style>
         
         <script type="text/javascript">
    
    			var theDescription;
    					
    			function showLinkDescription(descriptNum) {
    				if(theDescription) {
    				theDescription.className = "description_block";
    				}
    				theDescription = document.getElementById('description_' + descriptNum);
    				theDescription.className = "active_description_block";
    			
    			}
    					
    			function init(currentPage) {	
    				document.getElementById(currentPage).onmouseover();
    			}
    			
         </script>
    
    
      </head>
      
      <body id="prep-course_index" onLoad="init('faculty')" >
    
        <div id="navbar">
        
             <ul id="navigation">
                  <li><a name="home" id="home" href="index.html" target="_self" onmouseover="showLinkDescription('1')">Prep-Course Home</a></li>
                  <li><a name="faculty" id="faculty" href="estate_planning_faculty.html" target="_self" onmouseover="showLinkDescription('2')">Estate Planning Faculty</a></li>
                  <li><a name="content_library" id="content_library" href="enter_content_library.html" target="_self" onmouseover="showLinkDescription('3')">EnTER Content Library</a></li>
                  <li><a name="registration" id="registration" href="assets/csg_registration.pdf" target="_self" onmouseover="showLinkDescription('4')">Register</a></li>
                  <li><a name="contact_enter" id="contact_enter" href="contact_enter.html" target="_self" onmouseover="showLinkDescription('5')">Contact EnTER</a></li>
             </ul>
             
        </div>
        
        <div id="description_box">
    
              <p id="description_1" class="description_block">Basic information about the EnTER Prep Course and about the Certified Specialist Exam</p>
              <p id="description_2" class="description_block">A list of the EnTER Faculty with links to their individual home pages.</p>
              <p id="description_3" class="description_block">Subject matter of each 2-hour (audio/video) segment.</p>
              <p id="description_4" class="description_block">Complete this form to register for the 2007 Estate Planning Specialist Course.</p>
              <p id="description_5" class="description_block">Contact us at Estate &amp; Trust Education Resources, LLC.</p>
    
        </div>
    
    </body>
    
    </html>

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This part:
    Code:
    			function init(currentPage) {	
    				document.getElementById(currentPage).onmouseover();
    			}
    Is not going to work, it doesn't do anything. You can't, as far as I know, simulate a mouseover via javascript. You can however call the function that happens upon mouseover. Try this:
    Code:
    function init(currentItem) {	
    showLinkDescription(currentItem);
    }
    
    ..
    
    <body onload="init('2');"........>

  11. #11
    SitePoint Member JaeWebb's Avatar
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by jimfraser
    This part:
    Code:
    			function init(currentPage) {	
    				document.getElementById(currentPage).onmouseover();
    			}
    Is not going to work, it doesn't do anything. You can't, as far as I know, simulate a mouseover via javascript. You can however call the function that happens upon mouseover. Try this:
    Code:
    function init(currentItem) {	
    showLinkDescription(currentItem);
    }
    
    ..
    
    <body onload="init('2');"........>
    You are my hero. The code above works just fine.

    This was a nerve-racking experince but I came out on the other end actually understanding what to do going forward. Thanks to everyone for the guidance and thank you to jimfraser for setting me straight.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •