asked on

Slide out tab

I've been fighting for hours to get a simple javascript working, and just can't seem to do it.

I have a table with navigation images inside it (a splash screen for a big site), center aligned to the browser window. The table (yah for table-based design) is full of images, which when you roll over them, they change color, etc. However - when you roll over certain ones, I want a "hidden" tab to slide out from "behind" the table, and stay out.

I can easily add a column to the table, and put an image into it. I thought maybe a div with an image in it which just moves out when you ask it to, which isn't hard, but how to get it to slide? Also, it needs to be relative, which again is difficult.

As per usual, showing the client the idea tomorrow, so I am desperate. Help!

dbritt

Here ya go:

================================================

<html>
<head>
      <title>Test Page</title>

      <script language="JavaScript" type="text/javascript">

      var resizeIntervalId = null;

      function startResize(id, width)
      {
            clearInterval(resizeIntervalId);

            resizeIntervalId = setInterval("resize('" + id + "', " + width + ");", 1);
      }

      function resize(id, width)
      {
            var element = document.getElementById(id);

            var nextSize;

            if(parseInt(element.style.width) == width)
            {
                  clearInterval(resizeIntervalId);
                  return;
            }
            else if(parseInt(element.style.width) > width)
            {
                  nextSize = parseInt(element.style.width) - 1;
            }
            else
            {
                  nextSize = parseInt(element.style.width) + 1;
            }

            element.style.width = nextSize + "px";
      }
      </script>
</head>

<body>
      <div id="tbl" style="width:100px; height:100px; position:absolute; top:10px; left:10px; background-color:black;" onmouseover="javascript:startResize('slider', 50);" onmouseout="javascript:startResize('slider', 0);"></div>

      <div id="slider" style="width:0px; height:50px; position:absolute; top:35px; left:110px; background-color:yellow;"></div>
</body>
</html>

seanostephens

ASKER

Works great, but I still have the same problem - the front table is relatively positioned on the page (to be centered on the page for the design). And your solution only seems to work with relative positioning?

I can't make it work if I remove the absolute positioning...

ASKER CERTIFIED SOLUTION

dbritt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

seanostephens

ASKER

You kick ass. Nough said.

seanostephens

ASKER

Is there an easy way to get the box to stay out for a few seconds after you onmouseout?

dbritt

Any time :)

You can pass another parameter to the function and add some code to have a timeout that will set the interval for you. Be sure to store the timeoutId so you can clear it if they mouseover it again.

seanostephens

ASKER

Excellent answer, works great. Thanks for the advice on the timing too, that reallys saves it looking "jittery".

If I could give you the beer of gratitude (the one fault of the internet so far, you can't send beer), I would.

lolenik

I realize this is a really old post, but I'm hoping someone will still see this question. Does this work for you all in IE 7? For me, the sliding box shows up above the table. If you know why, can you let me know?