Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I get variables in external JS file to work in html page?

    Hi, and thank you for this forum. I have learned much from it.

    I need help getting variables in an external js file to transfer to the html page that uses them. I have an html page that lists verses to memorize, which, when the mouse hovers over a particular verse, a small popup reveals the book reference for that verse, thus giving a check to see if the user has accurately referenced that verse for its source.
    I have an external js file (VERSES.js) that houses the verses and popup references sequentially as elements in an array and then writes them to the html document. A simplifed version of what I am using, with only a few verses listed here as an example, and that works beautifully, is given below:

    <html>
    <head>
    <title>MY MEMORY VERSES</title>
    <script type = "text/javascript" language="javascript"
    src = "VERSES.js">
    </script>
    <!-- import style sheet -->
    <link rel = "stylesheet" href = "VERSES.css">
    <body>

    <div id="0" onmouseover="popUp(this.id,'1')"
    onmouseout="popHide()" href ="#" >
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <div id ="1" class="popUp">
    &nbsp;&nbsp;
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <p><br /></p><p>

    <div id="2" onmouseover="popUp(this.id,'3')"
    onmouseout="popHide()" href ="#" >
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <div id ="3" class="popUp">
    &nbsp;&nbsp;
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <p><br /></p><p>

    <div id="4" onmouseover="popUp(this.id,'5')"
    onmouseout="popHide()" href ="#" >
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <div id ="5" class="popUp">
    &nbsp;&nbsp;
    <script type = "text/javascript" language="javascript">
    document.write(a[b]);
    b=b+1
    </script>
    </div>
    <p><br /></p><p>
    </body>
    </html>

    As I said, this works exactly as I want it to, with the popup being hidden and showing only if the reader hovers the cursor over a particular verse, upon which the popup reveals itself and the reference source for that verse, then disappears again when the mouse leaves that verse's area.

    The problem, however, is that, as you can see, I have listed each <div> individually for each verse, because that is the only way I can make the popups work correctly. This is clearly not practical when hundreds of verses are involved (which they are). What I need help with is how to code this so
    that I don't have to individually code each <div> with the proper identifier to make the correct popup (array element) pop up when the associated verse is hovered over.

    Below is the external javascript used to list the array elements that produce the verses in the html document:


    var a = new Array();

    a[0] = "I AM who I AM";
    a[1] = "Exodus 3:14";
    a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
    a[3] = "Deut 8:3";
    a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
    a[5] = "Deut 29:29";
    a[6] = "Though he slay me, yet will I trust him!";
    a[7] ="Job 13:15";

    var b = -2;
    for (var i = 0; i <3; i++)
    {
    b +=2
    var writeExternalContent = ' ';

    writeExternalContent += '<div id=\'i\' ';
    document.write(a[b]) ;

    writeExternalContent += '</div><p><br />';

    document.write(writeExternalContent);
    }


    As you can see, every even-numbered array element is a verse, and the following odd element is the associated book reference used for the popup for that verse. This works fine. What I have been unable to figure out is how to make the popups work after using this external js file to write the long list of array values (verses), instead of coding each verse and reference directly in the html file, as in the first example. I have tried a for-loop, which seems the logical way to go, but because it is an external
    js file, which also seems the right way to go, I get bogged down in how to transfer the id tags from the external file to the html file.

    How do I get the external js file to write to the html file the correct id number into the proper <div> tags so that there is no need to manually write each such <div> tag id number?

    This is all on a local computer for now. I hope I posted this code in the proper format for this fourm. I read the instructions for new posters but am unsure of some of them regarding how to post the actual code, and the whole concept of actually participating in a forum is new also. But as I said at the beginning, this is a great place. I have learned much from this forum and have looked at every page in the javascript archives here (over a hundred pages of js-- wow!).

    Thank you for your time and help.

    -- truthsfriend

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    This should be close to what you are looking for.
    Code:
    VERSES.js .....
    
    function genContent() {
    var a = new Array();
    a[0] = "I AM who I AM";
    a[1] = "Exodus 3:14";
    a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
    a[3] = "Deut 8:3";
    a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
    a[5] = "Deut 29:29";
    a[6] = "Though he slay me, yet will I trust him!";
    a[7] = "Job 13:15";
    
     for (var i = 0;i < a.length;i+=2) {
       var writeExternalContent = '<p><div id="'+(i+1)+'"';
       writeExternalContent += ' onmouseover="popUp(this.id)"';
       writeExternalContent += ' onmouseout="popHide()">'+a[i]+'</div></p>';
       document.getElementById('content').innerHTML += writeExternalContent;
     }
    }
    
    
    
    
    page.html.....
    
    <html>
    <head>
    <title>MY MEMORY VERSES</title>
    <script type="text/javascript" src="VERSES.js"></script>
    </head>
    <body onload="genContent()">
    
    <div id="content"> </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thank you rwedge

    rwedge -
    rwedge--
    Thank you for replying. I was thrilled that someone took the time to do that. I tried to reply earlier but maybe I didn't post the reply right as it took too long to finish and I had to leave so cut it short. Now that I am back, I have had time to try your suggestion and will try to post a reply again.

    I inserted your code suggestions and this error message came up from Firebug debugger for Firefox browser each time the mouse hovered over a verse (and with no popups):

    objPopUp has no properties
    objPopUp.style.visibility = 'hidden';

    The js code line it highlighted was:

    if (xPos + objPopUp.offsetWidth>document.body.clientWidth)

    I had this problem before, when I was trying to get this to work. Any suggestions? Thank you for taking the time to look at this.
    -- truthsfriend

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    I have not seen the 'pop' functions so I did not try to include them.

    Here is an expanding script with show/hide functions added,
    it should show the hidden divisions on the right side:
    Code:
    VERSES.js....
    
    var a = new Array();
    a[0] = "I AM who I AM";
    a[1] = "Exodus 3:14";
    a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
    a[3] = "Deut 8:3";
    a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
    a[5] = "Deut 29:29";
    a[6] = "Though he slay me, yet will I trust him!";
    a[7] = "Job 13:15";
    function genContent() {
     for (var i = 0;i < a.length;i+=2) {
       var writeExternalContent = '<p><div id="'+(i+1)+'"';
       writeExternalContent += ' onmouseover="popUp(this.id)"';
       writeExternalContent += ' onmouseout="popHide(this.id)">'+a[i]+'</div><br />';
       writeExternalContent += '<div id="loc'+(i+1)+'" class="ans">';
       writeExternalContent += a[i+1]+'</div></p>';
       document.getElementById('content').innerHTML += writeExternalContent;
     }
    }
    function popUp(num) {
    var popObj = document.getElementById('loc'+num);
    var cy = document.getElementById('content').offsetTop;
    var cw = document.getElementById('content').offsetWidth;
    var y = document.getElementById('content').offsetLeft + cw;
    var x = document.getElementById(num).offsetTop;
    x = document.all? x + cy: x;
    popObj.style.top = x+'px';
    popObj.style.left = y+'px';
    popObj.style.display='block';
    }
    function popHide(num) {
    document.getElementById('loc'+num).style.display='none';
    }
    
    
    page.html....
    
    <html>
    <head>
    <title>MY MEMORY VERSES</title>
    <style type="text/css">
    body { margin: 10px; }
    .ans { position: absolute;
           display: none;
           color: #3366ff;
           background-color: #dddddd;
           top: 0px;
           padding: 10px 50px 10px 50px;
           border: 1px solid #ff0000;
    }
    .que { width: 400px; }
    </style>
    <script type="text/javascript" src="VERSES.js"></script>
    </head>
    <body onload="genContent()">
    
    <div id="content" class="que"></div>
    
    </body>
    </html>
    Last edited by rwedge; 07-15-2007 at 03:42 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oops - missing pop up code

    rwedge -

    Thanks again. You are correct in that I did not include the popup code last time. My error for forgetting to do that; I meant to, just missed it. Sure makes it hard to figure out how to help someone when they don't give you all the relevant information, doesn't it? Here it is below:

    var objPopUp = null;
    function popUp(event,objectID)
    {
    objPopTrig = document.getElementById(event);
    objPopUp = document.getElementById(objectID);
    xPos = objPopTrig.offsetLeft;
    yPos = objPopTrig.offsetTop+objPopTrig.offsetHeight +100;

    if (xPos + objPopUp.offsetWidth>document.body.clientWidth)
    xPos = xPos - objPopUp.offsetWidth;

    if (yPos +objPopUp.offsetHeight>document.body.clientHeight)
    yPos = yPos - objPopUp.offsetHeight-objPopTrig.offsetHeight;
    objPopUp.style.left = xPos + 'px';
    objPopUp.style.top = yPos + 'px';
    objPopUp.style.visibility = 'visible';
    }
    function popHide()
    {
    objPopUp.style.visibility = 'hidden';

    objPopUp = null;
    }
    }

    I know you have since written your own popup code for me to try to clear this up, but I would like you to examine what I was using to see if the Firebug error message now makes any sense to you. I repeat that message below:


    objPopUp has no properties
    objPopUp.style.visibility = 'hidden';

    The js code line it highlighted was:

    if (xPos + objPopUp.offsetWidth>document.body.clientWidth)

    I separated that line of code above to make it easier to find.


    So far, when I have substituted the new popup code you wrote into the program, it has not worked; now even the verses do not write out--in fact, nothing at all shows on the html page. I imagine I have not inserted the code correctly or made some other simple error. I will keep trying and look over everything as I get the time, then get back to you. Just wanted to update you and thank you again. If you haven't given up on me yet, and are still interested, let me know if seeing the popup code I have been using helps in making sense of the Firebug error message and what to do about it using the old popup code or other suggestions you have.

    Thanks again.
    -- truthsfriend

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    The script should work, I checked it in IE, Firefox and Opera.
    You get an error with your popup code because it is expecting more arguments than I used.
    You do not need the 'event' argument, and the objectId is set from the 'this.id'

    Paste this code in a single page as it is with the script included , not external, and see if it works for you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>MY MEMORY VERSES</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body { margin: 200px; }
    .ans { position: absolute;
           display: none;
           color: #3366ff;
           background-color: #dddddd;
           top: 0px;
           padding: 10px 50px 10px 50px;
           border: 1px solid #ff0000;
    }
    .que { width: 400px; }
    </style>
    <script type="text/javascript">
    var a = new Array();
    a[0] = "I AM who I AM";
    a[1] = "Exodus 3:14";
    a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
    a[3] = "Deut 8:3";
    a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
    a[5] = "Deut 29:29";
    a[6] = "Though he slay me, yet will I trust him!";
    a[7] = "Job 13:15";
    function genContent() {
     for (var i = 0;i < a.length;i+=2) {
       var writeExternalContent = '<p><div id="'+(i+1)+'"';
       writeExternalContent += ' onmouseover="popUp(this.id)"';
       writeExternalContent += ' onmouseout="popHide(this.id)">'+a[i]+'</div><br>';
       writeExternalContent += '<div id="loc'+(i+1)+'" class="ans">';
       writeExternalContent += a[i+1]+'</div></p>';
       document.getElementById('content').innerHTML += writeExternalContent;
     }
    }
    function popUp(num) {
    var popObj = document.getElementById('loc'+num);
    var cy = document.getElementById('content').offsetTop;
    var cw = document.getElementById('content').offsetWidth;
    var y = document.getElementById('content').offsetLeft + cw;
    var x = document.getElementById(num).offsetTop;
    x = (document.all && ! window.opera)? x + cy: x;
    popObj.style.top = x+'px';
    popObj.style.left = y+'px';
    popObj.style.display='block';
    }
    function popHide(num) {
    document.getElementById('loc'+num).style.display='none';
    }
    </script>
    </head>
    <body onload="genContent()">
    
    <div id="content" class="que"></div>
    
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yahoo! It Works!

    rwedge --
    Thank you! Yes, it does work. I want to give you details, if you don't mind.
    First, I did as you suggested, which was simply to try your code all in one html document. That worked fine. And thank you for checking it out on all those browsers beforehand. It amazes me that you not only take time to respond but go the extra step and try it out like that to check it.
    Then I started removing sections of your code to external files, one section at a time, to make sure it still worked with each change I made. First came the array elements, moved to an external file. Fine. Then the JS code that uses those array elements to write to the page display. Still fine. Great. I also import the css style sheet, so that the final result is almost all external files. I like that because, at least for this type of document, it makes sense to me. Why fill up the html document with all those array elements, plus even the comparatively short js code?
    Now, look at the final result below. There are actually only three "active" lines of code:
    1. Importing the css style sheet
    2. Importing the js data sheet that also formats somewhat
    3. A single line of "active" code in the actual html document
    other than the above import lines of code (the div specifiers)


    <html>
    <head>
    <title>VERSES</title>

    <!-- import style sheet -->
    <link rel = "stylesheet" href = "VERSES.css">

    <!-- Use external javascript to write verses from array in that script -->
    <script type = "text/javascript" language="javascript"
    src = "VERSES.js"></script>

    </head>
    <body onload="genContent()">

    <div id="content" class="que"></div>

    </body>
    </html>

    Isn't that beautiful? So clean and crisp and brief? That is what I was after--and I could not have done it without your help. Thank you so much!

    Now, that that is done, my next consideration is whether I want to try to make the array list an XML document instead of JS. That way it would be easier for someone else unfamiliar with JS to add to or alter the verse array. They could more easily substitute their own choices for verses rather than use the default ones. What do you think? Does that sound like a good idea? If so, I may be back here again if, again, I run into trouble. I understand I would have to post it to the XML board rather than here. In any case, thank you again so much for taking time out of your life to help me.
    -- truthsfriend


  •  

    Posting Permissions

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