Solved

javascript onClick change div

Posted on 2004-08-19
4
2,225 Views
Last Modified: 2007-12-19
Hello,

I have two links (images), first for backward second for forward.

I would linke to change (n) divs back and forward with this two buttons. Example on http://www.otteybypamp.com/en/majcka.asp?menuid=majcka, but there I change only pictures, now I need the layers.

Thank you,
Mitja
0
Comment
Question by:msmid
  • 2
4 Comments
 
LVL 1

Accepted Solution

by:
johanmulder earned 125 total points
ID: 11840693

<SCRIPT LANGUAGE="JavaScript">

var DivCount = 3;
var DivCurrent = 1;

function showAnotherDiv(forward)
{
    //first, hide current layer
    document.getElementById("imgDiv"+DivCurrent).style.display = "none";

   
    //then, check forward/backward
    if(forward)
    {
       DivCurrent++;      
       if(DivCurrent > DivCount)
          DivCurrent = 1;
     }
     else
     {
        DivCurrent--;
        if(DivCurrent < 1)
           DivCurrent = DivCount;
     }

     //display new layer
     document.getElementById("ïmgDiv"+DivCurrent).style.display = "block";

}

</SCRIPT>


<DIV ID="imgDiv1" STYLE="display:block"><IMG SRC="image1.jpg"></DIV>
<DIV ID="imgDiv2" STYLE="display:none"><IMG SRC="image2.jpg"></DIV>
<DIV ID="imgDiv3" STYLE="display:none"><IMG SRC="image3.jpg"></DIV>

<IMG SRC="backward.jpg" onClick="javascript:showAnotherDiv(false);">
<IMG SRC="forward.jpg" onClick="javascript:showAnotherDiv(true);">

Good luck with this one!
0
 
LVL 5

Expert Comment

by:LindzK
ID: 11840810
When i tested that code in IE6, it didn't work, it does work in ns7 though.

a slight modification to the code,  should make it work in both popular browsers ( as follows : )#

The script takes in the div id, as the one to show, if you need more than two divs, you would just 'hide' more of them, in the javascript block, then make visible the one past into the equation

<script language="javascript">
  var visdiv = 'first';
  function SwapDiv(div)
  {
    if (div != visdiv)
      {
      document.getElementById(div).style.visibility='visible';
        document.getElementById(visdiv).style.visibility='hidden';
        visdiv = div;      
      }
  }
</script>

<div id="second" style="position:absolute; top:0px; left:0px; visibility:hidden;">
second div
</div>
<img src="back.gif" width="32" height="32" alt="" border="0" onclick="SwapDiv('first')">
<img src="forward.gif" width="32" height="32" alt="" border="0" onclick="SwapDiv('second')">
0
 
LVL 1

Expert Comment

by:johanmulder
ID: 11840862
you can also replace those rules:
   document.getElementById("imgDiv"+DivCurrent).style.display = "none";
and  
   document.getElementById("imgDiv"+DivCurrent).style.display = "block";

with:

if(document.all)
   document.all("imgDiv"+DivCurrent).style.display = "none";
else
   document.getElementById("imgDiv"+DivCurrent).style.display = "none";

and

if(document.all)
   document.all("imgDiv"+DivCurrent).style.display = "block";
else
   document.getElementById("imgDiv"+DivCurrent).style.display = "block";

0
 

Author Comment

by:msmid
ID: 11849668
Thank you johanmulder.

Mitja
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question