javascript - Sliding out Div, Slide in another Div at the same time -
ok, have few divs within section of html. need getting div tags slide out (either horizontally left/right or vertically going up/down, depending on setting). @ same time when div sliding out of page, need div slide in opposite side of page. sort of slideshow, it's not slideshow. when user clicks on next button/link, should slide out (to left) showing on there, , slide-in (coming right) next tag.
i can tags hide , show using blocks, , fine without sliding, need slide. here's got 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 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> <!--// , on , on , 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 above of code, can see i'd slide current months div either right/left or down/up depending on what's been selected elsewhere. need 1 step @ time.
can please me?
i'd highly recommend using javascript library handle this. here's quick , dirty sample built using jquery: http://jsfiddle.net/hyu42/ idea behind create container div acts mask , contains node animate (in case, replaced calendar content). when user interacts, shift position of interior node element accordingly.
Comments
Post a Comment