Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Oct 2010
    Posts
    10
    Member #
    24131
    Hi
    I have a list of links to PDF articles, each link has a corresponding div that contains an introduction to the article. I'm using the onmouseover event in each link to show the corresponding introduction div and hide all the otheres. The order of the pdf links and the introductory divs are the same. The code below works in IE but not in FireFox - the problem in FF is the index returned from the onmouseover event is double what it should be, so the first PDF link shows the second div, the second PDF link shows the fourth div ect.

    javascript:

    Code:
    function displayIntroDiv(obj)
        {
         var x = getIndexOfLink(obj);
         var div = document.getElementsByTagName('div');
         for (var i=0; i<div.length; i++)
         {
           if (div[i].className == 'hideIntro' || div[i].className == 'showIntro') {
               if ( i == x) {
                     div[i].className = 'showIntro';
                   }
                else
                     {
                     div[i].className = 'hideIntro';
                     }
                                                                         }
        }
        }
    
    function getIndexOfLink(obj)
                   {
      var liText = obj.innerHTML;
        var ulObj = obj.parentNode;
        var liLength = ulObj.childNodes.length;
        for(var i=0; i<liLength; i++)
        {
         if(ulObj.childNodes[i].innerHTML==liText)
         {
          return i;
         }
        }
        return false;
        }
    HTML Code:
    /* css: */
    .hideIntro
    { display: none; }
    
    .showIntro
    { width: 20%;
      margin: 0 0 0 0;
        float: right;
        display: block;
    }
     
    /* html: */
    <ul id="HowReikiWorks">
        <li onmouseover="displayIntroDiv(this);"><a href=...</a></li>
        <li onmouseover="displayIntroDiv(this);"><a href=...</a></li>
        <li onmouseover="displayIntroDiv(this);"><a href=...</a></li>
        <li onmouseover="displayIntroDiv(this);"><a href=...</a></li>
    </ul>
    <div class="hideIntro"> .... Click to read the full article. </div>
    <div class="hideIntro"> .... Click to read the full article. </div>
    <div class="hideIntro"> .... Click to read the full article. </div>
    <div class="hideIntro"> .... Click to read the full article. </div>
    I'm not a javascript expert - barely a novice - the code has been cut and pasted from what I managed to Google, so please could you include the javascript code in any reply.

    Thanks

    David

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    David,

    I've got a bunch of JS-specific comments on your code, but let's set them aside.

    The technique of checking indexes is a bit less than direct. I'd suggest a direct method if I knew what you were doing. Your post begins with "I have a list ..." Where? How long? Something you can easily embed in code, or does it need to come from a database?

    So, begin at the beginning and explain what you want to do and then we can look for a simple way to do it.

    By the by, I've never seen a situation where FF makes mistakes. It's pretty reliable.

    martin

  4. #3
    Junior Member
    Join Date
    Oct 2010
    Posts
    10
    Member #
    24131
    Hi Martin,
    Thanks for your reply.
    By a list I mean the
    <ul id="HowReikiWorks"
    <li...
    I included in the HTML in my post above.
    Since posting this question my requirements (and coding ) have changed.
    I now have several submenus each with lists of articles and corresponding divs with introductions as follows:

    HTML Code:
    <ul id="menu">
            <li>
                <a onclick="CloseAllIntros();" href="#">How Reiki Works</a>
                <ul id="HowReikiWorks">
                    <li onmouseover="HowReikiWorksIntro(this);"><a...></a</li>
    
                    <li onmouseover="HowReikiWorksIntro(this);"><a...></a</li>
    
                    <li onmouseover="HowReikiWorksIntro(this);"><a...></a</li>
    
                    <li onmouseover="HowReikiWorksIntro(this);"><a...></a</li>
    
                </ul>
            </li>
            <li>
                <a onclick="CloseAllIntros();" href="#">Health and Healing</a>
                            <ul id="HealthAndHealing">
    
                    <li onmouseover="HealthAndHealingIntro(this);"><a...></a</li>
    
                    <li onmouseover="HealthAndHealingIntro(this);"><a...></a</li>
    
                    <li onmouseover="HealthAndHealingIntro(this);"><a...></a</li>
    
                </ul>
            </li>
            <li>
                <a onclick="CloseAllIntros();" href="#">Health and Healing</a>
                            <ul id="ReikiAndReligion">
    
                    <li onmouseover="ReikiAndReligionIntro(this);"><a...></a</li>
    
                </ul>
            </li>
    
    </ul>
    
    <div id="introDivs">
    <div id="HowReikiWorksIntros">
            <div class="hideIntro">......</div>
            <div class="hideIntro">......</div>
            <div class="hideIntro">......</div>
    
            <div class="hideIntro">......</div>
    
    </div>
    
    <div id="HealthAndHealingIntros">
            <div class="hideIntro">......</div>
            <div class="hideIntro">......</div>
            <div class="hideIntro">......</div>
    
    </div>
    
    <div id="ReikiAndReligionIntros">
            <div class="hideIntro">.....</div>
    </div>
    
    </div>
    So the idea is when you hover over one of the items in the list then the corresponding introductory <div> is opened, the div is closed only when another item in the list is hovered over or another one of the sublists is opened.

  5. #4
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Let me try to restate what you are doing. You present the visitor with a list. When the visitor hovers over a list item, you pop up additional information re that item. When the viewer hovers over another list item you close the info re the former item and pop up new info re the new item. You didn't mention it, but I'll assume for completeness that you want a little red "X" in the corner (or something functionally the same) so that the visitor can explicitly close the added info box.

    Open a fresh page in your text editor and write out the above. Be sure to use zero coding terms. (You don't want to say "I have a div ..." because divs might not be the best solution.) Now we're ready to start coding.

    Step 1 is always the same: fold your arms across your chest. (Some would sit on their hands. The important thing is to get your fingers off the keyboard.) Keep fingers off keyboard except to add to your code-free description. When you are happy with your description then you can start to think about code.

    You think about two things simultaneously: code and testing. What data structures do you need? What subprograms to do what with them? How do you test them?

    First you want information displays that you can turn on and off. Divs are a good place to start. Leave your existing code alone. Start a new page (with a doctype) and copy two info divs into its <body>. (They need ids. Anything important needs an id.) Then make a <script> section at the end of the <body>. (See Souders first book. It goes at the end of the body.)

    An event-driven program (big words? well, that's what you're building) has a build phase and then an operating phase. Start with a simple build phase, like this:

    var displays = {
    foo: document.getElementById( 'foo' ),
    bar: document.getElementById( 'bar' )
    }

    (Use meaningful names, of course.) Now write some test code to verify this object:

    alert( displays.foo );
    alert( displays.bar );

    Both these should report something like "HTMLElement". OK so far? If you've hidden these (display: none, or visibility: hidden) in the markup, unhide them. Next thing to write is a routine that hides them all. Something like this:

    function hideInfoDivs() {
    for ( name in displays ) {
    displays[ name ].style.display = 'none';
    }
    }

    Test your page without calling this routine. It should show both divs. (Separate them a scootch so you can see at least a little of each one.) Now add this to the building code:

    hideInfoDivs();

    With that you should have a blank page. Not easy to be sure its all OK.

    Next, create a button to display one of your divs:

    <button id=foo_button> Show Foo! </button>

    In the build section of your code, get this button and assign a reference to a function that displays the div:

    var foo_button = document.getElementById( 'foo_button' );
    foo_button.onclick = show_foo; // no parens here!

    function show_foo() { displays.foo.style.display = 'block'; }

    Add another button to display the other div. In each div, add a closing button. Even if the closing button is just a simple "X" in the corner (white text on red background, sans-serif and bold is almost as good as a graphic, and a lot less trouble), use the same technique of grabbing a reference at build time and assigning a function that does the actual work. Assign the function (not a string that calls the function) into your onclick handlers. (See above where it says "no parens here!"? That's where it assigns the function to the onclick property of the button. When clicked, your browsers will call the function.)

    Now you should have two divs that you can turn on and off independently. Next, improve the code to turn one on by turning all the others off. Simple:

    function show_foo() { // improved version!
    hideInfoDivs();
    displays.foo.style.display = 'block';
    }

    With that you should be off to the races. Good luck!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com