[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Smooth Show/Hide Effects? Is there a way?

Can anyone make the show/hide effect of this script smooth?

basically I want the content to have an animated crisp, smooth and fast drop down..

script will be available in next post..
0
andreni78
Asked:
andreni78
  • 2
  • 2
1 Solution
 
andreni78Author Commented:

<script>
var imgs=["http://www.opera.com/graphics/buttons/red_buy.gif","http://www.opera.com/graphics/buttons/red_dl.gif"]
function toggle(obj,nm)
{
     obj.src=obj.src==imgs[0]?imgs[1]:imgs[0];
     theDiv=document.getElementById(nm);
     theDiv.style.display=theDiv.style.display=="none"?"":"none";
}
</script>
Body:
<table border=0>
<tr>
     <td>
          <img src=http://www.opera.com/graphics/buttons/red_dl.gif onClick="toggle(this,'Arts')" border=0>
     </td>
</tr>
<tr>
     <td>
        <div id="Arts" style="position: relative; display:none;">
          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content
     </div>
     </td>
</tr>
</table>
0
 
m8rixCommented:
<html>

<head>
<title></title>
</head>

<body>
<script>

var imgs=["http://www.opera.com/graphics/buttons/red_buy.gif","http://www.opera.com/graphics/buttons/red_dl.gif"]
function toggle(obj,nm)
{
     obj.src=obj.src==imgs[0]?imgs[1]:imgs[0];
     theDiv=document.getElementById(nm);
     theDiv.style.top=getOffsetTop(obj)+23;
     theDiv.style.left=getOffsetLeft(obj);
     theDiv.style.pixelWidth=document.body.offsetWidth-50
     theDiv.style.display=theDiv.style.display=="none"?"":"none";
     animate(theDiv.id);
}
function animate(obj){
objID = document.getElementById(obj);
objID.style.color='#D1CCC5';
objID.style.pixelHeight=1
      if (objID.style.display ==""){
            changeheight(obj);
      }
}

function changeheight(obj,height){
objID = document.getElementById(obj);
if (height==undefined){height=1;}
objID.style.pixelHeight=height
//if (height==11){alert(objID.style.innerHeight);}
if (height<300){
  setTimeout("changeheight('" + obj + "'," + (height+5) + ")",5);}
else {objID.style.color='#000000';}
}

function getOffsetLeft (el) {
  var ol = el.offsetLeft;
  while ((el = el.offsetParent) != null)
    ol += el.offsetLeft;
  return ol;
}

function getOffsetTop (el) {
  var ot = el.offsetTop;
  while((el = el.offsetParent) != null)
   ot += el.offsetTop;
  return ot;
}
</script>
Body:
<table border=0>
<tr>
     <td>
          <img src=http://www.opera.com/graphics/buttons/red_dl.gif onClick="toggle(this,'Arts')" border=0 width="128" height="23">
     </td>
</tr>
<tr>
     <td>
        <div id="Arts" style="width:300;padding: 5px; position: absolute; display:none; background: #D1CCC5; overflow: hidden; height:1px;border: 1 solid #663300;color:#D1CCC5;">
          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content          Some content         Some content         Some content
         Some content
     </div>
     </td>
</tr>
</table>
</body>

</html>
0
 
andreni78Author Commented:
very nice work!! but.. . it's not working right on my form.. it goes down smoothly but:

1. not fast enough
2. it makes my centered webpage turn to left indent
3. my form within the <div></div> is actually longer than what this script is set to go down... so it stops abruptly...

so if you could make this script relative to it's surroundings.. that would be fantastic.. and no grays please =)

looks like u spent a lot of time writing this script.. so i'll make another post requesting fixes...
0
 
m8rixCommented:
Thanks for the feedback, as you may have probably noticed I have been away for a month. Is everything in order now or do you still require some assistance?
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now