BetaONE will rise again!

BetaONE will rise again! (http:\\b1.hcanet.com\forum/index.php)
-   Web Development (http:\\b1.hcanet.com\forum/forumdisplay.php?f=50)
-   -   Javascript slide (http:\\b1.hcanet.com\forum/showthread.php?t=21782)

*MO* 28th Sep 06 07:35 AM
Javascript slide
 
Good day everyone

I've got a small javascript problem. if you have a look on my site, http://www.entersite.co.za, you'll see there are 2 links on the left. Gallery 1 and Gallery 2. When you click either one, the right side panel will expand.

eg : Click Gallery 2, right side will expand with gallery 2 pictures. When I click gallery one, it will collapse, and then I have to click it again to expand the right side with pics from gallery 1.

I want it, so that when I click gallery 1, that the panel will shrink, and then expand again to show pics from gallery 1.

any help would be great. or an example of a script that does this will also help.

I'm not using divs or layers. I'm just using a script that increases the <td> height.

Code:
<script language="JavaScript" type="text/javascript">
 
        var resizeIntervalId = null;
 
        function startResize(id, height)
        {
                clearInterval(resizeIntervalId);
                resizeIntervalId = setInterval("resize('" + id + "', " + height + ");",1);
        }
 
function slide(id) {
var element = document.getElementById(id);
 
if(parseInt(element.style.height) == 100) {
startResize(id, 0);
if(parseInt(element.style.height) <= 90) {
        alert("here");
 
        startResize(id, 100);
}
 
} else {
startResize(id, 100);
 
}
}
        function resize(id, height)
        {
 
                var element = document.getElementById(id);
                var nextSize;
                if(parseInt(element.style.height) == height)
                {
                        clearInterval(resizeIntervalId);
                        return;
                }
                else if(parseInt(element.style.height) > height)
                {
                        nextSize = parseInt(element.style.height) - 10;
                }
                else
                {
                        nextSize = parseInt(element.style.height) + 10;
                }
                element.style.height = nextSize + "px";
        if((parseInt(element.style.height) == height)&&(parseInt(element.style.height) > 1)) {
        document.getElementById("imageGallery").innerHTML = "Test"
        } else {
        document.getElementById("imageGallery").innerHTML = ""
        }
        }
 
        </script>
 
<table>
        <td>
        <a href="#" onClick="javascript:slide('slider');">Gallery 1</a>
        <br>
        <a href="#" onClick="javascript:slide('slider');">Gallery 2</a>
</td>
<Td id="slider" style="width:100px; height:0px; background-color:white;" nowrap>
                <div id="imageGallery"></div>
                </TD>
</table>
any help would be great. Thanx

robinwilson16 15th Oct 06 06:48 PM
Fixed it for you :)

It now differentiates between the galleries and displays different text depending upon which was clicked. It expands when you click a gallery and contracts if you click the same gallery again or if you clicked another gallery it contracts the old one then expands the new one.
The contents for each gallery can be modified at the top of the script.

Hope this is what you wanted.
Robin :)

Code:
<script language="JavaScript" type="text/javascript">
               
                var gall1 = "Gallery 1 Content Here";
                var gall2 = "Gallery 2 Content Here";
                var curnum = 0;
  var resizeIntervalId = null;
 
  function startResize(id, height, num)
  {
 
                                clearInterval(resizeIntervalId);
  resizeIntervalId = setInterval("resize('" + id + "', " + height + ", " + num + ");",1);
  }
 
function slide(id, num) {
var element = document.getElementById(id);
 
if(parseInt(element.style.height) == 100) {
                startResize(id, 0, num);
if(parseInt(element.style.height) <= 90) {
 startResize(id, 100, num);
                curnum = num;
}
 
} else {
startResize(id, 100, num);
curnum = num;
 
}
}
  function resize(id, height, num)
  {
                                var element = document.getElementById(id);
  var nextSize;
                                if(parseInt(element.style.height) == height)
  {
        if (curnum != num) {
                                                  clearInterval(resizeIntervalId);
                                                  startResize(id, 100, num);
                                                  curnum = num;
                                                  return;
                                                } else {
                                                clearInterval(resizeIntervalId);
        return;
                                                }
  }
  else if(parseInt(element.style.height) > height)
  {
        nextSize = parseInt(element.style.height) - 10;
  }
  else
  {
        nextSize = parseInt(element.style.height) + 10;
  }
  element.style.height = nextSize + "px";
  if((parseInt(element.style.height) == height)&&(parseInt(element.style.height) > 1)&&(num == 1)) {
  document.getElementById("imageGallery").innerHTML = gall1
                }
                else if((parseInt(element.style.height) == height)&&(parseInt(element.style.height) > 1)&&(num == 2)) {
  document.getElementById("imageGallery").innerHTML = gall2
 } else {
  document.getElementById("imageGallery").innerHTML = ""
 }
  }
 
  </script>
 
<table width="100%" align="left">
 <td width="100">
 <a href="#" onClick="javascript:slide('slider', 1);">Gallery 1</a>
 <br>
 <a href="#" onClick="javascript:slide('slider', 2);">Gallery 2</a>
</td>
<Td id="slider" style="width:100px; height:0px; background-color:white;" nowrap>
  <div id="imageGallery"></div>
  </TD>
</table>


All times are GMT +1. The time now is 08:26 PM.

Powered by vBulletin® Version 3.6.5
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.