Javascript problem with visible DIVs


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 14 of 14

Thread: Javascript problem with visible DIVs

  1. #1
    Join Date
    Dec 2004
    Posts
    64

    Question Javascript problem with visible DIVs

    I can't figure out how to fix this.

    The idea:
    In a column on the left, there are some image thumbnails. When you click an image, a larger image is loaded into a 'placeholder' image.
    At the same time, a related DIV is made visible. At this point, it works.

    The problem:
    ...but the DIVs that are made visible stay visible if you click on another thumbnail - I would like it to replace the current visible DIV. I end up with a whole load of DIVs visible, instead of just the one. Can anyone please help?

    Javascript code is:
    function showPic (whichpic, divName) {
    divStyle = document.getElementById(divName).style;
    if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    divStyle.display='block';
    } else {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    divStyle.display='none';
    }
    return false;
    } else {
    return true;
    }
    }

    This is the link code for the thumbnails, say, 2 of them:
    <a onclick="return showPic(this, 'image1')" href="images/image1.jpg" title="Some title text." target="_self"><img src="images/image1b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>
    <a onclick="return showPic(this, 'image2')" href="images/image2.jpg" title="Some title text." target="_self"><img src="images/image2b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>

    <div id="image1" style="display:none;">1</div>
    <div id="image2" style="display:none;">2</div>

    Thanks.

  2. #2
    Join Date
    Dec 2004
    Posts
    717
    It would be great if you can give us the code in details..eg: desc
    maybe.. attach ur code in ur thread.
    Best Regards,
    Michael Sync
    http://michaelsync.net

    The more you share,The more you get

  3. #3
    Join Date
    Jan 2005
    Posts
    413
    just give those divs a class instead of IDs, then create a divObj=document.getElementsByTagName('div');
    for(var i=0;i<divObj.length;i++)
    if(divObj.className=="myHiddenDivs")
    divObj[i].style.display='none';

    Now put that before the statement that makes the div you want show. You'll be hiding all of them, then making just one show afterward.

  4. #4
    Join Date
    Dec 2004
    Posts
    64
    Thanks - I inserted the code in various places within the showpic function, but it still shows all the DIVs, eventually.

    Sorry to be a pain, but perhaps you can point out where I've gone wrong?

    function showPic (whichpic, divName) {
    divStyle = document.getElementById(divName).style;

    if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    divObj=document.getElementsByTagName(divName);
    for(var i=0;i<divObj.length;i++)
    if(divObj.className=="myHiddenDivs")
    divObj[i].style.display='none';
    divStyle.display='block';
    } else {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    divStyle.display='none';
    }
    return false;
    } else {
    return true;
    }
    }

    The DIVs have been added a class name:
    <div class="myHiddenDivs" id="image1" style="display:none;">1</div>
    <div class="myHiddenDivs" id="image2" style="display:none;">2</div>

    Many thanks, I appreciate the help.

  5. #5
    Join Date
    Jan 2005
    Posts
    413
    Well personally I would not have written it this way, but I'll try to see if I can patch it.

  6. #6
    Join Date
    Dec 2004
    Posts
    64
    No worries, feel free to suggest alternative code if you prefer.

  7. #7
    Join Date
    Jan 2005
    Posts
    413
    Is this a script you found? or did you write it? The reason I ask is because I want to suggest a different approach, but I don't have time to actually write the function for you, and I also can't see the whole page and know just how you want it to work.

    So if you didn't find that script and have some scripting experience yourself, you could probably write it with a little guidance.

  8. #8
    Join Date
    Dec 2004
    Posts
    64
    Most of it is from a script I found, and I simply added to it. I pretty much understand the code, and have done some javascript coding (limited mostly to form validation) but I can't seem to crack this one at the moment.

    In so far as how the page looks, it doesn't really matter - so long as there are some thumbnails, a larger image area and a (html formatted) text area to suit.

    Ta.

  9. #9
    Join Date
    Jan 2005
    Posts
    413
    Please attach the whole document, I'll see what the best approach is.

  10. #10
    Join Date
    Dec 2004
    Posts
    64
    Sure, zip file attached, and thanks - but if it's a problem pls don't spend too much time on it!
    Attached Files Attached Files

  11. #11
    Join Date
    Jan 2005
    Posts
    413
    Ok, I have an approach now. Put the image tags an the descriptive text into the same div. 1 div for both image and text, for each set. Then in the function call of each, pass a number for the image/text set you want to show:
    function showHide(x) {
    var divObj=document.getElementsByTagName('div');
    for(var i=0;i<divObj.length;i++) {
    if(divObj[i].className=="myHiddenDivs")
    divObj[i].style.display='none';
    }
    divObj[x].style.display='block';
    }

    So the function call will be onclick="showHide(0)" that will show the 1st div containing the 1st img/text pair, 1 will show the 2nd, 2 the 3rd, and so on.

  12. #12
    Join Date
    Dec 2004
    Posts
    64
    Many thanks for your excellent help - I've been off for 3 days, so I've got some catching up to do work wise - I'll post results here in due course.

  13. #13
    Join Date
    Jan 2005
    Posts
    413
    I had to modify it. Dunno what I was thinking but 'div' was missing so it's corrected now

  14. #14
    Join Date
    Dec 2004
    Posts
    64
    Thanks

Similar Threads

  1. Replies: 5
    Last Post: 05-06-2006, 10:22 PM
  2. Java Applet Compiler problem?
    By mdl in forum Java
    Replies: 3
    Last Post: 03-07-2005, 02:34 AM
  3. Reliability Problem
    By elise in forum .NET
    Replies: 0
    Last Post: 10-30-2002, 04:39 AM
  4. problem with recordset from Sybase and Oracle
    By substring in forum VB Classic
    Replies: 2
    Last Post: 07-24-2001, 02:29 PM
  5. quote in a string : query problem under VB
    By tyris in forum VB Classic
    Replies: 6
    Last Post: 02-01-2001, 02:08 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center