Order Delivery Date Support Thread

[mc12345678]

I have another issue with this plugin and the classic responsive template.

The presence of mootools is breaking the mobile device menu on this page - you'll see its contents below the footer.

If you remove mootools from the directory it works properly.

Any ideas?

Ummm.. Not specifically, I mean I have the following checkout_shipping.css file:

 /* 
 * Altered for ORDER DELIVERY DATE contribution
 * Zen Cart Version: 1.3.8a
 * Modification Date: 2008-05-15
 * Author of this modification: MrMeech
 * Previous authors to this contribution are: Peter Martin (pe7er), James Betesh
 * This contribution is licensed under the GNU Public License V2.0
 * http://www.zen-cart.com/license/2_0.txt
 */ 
/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */
.hidden {
 opacity: 0;
 position: absolute;
}
.visible {
 opacity: 1;
}

input.calendar,
select.calendar {
 width: 99px;
}
button.calendar {
 background: url(../images/calendar/calendar-icon.gif);
 border: 0;
 cursor: pointer;
 /* float: left; */
 height: 20px;
 width: 20px;
 margin-right: 6px;
}
button.calendar:hover,
button.calendar.active {
 background-position: 0 20px;
}
div.calendar {
 background: url(../images/calendar/calendar.png);
 height: 195px;
 padding: 0 6px;
 text-align: center;
 width: 147px;
} 
 div.calendar * {
  margin: 0;
  padding: 0;
 } 
 div.calendar div {
  background: none !important;
  cursor: move;
  height: 185px;
  overflow: hidden;
  padding-top: 10px;
  position: relative;
  width: 147px;
 } 
 
 div.calendar caption {
  color: #333;
  font: normal 12px/16px Arial, Helvetica, sans-serif;
  padding-top: 6px;
  text-align: center;
  width: 100%;
 }
 div.calendar caption a {
  cursor: pointer;
  display: block;
  height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: -100px;
  top: 17px;
  width: 11px;
 }
 div.calendar caption a.prev {
  background-image: url(../images/calendar/calendar-prev.gif);
  left: 0;
 }
 div.calendar caption a.next {
  background-image: url(../images/calendar/calendar-next.gif);
  right: 0;
 }
 div.calendar caption a:hover {
  background-position: 0 12px;
 }
 div.calendar caption span {
  height: 25px;
  position: relative;
  text-align: center;
 }
 div.calendar caption span.month {
  padding-right: 8px;
 }
 div.calendar caption span.month:after {
  content: ',';
 }
 div.calendar table {
  background: #FFF;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  cursor: default;
  margin: 0 auto;
  overflow: hidden;
  width: 147px;
 }
 div.calendar td,
 div.calendar th {
  border: 0;
  color: #0597DB;
  font: normal 12px Arial, Helvetica, sans-serif;
  height: 21px;
  text-align: center;
  width: 21px;
 }
 div.calendar td {
  background: url(../images/calendar/calendar-td.gif);
  color: #FFF;
  font-size: 11px;
 }
 div.calendar td.invalid {
  color: #FF9999;
 }
 div.calendar td.valid {
  background: url(../images/calendar/calendar-valid.gif);
  color: #0597DB;
  cursor: pointer;
 }
 div.calendar td.hilite {
  background: url(../images/calendar/calendar-hilite.gif);
 }
 div.calendar td.inactive {
  background: url(../images/calendar/calendar-td.gif) 0 100%;
  color: #FFF;
 }
 div.calendar td.active,
 div.calendar td.hover {
  background: url(../images/calendar/calendar-valid.gif) 0 100%;
  color: #FFF;
  cursor: pointer;
 }

and I have jscript_a-mootools.js and jscript_b-calendar.js loaded on responsive_classic and in mobile, template and standard desktop the calendar will appear adjacent to the button and the button adjacent to the text block. BTW, you can test "mobile" or "template" on your desktop to possibly rework the css by adding to your URL: &layoutType=mobile or &layoutType=tablet as desired for each of those "styles" to be applied to your desktop and then F12 (from PC I'm not sure how to do so on Macintosh) to then "locally" play with the CSS if needed.

Might want to check html validation/console for any validation issues.