JavaScript

[HttpPost] public ActionResult listHolidays(Holiday holiday, int? PersonId, string HolidayDate, string endDate, string AlreadyExists) 
{ DateTime startDates = Convert.ToDateTime(HolidayDate); 
DateTime endDates = Convert.ToDateTime(endDate); 

while (startDates <= endDates)
{
if (startDates.DayOfWeek != DayOfWeek.Saturday && startDates.DayOfWeek != DayOfWeek.Sunday)
{ 
ViewBag.CantDuplicateHolidays = String.IsNullOrEmpty(AlreadyExists) ? "date" : "";
var dates = from d in db.Holidays
where d.HolidayDate == startDates && d.PersonId == PersonId
select d;


// <= 0..so if it does not already exist
if (dates.Count() <= 0)
{
Holiday holiday1 = new Holiday();
holiday1.PersonId = PersonId.Value;
holiday1.HolidayDate = startDates;


db.Holidays.AddObject(holiday1);
db.SaveChanges();
//say start date is 10. AddDays(1) will make it 11 then return it to startDates in 'startDates' = startdates,
//but doesnt chage the value of startdates = 'startdates'
}


}


startDates = startDates.AddDays(1);
}


return RedirectToAction("Index");
}

Date.format = 'dd/m/yyy';
$("#HolidayDate").addClass('date-pick');
$("#endDate").addClass('date-pick');
//$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();


// clickInput: true


$(function () {
//3 methods below dont allow user to select weekends
$('.date-pick').datePicker(
{
createButton: false,
renderCallback: function ($td, thisDate, month, year) {
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}


}
}
)


.bind('click',
function () {
$(this).dpDisplay();
this.blur();
return false;
}
)


.bind('dateSelected',
function (e, selectedDate, $td) {
console.log('You selected ' + selectedDate);
}
);


// HolidayDate is start date
$('#HolidayDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#endDate').dpSetStartDate(d.addDays(0).asString());
}
}
);


//end date is end date
$('#endDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#HolidayDate').dpSetEndDate(d.addDays(0).asString());
}
}
);
});

our company has web site called http://www.bba-reman.com. i tried to put the sliding behavior on the left side of our web site but the div is not showing properly when page load and when we click on expand button then nothing happen. here is the sample code of tabslideout plugin.

when i add the above script in blank page then it works fine but when i add this code in our live site then it didn't work properly.

may be i put the div called "slide-out-div" in wrong div or in wrong place. so it is my request please go to our website http://www.bba-reman.com and inspect the page structure with firebug or by any other tool and tell me how could i setup the above script as a result feedback button should come at left and when user click on feedback button then div called "slide-out-div" should expand. thanks

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

<script type="text/javascript">
$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                     //class of the element that will become your tab
        pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
        imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '200px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
    });

});

</script>

  <style type="text/css">
  .slide-out-div {
      padding: 20px;
      width: 250px;
      background: #ccc;
      border: 1px solid #29216d;
  }
  </style>

 <div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users.html">Content</a>
        <h3>Contact me</h3>
        <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
        </p>
        <p>This can be a form to submit feedback, or contact info</p>
 </div>

var myMenu = new Class({

    initialize: function(elements, options){
    <!-- <snip>  -->
    // Add mouseenter and mouseleave events to each of the menu elements
        this.elements.each(
        function(el,i){
                var obj = this;
                el.addEvent('mouseenter', function(evnt){
                   obj.menuOpen(i);
                });
                el.addEvent('mouseleave', function(evnt){
                   obj.menuOpen(null);
                });
            }.bind(this) // end of function(el,i)
    );  // end of this.elements.each

    }, // End of initialize function
  menuOpen(evnt, i) {
     .... do menu stuff ....
  }
  <!-- <snip>  -->
});

var myMenu = new Class({

    initialize: function(elements, options){
    <!-- <snip>  -->

    mouseEnter: function(evnt, i){
                   this.menuOpen(evnt, i);
                },
    mouseLeave: function(evnt){
                   this.menuOpen(null);
                },

    // Add mouseenter and mouseleave events to each of the menu elements
    this.elements.each(
            function(evnt,i){
                var obj = this;
                el.addEvent('mouseenter', obj.mouseEnter(evnt, i));
                el.addEvent('mouseleave', obj.mouseLeave(evnt, i));
            }.bind(this) // end of function(el,i)
    );  // end of this.elements.each

  }, // End of initialize function

  menuOpen(evnt, i) {
     .... do menu stuff ....
  }
  <!-- <snip>  -->
});

function ValidateTimeControl(s, e) {
    var isValid = true;
    if (e.value != null) {
        if (e.value.substring(0, 1).trim() == "" || e.value.substring(1, 2).trim() == "" || e.value.substring(3, 4).trim() == "" || e.value.substring(3, 4).trim() == "") {
            isValid = false;
        }
        else {
            var hours = parseInt(e.value.substring(0, 2), 10);
            var minutes = parseInt(e.value.substring(3, 5), 10);

            if (hours > 12) {alert(hours)
                isValid = false;
                
            }

            if (minutes > 59) {
                isValid = false;
            }
        }
    }
    else {
        isValid = false;
    }

    if (!isValid) {
        e.value = '00:00';
        
    }
}

<script>

           $("#HolidayDate").addClass('date-pick');
           $('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();
           (
                   {
                       createButton: false,
                       displayClose: true,
                       closeOnSelect: false,
                       selectMultiple: true,
                   }
           )
           .bind(
               'click',
               function () {
                   $(this).dpDisplay();
                   this.blur();
                   return false;
               }
           )
           .bind(
               'dateSelected',
               function (e, selectedDate, $td, state) {
                   console.log('You ' + (state ? '' : 'un') // wrap
                       + 'selected ' + selectedDate);
               }
           )
           .bind(
               'dpClosed',
               function (e, selectedDates) {
                   console.log('You closed the date picker and the ' // wrap
                       + 'currently selected dates are:');
                   console.log(selectedDates);
                   $('#HolidayDate').val( selectedDates );
               }
           );

   </script>

$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();