SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    id.Style.Display not working in Mozilla Firebird?

    Code:
     
    <a href="#" onclick="mtabb.style.display='none'">TESTING</a> // <a href="#" onclick="mtabb.style.display='block'">PUT IT BACK!!! NOW!!!</a>
    Working fine in Opera and IE6, doesn't work in Mozilla Firebird. What it's supposed to do is upon clicking TESTING, the <div> with ID 'mtabb' disappears, and on clicking put it back now, it returns . Just won't work in Mozilla Firebird, any workarounds?

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is, that IE (and, apparently, Opera) auto-map object ids into global variables. This was first done by IE in ver 4 (I think) to make it's browser more appealing to developers, since this was "easier". In actuality, it's just pollution of the global namespace.

    So, what you need to do for Moz is use a proper reference method, such as document.getElementById.
    Code:
    onclick="document.getElementById('mtabb').style.display='none'">
    Of course, it would probably be better to abstract this through a function
    Code:
    function hideElem( elemId )
    {
    	document.getElementById( elemId ).style.display = 'none';
    }
     
    function showElem( elemId )
    {
    	document.getElementById( elemId ).style.display = 'block';
    }
     
    ...
     
    <a href="#" onclick="hideElem( 'mtabb' );">TESTING</a>
    <a href="#" onclick="showElem( 'mtabb' );">PUT IT BACK!!! NOW!!!</a>
    That way, you can re-use it for any element on the page.

    If you wish to support version 4 browsers, you can abstract this further
    Code:
    function hideElem( elemId )
    {
    	getElement( elemId ).style.display = 'none';
    }
     
    function showElem( elemId )
    {
    	getElement( elemId ).style.display = 'block';
    }
     
    function getElement( elemId )
    {
    	return ( typeof document.layers != "undefined" ) ?
    		document.layers[elemId] :
    		( document.getElementById || document.all )( elemId );
    }
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help beetle! .

    Just an extensional question; how would I go about having to click just one link, to say firstly hide an element, and then press the same link to have it show again?

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create a toggle. Just use one function for both hiding/displaying. If it's hidden, show it -- if not -- vice versa.

    Think you can handle it?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a go .


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
  •