Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: show/hide

  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide

    Hello, ok I need a script so that when the user mouses over b '<div id="a"></div>' is hidden and '<div id="b"></div>' is shown and when they mouse out 'b' is hidden and 'a' is shown and when the page loads 'a' is shown. Iv been looking everywhere for a script and cant find one. Any ideas?

    Code:
    <a onMouseOver="show('b')" onMouseOut="hide('b');show('a')">b</a>
    <div id="a">content a</div>
    <div id="b">content for b</div>
    
    or something like that

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's one way to do that.
    Code:
    <script type="text/javascript">
    if(document.all && !document.getElementById) { //IE4 support
      document.getElementById = function(id) { return document.all[id]; }
    }
    function show(id) {
      if(!document.getElementById) return;
      document.getElementById(id).style.display='';
    }
    function hide(id) {
      if(!document.getElementById) return;
      document.getElementById(id).style.display='none';
    }
    </script>
    Last edited by Kravvitz; 06-06-2006 at 05:33 AM.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Oakendin, one more question as you can see on my page http://digitaldreamdoor.sytes.net (rollover "a | b | c") even when the rows are hidden they still take up space. How can I fix this?
    Last edited by dddm; 06-06-2006 at 04:34 AM.

  • #5
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use the display property instead of the visibility property.

    The code in that thread is a bit dated.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #6
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Kravvitz, I wasn't able to get your code working. (im not very good with javascript)

  • #7
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry. I forgot the style object. I edited the code I posted earlier. Try it again.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #8
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now it works. Thank you very much.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •