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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide all images, and show certain ones ONCLICk

    Hey guys, I'm new to the forums, so if i post anything wrong let me know.

    I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.

    here's the script...

    <script language="javascript">

    function showone(x) {
    document.getElementByName('a').style.display='none';
    document.getElementByName('b').style.display='none';
    document.getElementByName('c').style.display='none';

    document.getElementByName(x).style.display='block';
    }
    </script>


    and the code...

    <a href="#" onClick="showone('a'); ">show CAT. A</a><br>
    <a href="#" onClick="showone('b'); ">show CAT. B</a><br>
    <a href="#" onClick="showone('c'); ">show CAT. C</a><br>
    <a href="#">show all cats</a><br>

    <br>

    <img name="a" src="imgs/a1.jpg" /><br>
    <img name="b" src="imgs/b1.jpg" /><br>
    <img name="a" src="imgs/a2.jpg" /><br>
    <img name="a" src="imgs/a3.jpg" /><br>
    <img name="b" src="imgs/b2.jpg" /><br>
    <img name="c" src="imgs/c1.jpg" />


    Here's what it looks like...
    http://mattfalcone.com/tests/showhide.html

    except the links don't work like they should, and I can't figure out why.

    I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it.

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    It's document.getElementsByName. Elements, not element.
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I changed that, so the script now looks like...


    <script language="javascript">

    function showone(x) {
    document.getElementsByName('a').style.display='none';
    document.getElementsByName('b').style.display='none';
    document.getElementsByName('c').style.display='none';


    document.getElementsByName(x).style.display='block';
    }


    </script>

    and it still isn't working.

    Anything else I'm missing?

  • #4
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    Well, if the script works, I guess not. Also, a word of advice, use "onclick" not "onClick". Although they both work, "onclick" is the correct one.
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know why this isn't working, but I might be using the wrong idea in the first place...

    Is there an easier way to put images into groups according to criteria determined by me, and have links that filter the groups by category (example is how youtube works, where you can see certain categories of videos by clicking on that category)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    You have to get the array and then apply the styles one element of the array at a time.

    Code:
    var images = document.getElementsByName('a');
    for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';
    But a better way to do what you want:
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    #holder img { visibility: hidden;}
    </style>
    <script type="text/javascript">
    function show(which) 
    {
        var images = document.getElementById("holder").getElementsByTagName("img");
        for ( var i = 0; i < images.length; ++i )
        {
            var image = images[i];
            image.style.visibility = ( image.src.indexOf(which) > 0 ) ? "visibile" : "hidden";
        }
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="return show('/a'); ">show CAT. A</a><br>
    <a href="#" onclick="return show('/b'); ">show CAT. B</a><br>
    <a href="#" onclick="return show('/c'); ">show CAT. C</a><br>
    <a href="#" onclick="return show('/');">show all cats</a><br>
    <br>
    <div id="holder">
    <img src="imgs/a1.jpg" /><br>
    <img src="imgs/b1.jpg" /><br>
    <img src="imgs/a2.jpg" /><br>
    <img src="imgs/a3.jpg" /><br>
    <img src="imgs/b2.jpg" /><br>
    <img src="imgs/c1.jpg" />
    </div>
    </body>
    </html>
    Or you could base it on name or on class name or or or ... But if your image file names really match the pattern, why not use them?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    Actually, you might not want to change visibility. Making an element's visibility "hidden" makes it invisible but it still takes up space (unless of course it's absolutely positioned.) Since it's not absolutely positioned, it will still take up space, although it will be invisible.

    display: none causes an element to be both invisible and take up no space.
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Agreed. But I figured that was his design decision.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help guys, this worked to get the show/hide function working...

    <script language="javascript">

    function showone(x) {

    var images = document.getElementsByName('a');
    for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

    var images = document.getElementsByName('b');
    for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

    var images = document.getElementsByName('c');
    for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

    var images = document.getElementsByName(x);
    for ( var i = 0; i < images.length; ++i ) images[i].style.display='block';


    }


    </script>

    It's in action here...
    http://mattfalcone.com/tests/showhide.html

    Only one problem now. The images are now side by side, in 2 columns, but when i click on "show category a," it shows only the imgs with name="a" but they stack on top of eachother instead of being in order and side by side.

    Not sure if this is fixable, but if anyone knows I'de appreciate it. Thanks again for the help so far.

  • #10
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    I think this is what Julian was talking about. To get them to stay where they are, use visibility instead of display (values for visibility are "visible" and "hidden").


  •  

    Posting Permissions

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