SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with this anchor

    I'm working on this page. I'm using this function to show or hide various elements on a page:

    Code:
    function showHide(elementID, show){
    	var el = document.getElementById(elementID);
    	if(show){
    		el.style.display = '';
    	} else {
    		el.style.display = 'none';
    	}
    	return false;
    }
    The HTML to trigger it looks something like this:

    HTML Code:
    <p class="showHideLinks">
    	<a href="../_images/docTypesBeta.gif" id="show2" onclick="showHide('prototype2', 1); showHide('show2', 0); showHide('hide2', 1); return false;" >Show</a> 
    	<a href="#" id="hide2" onclick="showHide('prototype2', 0); showHide('show2', 1); showHide('hide2', 0);" style="display: none;" >Hide</a>
    </p>
    Everything works fine except that when you click on a "hide" link, since they all have href="#", it naturally takes you to the top of the page. Is there anything I can do to prevent that?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe to use "javascript:void(0)" instead "#"?

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add a "return false" statement to the onclick handler.

    It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well . . . actually, I was TRYING to use unobtrusive JavaScript!

    I think I did the first link right, right?

    Code:
    <a href="../_images/docTypesBeta.gif" id="show2" onclick="showHide('prototype2', 1); showHide('show2', 0); showHide('hide2', 1); return false;" >Show</a>
    At least it works if people have JavaScript disabled so I was proud. But I didn't know what to do with the second link:

    Code:
    <a href="#" id="hide2" onclick="showHide('prototype2', 0); showHide('show2', 1); showHide('hide2', 0); return false" style="display: none;" >Hide</a>
    How would I rewrite that as unobtrusive JavaScript? The return false does work, though, so thanks.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, why not use "javascript:void(0)" instead "#"? (I'm just curious) I've tried and it's working for me...


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
  •