Ok, I have a few divs within a section of HTML. I need some

Question

0

Asked: May 17, 20262026-05-17T16:31:30+00:00 2026-05-17T16:31:30+00:00

Ok, I have a few divs within a section of HTML. I need some

0

Ok, I have a few divs within a section of HTML. I need some help getting the Div tags to slide out (either horizontally to the left/right or vertically going up/down, depending on a setting). But at the same time when a div is sliding out of the page, I need another div to slide in from the opposite side of the page. So it will sort of look like a slideshow, but it’s not a slideshow. So when the user clicks on the next button/link, it should slide out (to the left) the that is showing on there, and slide-in (coming from the right) the next tag.

I can get the tags to hide and show using blocks, and do this fine without the sliding, but I need it to slide. Here’s what I got so far…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Slideshow</title>
        <script language="JavaScript" type="text/javascript">
            //<!--
            //<![CDATA[

            first = 1;
            last = 2;
            current = 1;

            function nextCalMonth() {
                // Hide current picture
                object = document.getElementById('cal' + current);
                object.style.display = 'none';

                // Show next picture, if last, loop back to front
                if (current == last) { current = 1; }
                else { current++ }
                object = document.getElementById('cal' + current);
                object.style.display = 'block';
            }

            function previousCalMonth() {
                // Hide current picture
                object = document.getElementById('cal' + current);
                object.style.display = 'none';

                if (current == first) { current = last; }
                else { current--; }
                object = document.getElementById('cal' + current);
                object.style.display = 'block';
            }
            //]]>
            // -->
        </script>
        <style type="text/css">
        <!--
            .slideShow {
                background-color: #ebebeb;
                text-align: center;
                margin-bottom: 10px;
                padding: 5px;
            }
            .slides {
                position: relative;
                z-index: 1;
                display: none;
            }
            .setTitle, .slideTitle {
                font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
            }
            .setTitle {
                color: #995a01;
                font-size: 14px;
                font-weight: bold;
                }
            .slideTitle {
                color: #666666;
                font-size: 12px;
            }
            .controls {
                position: relative;
                z-index: 10;
            }
            #cal1 {
                display: block;
            }
        -->
        </style>
    </head>
    <body>
        <div class="slideShow">
            <div class="setTitle">Calendar 2010</div>

            <div id="cal1" class="slides">
                <div class="slideTitle">September 2010</div>
                                    <table cellspacing="1" class="calendar_table" style="width: 170px;">
                                        <tr>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Su</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">M</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Tu</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">W</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Th</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">F</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Sa</th>
                                        </tr>
                                        <tr>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">1
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">2
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">3
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">4
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">5
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('9_6');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">6
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">7
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">8
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">9
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">10
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">11
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">12
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">13
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">14
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">15
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">16
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">17
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">18
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">19
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">20
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">21
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('9_22');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">22
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">23
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">24
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">25
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">26
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">27
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">28
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">29
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">30
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                        </tr>
                                    </table>
            </div>
            <div id="cal2" class="slides">
                <div class="slideTitle">October 2010</div>
                                    <table cellspacing="1" class="calendar_table" style="width: 170px;">
                                        <tr>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Su</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">M</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Tu</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">W</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Th</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">F</th>
                                            <th class="titlebg2 days" scope="col" style="padding: 2px; margin: 0px; font-size: x-small;">Sa</th>
                                        </tr>
                                        <tr>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">1
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">2
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">3
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">4
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">5
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">6
                                            </td>
                                            <td onclick="return dp_collapseCalendar('0_0');" class="calendar_today days hand" style="height: 20px; font-size: x-small;">7
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">8
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">9
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">10
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">11
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">12
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">13
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">14
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">15
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">16
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">17
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">18
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">19
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">20
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">21
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">22
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">23
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('10_24');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">24
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">25
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">26
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">27
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">28
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">29
                                            </td>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('0_0');" class="windowbg days hand" style="height: 20px; font-size: x-small;">30
                                            </td>
                                        </tr>
                                        <tr>
                                            <td onmouseover="dp_highlightDay(this, 'over');" onmouseout="dp_highlightDay(this, 'out');" onclick="return dp_collapseCalendar('10_31');" class="windowbg days hand" style="height: 20px; font-size: x-small;font-weight: bold;">31
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                            <td class="windowbg days">
                                            </td>
                                        </tr>
                                    </table>
            </div>
            <!--// And SO ON AND ON AND ON... //-->
            <div class="controls">
                <a href="javascript:previousCalMonth()" style="margin: 10px;">« Previous</a>
                <a href="javascript:nextCalMonth()" style="margin: 10px;">Next »</a>
            </div>
        </div>
    </body>
</html>

So the above is all of the code, as you can see I’d like to slide the current months div either to the right/left or down/up depending on what’s been selected elsewhere. But need to do it one step at a time.

Can anyone please help me?

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-17T16:31:31+00:00

Editorial Team

2026-05-17T16:31:31+00:00Added an answer on May 17, 2026 at 4:31 pm

I’d highly recommend using a javascript library to handle this. Here’s a quick and dirty sample I built using jquery: http://jsfiddle.net/hyu42/ The idea behind it is to create a container div that acts as a mask and contains the node to animate (in this case, they would be replaced with your calendar content). When the user interacts, you shift the position of the interior node element accordingly.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

Ok, I have a few divs within a section of HTML. I need some

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply