Home/ Questions/Q 7168257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T14:44:38+00:00

The code below is for sliding a div inside another hidden overflow div (concept

  • 0

The code below is for sliding a div inside another hidden overflow div (concept for future website).
The text box below the “next” and “previous” links is for indicating the x value.
With IE8 everything works just fine.

With Chrome and Firefox it seems to do the function only once (one step) both “next” and “prev”, which means setTimeout doesn’t run.

<html>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <head>
        <script type="text/javascript">

            var ie5 = (document.all && document.getElementById);
            var ns6 = (!document.all && document.getElementById);

            function next(startx, fadeStep, end){
                if(startx > end){
                    startx -= Math.round((1/Math.pow(fadeStep,0.6)));
                    if (startx < end) startx = end;
                    document.getElementById('lastname').value = startx + "px";
                    document.getElementById('test1').style.left = startx + "px";
                    fadeStep += 0.00035;
                    args = "next(" + startx + "," + fadeStep + "," + end + ")";
                    setTimeout(args, 20); 
                }
            }

            function prev(startx, fadeStep, end){
                if(startx < end){
                    startx += Math.round((1/Math.pow(fadeStep,0.6)));
                    if (startx > end) startx = end;
                    document.getElementById('lastname').value = startx + "px";
                    document.getElementById('test1').style.left = startx + "px";

                    setTimeout('prev(' + startx + ',' + (fadeStep+0.00035) + ',' + end + ')', 20);
                }
            }

        </script>
    </head>
    <body>
        <div style="position:relative;width:570;height:78;overflow:hidden">
            <div id="test1" style="position:absolute;left:0px;top:0px;width:1180;height:78">
                <img src="http://img38.imageshack.us/img38/7225/imageva.png" border=1>
                <img src="http://img577.imageshack.us/img577/5554/image2te.png" border=1>
            </div>
        </div>
        <div style="position:absolute;left:900px;top:0px;width:800">
            <a href="#" onclick="next(0, 0.001, -570)">Next</a><br />
            <a href="#" onclick="prev(-570, 0.001, 0)">Previous</a></ br>
            <form><input type="text" id="lastname" value="gfgfg"/></form>
        </div>

    </body>
</html>

Can you please assist?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It might be a better way, in this case, to use setTimeout like the following:

    window.setTimeout(function() { next(startx, fadeStep, end); } , delayInMiliseconds);

    However, the lack of the “window.” object prefix might be another cause of your functionality not working in these browsers.

    If you have any other questions don’t hesitate to ask.

    As stated in the comments it would save a good deal of time to use jQuery.

    Best regards,

    • 0