SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My First JS Script - Not working in Firefox

    Hi all.

    I am looking for a script that will allow me to simply drop-down some content when a link is pressed.

    I did a little research, and came up with this script:

    Code JavaScript:
    function displayContent(hiddenContent){
    	if(hiddenContent.style.display=="none"){
    		hiddenContent.style.display="block";
    	}else{
    		hiddenContent.style.display="none";
    	}
    }

    Which is activated by using this link:

    Code HTML4Strict:
    <a href="javascript:displayContent(hiddenContent)">Show the content</a>

    It works great in Safari and IE7, but it won't work in my install of Firefox 2. Can anyone tell me how to make this work in all browsers, or how I can write this better?
    Last edited by Iceman90; Dec 1, 2007 at 19:00.

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try a niftier toggle script that is more generic:
    Code:
    function toggle() {
      for (var i=0, el; el = get(arguments[i]); i++) {
        el.style.display = (el.style.display != 'none' ? 'none' : '' );
      }
    }
    Nevertheless, I don't see where there is a reference to 'showThis'. Anyhow, here's how you would use the toggle function:
    Code:
    <div id="toggler">
      toggle content
    </div>
    <div id="example" style="display:none">
      Lorem Ipsum sit amor
    </div>
    <script>
    function get(el) {
      return document.getElementById(el);
    }
    function addEvent(el, type, fn) {
      if (window.addEventListener) {
        el.addEventListener(type, fn, false);
      } else if (window.attachEvent) {
        el.attachEvent('on' + type, fn);
      }
    }
    function toggle() {
      for (var i=0, el; el = get(arguments[i]); i++) {
        el.style.display = (el.style.display != 'none' ? 'none' : '' );
      }
    }
    
    
    // implementation
    addEvent(get('toggler'), 'click', function() {
      toggle('example');
    }
    </script>

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is here
    Code:
    <a href="javascript:displayContent(showThis)">Show the content</a>
    IE allows you to reference HTML elements just be mentioning their id ("showThis" in your case), however in Firefox you have to retrieve an element explicitly using "document.getElementById". Just replace that with
    Code:
    <a href="javascript:displayContent(document.getElementById('showThis'))">Show the content</a>
    and you're done.

    As for the better way to do the same, I'd suggest using a javascript library like jquery or prototype, which provides elegant and compact wrappers for things like this. Hope this helps.

  4. #4
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys.

    stereofrog, your method is what I used to get this working. I am looking ionto jquery and prototype now.

  5. #5
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more question....how could I go about hiding the link when the text drops down?

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A complete example with jQuery (a bit verbose for clarity):

    Code:
    <div id="link">show popup</div>
    <div id="popup" style="display:none;border:1px solid black">
    	<h2>Hello</h2>
    	<div id="close">close</div>
    </div>
    
    <script src="jquery.js"></script>
    
    <script>
    $(function() {
    	$("#link").click(function() {
    		$("#link").hide();
    		$("#popup").show();
    	});
    	$("#close").click(function() {
    		$("#link").show();
    		$("#popup").hide();
    	});
    })
    </script>
    At the first glance this looks quite cryptic, but is actually simple once you get into it.

    $(function() {... }) runs a function when the page is loaded

    $("...").click(function() {... }) runs a function when the element is clicked.

    $("#some_id") is a shortcut for "document.getElementById"


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
  •