SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This script works in IE5+, I want it to work in Mozilla/Netscape6

    This is what I want my code to do: Monitor the page for the onClick event. When the mouse is clicked over a div with the class="Outline", then a corresponding div will be displayed.

    On the page I have:
    <div class="Outline" id="out1">content</div>
    <div id="out1Details" style="display:none">content</div>
    <div class="Outline" id="out2">content</div>
    <div id="out2Details" style="display:none">content</div>

    When somebody clicks on the div with class="Outline" and id="out2" then the div with id="out2Details" will be displayed. I want this to be a global function. In other words, I don't want to muck up my code by including onClick attributes within the <div> tags themselves.

    This is what I want to happen on my page: when a user clicks on the "social" or "technology" headings on the left-hand-side of the screen, sub-headings will appear.


    The following code works in Internet Explorer. I have tested it in IE6. I see no reason why it wouldn't work in IE5. An example of the code without all of the checks for objects (that will be used to route Netscape and IE to the appropriate code).
    Code:
    <script type="text/javascript">
    
    function clickHandler(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    	if (evt) {
    		var elem = (evt.target) ? evt.target : evt.srcElement
    		if (document.all) {
    			if (elem.className == "Outline") {
    				targetId = elem.id + "details";
    				targetElement = document.all(targetId);
    				if (targetElement.style.display == "none") {
    					targetElement.style.display = "";
    				} else {
    					targetElement.style.display = "none";
    				}
    			}
    		} else if (document.getElementById) {
    			//Insert Netscape6-Compatible Code Here
    		}
    	}
    }
    
    if (document.all) {
    	document.onclick = clickHandler;
    } else if (document.getElementsByTagName) {
    	//Insert Netscape-6 Equivalent of document.onclick Here
    }
    
    </script>
    1. The IE code monitors the page for the document.onclick event. When this even occurs, the function clickHandler() is called. I don't know what the Netscape equivalent of this is. I believe that it would be something along the lines of document.getElementsByTagName("Body").addEventListener("click", clickHandler(),false);

    However, I'm not sure of the exact code. For instance, I think that I can use the "Body" tag because events would percolate up. However, I'm not sure what the best tag to use in this situation is.

    2. The IE code checks if the class of the referrer is "Outline". If so, it displays (unhides) the appropriate <div> based on the relevant id. For example, if the user clicks on the <div> with id="out2", the the div with id="out2details" is revealed. Similairly, if the user clicks on the div with id="out2", and the the <div> with id="out2details" is already revealed, the the script hides the corresponding <div>.

    How do I translate this script to be Netscape-compatible?

    Any assistance would be much appreciate. If I haven't been clear, please ICQ me at 67112112.
    Last edited by prowsej; Dec 21, 2001 at 22:05.

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be a long a detailed replay about advanced event handling. While I could do that I will simply shell you to a great tutorial on Netscape DOM event handling and let you work through it. Your code looks good so far just add the netscape versions of event handlers

    http://www.webreference.com/js/column74/

    I would recommend reading throuhg all of the netscape 6 articles he has written they are incredible.

    Best of luck and if you have any problems feel free to PM me. I used this tutorial to create a drag and drop cascading menu object
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. After much trial and error I've finally figured out how to get my script working in Netscape6! Boy, I sure hope I've never got to do that again! Gee, I wish Microsoft would get its act together and support the standards so that I don't have to write two versions of every script that I create!

    Well, I know how to do that for next time. Thanks! Gosh - that was a *lot* of work!!!

    My final product is at www.josh.prowse.com

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by prowsej
    Thanks for the reply. After much trial and error I've finally figured out how to get my script working in Netscape6! Boy, I sure hope I've never got to do that again! Gee, I wish Microsoft would get its act together and support the standards so that I don't have to write two versions of every script that I create!

    Well, I know how to do that for next time. Thanks! Gosh - that was a *lot* of work!!!

    My final product is at www.josh.prowse.com
    Glad I could help. It does take a lot of work but once you have an understanding it is easy to pull off next time. If you understand event hadling and oop in javascript you can pull off some advanced animations in JS. Congrats
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


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
  •