API tools faq
paste
Advertisement
Guest User

Chameleon Hotel Search box with CSS box

a guest
Jun 15th, 2011
300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.06 KB | None | 0 0
raw download clone embed print report
  1. <STYLE type="text/css">
  2. /* set the image to use and establish the lower-right position */
  3.     .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
  4.       background: transparent url(images/background2.png) no-repeat bottom right}
  5.     .cssbox{
  6.     /* intended total box width - padding-right(next) */
  7.       width:335px !important; /* IE Win = width - padding */
  8.       width: 320px;
  9.     /* the gap on the right edge of the image (not content padding) */
  10.       padding-right:15px; /* use to position the box */
  11.       margin:20px auto}
  12.  
  13.     /* set the top-right image */
  14.     .cssbox_head{background-position:top right;
  15.     /* pull the right image over on top of border */
  16.       margin-right:-15px;
  17.     /* right-image-gap + right-inside padding */
  18.       padding-right:40px}
  19.  
  20.     /* set the top-left image */
  21.     .cssbox_head h2{
  22.       background-position:top left;
  23.       margin:0; /* reset main site styles*/
  24.       border:0; /* ditto */
  25.     /* padding-left = image gap + interior padding ... no padding-right */
  26.       padding:25px 0 15px 40px;
  27.       height:auto !important;
  28.       height:1%} /* IE Holly Hack */
  29.  
  30.     /* set the lower-left corner image */
  31.     .cssbox_body{
  32.       background-position:bottom left;
  33.       margin-right:25px; /* interior-padding right */
  34.       padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */
  35.     #HEADLINE {
  36.         font-family: Georgia, "Times New Roman", Times, serif;
  37.         font-size:24px;
  38.         margin-top: 5px; margin-bottom: 0px;
  39.         text-align: left;
  40.         font-weight: normal;
  41.         color: #222;}
  42.        
  43.     fieldset {font-size: 10px;; border: 0px;}
  44.        
  45.     #SUBHEADLINE{
  46.         font-family: "Lucida Grande", Tahoma;
  47.     font-size: 10px;
  48.     font-weight: lighter;
  49.     font-variant: normal;
  50.     text-transform: uppercase;
  51.     color: #666666;
  52.         margin-top: 10px;
  53.     text-align: left!important;
  54.     letter-spacing: 0.3em;}
  55.      </style>
  56.        <div class="cssbox">
  57.       <div class="cssbox_head">
  58.       <h2 id="HEADLINE"><img src="images/logo.png"><br>The New Yorker Hotel</h2>
  59.    
  60.       </div>
  61.       <div class="cssbox_body" id="SUBHEADLINE">
  62.        
  63. <style media="screen">
  64.  
  65. .form-select {font-family: arial, helvetica, san-serif; font-size: 11px;}
  66.  
  67. .index-select-dest-bg { font-weight: bold; font-family: arial, helvetica, san-serif; font-size: 11px;}     /*change bg color*/
  68. .index-text {font-weight: normal; color: #000000;font-family: arial, helvetica, san-serif; font-size: 11px;}
  69. .button {background:#009ACE; color: #FFFFFF; font-weight: bold; font-size: 11px;border-bottom:none;border-top:none;border-left:none;border-right:none;height:16px;cursor:hand}
  70. </style>
  71.  
  72. <table cellspacing="0" cellpadding="0" border="0">
  73. <tr><td>
  74. <table cellspacing="0" cellpadding="0" border="0" width="100%">
  75. <form action="http://travel.ian.com/index.jsp?pageName=hotAvail&cid=9999&isHotels=true&isCondos=false&hotelID=126913&passthrough=true" method="POST" name="hotForm">
  76. <tr>
  77. <td>
  78.  
  79. <table width="100%" border="0" cellspacing="0" cellpadding="2">
  80. <tr>
  81. <td nowrap class="index-text">Arrival Date:<br/>
  82.  
  83.  
  84. <select class="form-select" name="arrivalMonth" onchange="javascript:amadChange(document.hotForm.arrivalMonth, document.hotForm.arrivalDay, document.hotForm.departureMonth, document.hotForm.departureDay);">
  85.    
  86.  
  87. <option value=0>January</option>
  88. <option value=1>February</option>
  89. <option value=2>March</option>
  90. <option value=3>April</option>
  91. <option value=4>May</option>
  92. <option value=5>June</option>
  93. <option value=6>July</option>
  94. <option value=7>August</option>
  95. <option value=8>September</option>
  96. <option value=9>October</option>
  97. <option value=10>November</option>
  98. <option value=11>December</option>
  99.  
  100.  
  101. </select>
  102.  
  103. <select class="form-select" name="arrivalDay" onchange="amadChange(document.hotForm.arrivalMonth, document.hotForm.arrivalDay, document.hotForm.departureMonth, document.hotForm.departureDay)">
  104.     <option value=1>1</option>
  105.     <option value=2>2</option>
  106.     <option value=3>3</option>
  107.     <option value=4>4</option>
  108.     <option value=5>5</option>
  109.     <option value=6>6</option>
  110.     <option value=7>7</option>
  111.     <option value=8>8</option>
  112.     <option value=9>9</option>
  113.     <option value=10>10</option>
  114.     <option value=11>11</option>
  115.     <option value=12>12</option>
  116.     <option value=13>13</option>
  117.     <option value=14>14</option>
  118.     <option value=15>15</option>
  119.     <option value=16>16</option>
  120.     <option value=17>17</option>
  121.     <option value=18>18</option>
  122.     <option value=19>19</option>
  123.     <option value=20>20</option>
  124.     <option value=21>21</option>
  125.     <option value=22>22</option>
  126.     <option value=23>23</option>
  127.     <option value=24>24</option>
  128.     <option value=25>25</option>
  129.     <option value=26>26</option>
  130.     <option value=27>27</option>
  131.     <option value=28>28</option>
  132.     <option value=29>29</option>
  133.     <option value=30>30</option>
  134.     <option value=31>31</option>
  135. </select>
  136.  
  137. </td>
  138.  
  139. <td nowrap class="index-text">Departure Date:<br/>
  140.  
  141.     <select class="form-select" name="departureMonth" onchange="javascript:dmddChange(document.hotForm.departureMonth,document.hotForm.departureDay);">
  142.        
  143.  
  144. <option value=0>January</option>
  145. <option value=1>February</option>
  146. <option value=2>March</option>
  147. <option value=3>April</option>
  148. <option value=4>May</option>
  149. <option value=5>June</option>
  150. <option value=6>July</option>
  151. <option value=7>August</option>
  152. <option value=8>September</option>
  153. <option value=9>October</option>
  154. <option value=10>November</option>
  155. <option value=11>December</option>
  156.  
  157.  
  158.     </select>
  159.  
  160.     <select class="form-select" name="departureDay" onchange="dmddChange(document.hotForm.departureMonth,document.hotForm.departureDay)">
  161.         <option value=1>1</option>
  162.         <option value=2>2</option>
  163.         <option value=3>3</option>
  164.         <option value=4>4</option>
  165.         <option value=5>5</option>
  166.         <option value=6>6</option>
  167.         <option value=7>7</option>
  168.         <option value=8>8</option>
  169.         <option value=9>9</option>
  170.         <option value=10>10</option>
  171.         <option value=11>11</option>
  172.         <option value=12>12</option>
  173.         <option value=13>13</option>
  174.         <option value=14>14</option>
  175.         <option value=15>15</option>
  176.         <option value=16>16</option>
  177.         <option value=17>17</option>
  178.         <option value=18>18</option>
  179.         <option value=19>19</option>
  180.         <option value=20>20</option>
  181.         <option value=21>21</option>
  182.         <option value=22>22</option>
  183.         <option value=23>23</option>
  184.         <option value=24>24</option>
  185.         <option value=25>25</option>
  186.         <option value=26>26</option>
  187.         <option value=27>27</option>
  188.         <option value=28>28</option>
  189.         <option value=29>29</option>
  190.         <option value=30>30</option>
  191.         <option value=31>31</option>
  192.     </select>
  193.  
  194. </td>
  195. </tr>
  196. <tr>
  197. <td><img src="http://images.ian.com/images/p.gif" height="5" width="100%" border="0" onload="loadDates(document.hotForm.arrivalMonth,  document.hotForm.arrivalDay, document.hotForm.departureMonth, document.hotForm.departureDay)" /></td>
  198. </tr>
  199. <tr>
  200. <td rowspan="2" colspan="2" align="right"><input type="submit" name="Submit" value=" Search " class="button" ></td>
  201. </tr>
  202. </table>
  203. </td>
  204. </tr>
  205. <tr>
  206. <td><img src="http://images.ian.com/images/p.gif" height="5" width="100%" border="0" /></td>
  207. </tr>
  208. <input type="hidden" name="submitted" value="true"/>
  209. <input type="hidden" name="avail" value="true"/>
  210. <input type="hidden" name="pickUpLocation" value="A">
  211. <input type="hidden" name="passThrough" value="true">
  212. <input type="hidden" name="locale" value="en_US"/>
  213.  
  214. </form>
  215. </table>
  216. </td></tr></table>
  217.  
  218. <script langage="javascript">
  219. <!--
  220.   //start new script code
  221.   // Checks if browser is Netscape 2.0x since the options array properties don't work with Netscape 2.0x
  222.    function isBrowserSupp() {
  223.        // Get the version of the browser
  224.        version =  parseFloat( navigator.appVersion );
  225.  
  226.        if ( ( version >= 2.0 ) && ( version < 2.1 ) && ( navigator.appName.indexOf( "Netscape" ) != -1 ) ) {
  227.            return false;
  228.        } else {
  229.            return true;
  230.        }
  231.  
  232.        return true;
  233.    }
  234.  
  235.    function isLeapYear( yrStr ) {
  236.        var leapYear = false;
  237.        var year = parseInt( yrStr, 10 );
  238.        // every fourth year is a leap year
  239.        if ( year % 4 == 0 ) {
  240.            leapYear = true;
  241.            // unless it's a multiple of 100
  242.            if( year % 100 == 0 ) {
  243.                leapYear = false;
  244.                // unless it's a multiple of 400
  245.                if( year % 400 == 0 ) {
  246.                    leapYear=true;
  247.                }
  248.            }
  249.        }
  250.        return leapYear;
  251.    }
  252.  
  253.    function getDaysInMonth( mthIdx, YrStr ) {
  254.        // all the rest have 31
  255.        var maxDays = 31
  256.        // expect Feb. (of course)
  257.        if( mthIdx == 1 ) {
  258.            if( isLeapYear( YrStr ) ) {
  259.                maxDays=29;
  260.            } else {
  261.                maxDays=28;
  262.            }
  263.        }
  264.  
  265.        // thirty days hath...
  266.        if( mthIdx == 3 || mthIdx == 5 || mthIdx == 8 || mthIdx == 10 ) {
  267.            maxDays=30;
  268.        }
  269.        return maxDays;
  270.    }
  271.  
  272.    //the function which does some magic to the date fields
  273.    // return non-zero if it is the last day of the month
  274.    function adjustDate( mthIdx, Dt ) {
  275.        var value = 0;
  276.  
  277.        var today = new Date()
  278.        var theYear = parseInt( today.getYear(), 10 )
  279.  
  280.        if( mthIdx < today.getMonth() ) {
  281.            theYear = ( parseInt( today.getYear(), 10 ) + 1 )
  282.        }
  283.        if( theYear < 100 ) {
  284.            theYear = "19" + theYear
  285.        } else {
  286.            if( ( theYear - 100 ) < 10 ) {
  287.                theYear = "0" + ( theYear - 100 )
  288.            } else {
  289.                theYear = ( theYear - 100 ) + ""
  290.            }
  291.            theYear = "20" + theYear
  292.        }
  293.  
  294.  
  295.        var numDays = getDaysInMonth( mthIdx, theYear );
  296.  
  297.        if( mthIdx == 1 ) {
  298.            if( Dt.options.selectedIndex + 1 < numDays ) {
  299.                return 0;
  300.            } else {
  301.                Dt.options.selectedIndex=numDays - 1;
  302.                //check for leap year
  303.                if( numDays == 29 ) {
  304.                    return 99;
  305.                } else {
  306.                    return 1;
  307.                }
  308.            }
  309.        }
  310.  
  311.        if( Dt.options.selectedIndex + 1 < numDays ) {
  312.            value = 0;
  313.        } else {
  314.            if ( Dt.options.selectedIndex + 1 > numDays ) {
  315.                Dt.options.selectedIndex--;
  316.                value = 3;
  317.            } else {
  318.                //index is 31 or 30
  319.                value = 2;
  320.            }
  321.        }
  322.        return value;
  323.    }
  324.  
  325.    //changes departure month when arrival month is changed
  326.    function amadChange( inM, inD, outM, outD ) {
  327.        if ( !isBrowserSupp() ) {
  328.            return;
  329.        }
  330.  
  331.        var res = adjustDate( inM.options.selectedIndex, inD );
  332.        if( res != 0 ) {
  333.               outD.options.selectedIndex = 0;
  334.               if ( outM.options.selectedIndex == 11 ) {
  335.                    outM.options.selectedIndex = 0
  336.               } else {
  337.                    outM.options.selectedIndex=inM.options.selectedIndex + 1;
  338.                    outD.options.selectedIndex = 1;
  339.               }
  340.        } else {
  341.            outM.options.selectedIndex = inM.options.selectedIndex;
  342.            if (outD.options.selectedIndex <= inD.options.selectedIndex) {
  343.                outD.options.selectedIndex = inD.options.selectedIndex + 2;
  344.            }
  345.        }
  346.        return;
  347.    }
  348.  
  349.  
  350.    function dmddChange( outM, outD ) {
  351.        if ( !isBrowserSupp() ) {
  352.            return;
  353.        }
  354.  
  355.        adjustDate( outM.options.selectedIndex, outD );
  356.        return;
  357.    }
  358.  
  359. function loadDates(arrivalMonthSelect,  arrivalDaySelect, departureMonthSelect, departureDaySelect)
  360. {
  361.     var calendar = new Date();
  362.     var calendar2 = new Date();
  363.     var cal
  364.     var cal2
  365.     var date;
  366.     var month;
  367.     var year;
  368.     var date2;
  369.     var month2;
  370.     var year2;
  371.  
  372.     //Here is the variable to change for to advance the arrival Date
  373.      var advanceArrival = 14;
  374.     //Here is the variable to change for to advance the departure Date
  375.      var advanceDeparture = 16;
  376.  
  377.  
  378.     //Set the arrival Days
  379.     calendar.setDate(calendar.getDate()+ advanceArrival);
  380.     date = calendar.getDate();
  381.     month = calendar.getMonth();
  382.  
  383.     //Set the Departure Days
  384.     calendar2.setDate(calendar2.getDate()+advanceDeparture);
  385.     date2 = calendar2.getDate();
  386.     month2 = calendar2.getMonth();
  387.  
  388.     arrivalMonthSelect.value=month;
  389.     arrivalDaySelect.value=date;
  390.     departureMonthSelect.value=month2;
  391.     departureDaySelect.value=date2;
  392. }
  393.  
  394.    function OpenWindow(file, name, width, height) {
  395.        OpenWindow(file, name, width, height, false);
  396.    }
  397.  
  398.    function OpenWindow(file, name, width, height, showLeftTopScrollbar) {
  399.        var attr = "";
  400.        if(showLeftTopScrollbar) {
  401.            attr += "top=50,left=50,scrollbars=1,";
  402.        }
  403.        attr += "width=" + width + ",height=" + height + ",resizeable=1";
  404.        window.open(file, name, attr);
  405.    }
  406.  
  407.  
  408. //-->
  409. </script>
  410.       </div>
  411.      </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!