Coding Article #: 48 - Published On: January 02, 2013 @ 12:19:14 PM - Last Updated on: January 02, 2013

Supported Files
File Download:
carrzkiss_122326Q_27966465.zip
File Size: 71.62 KB
Unzip with
(OR)

Screenshot of Source Code

Using the FancyBox with the DatePicker inside of an ASP Classic application gives your members or visitors a really good way to interact with the site, of which, in return makes for a better user experience.

Credit to: Hielo from Experts Exchange.

View Live Example«

	<!-- Add the jquery and jQueryUI from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

    <script type="text/javascript" src="js/ajaxsbmt.js"></script>

	<!-- Add fancyBox main JS file -->
	<script type="text/javascript" src="js/source/jquery.fancybox.js?v=2.1.3"></script>

<script type="text/javascript">

//save a reference to your "old" updatepage function definition (the one defined in "ajaxsbmt.js"
var oldFunc=updatepage;

//now define a new function named updatepage.  The reason for this is that you need to
//call the datepicker only after updatepage is done.
var updatepage=function (str,responsediv){
	//call your "old" updatepage
	oldFunc(str,responsediv);
	
	//now that the above is done, you can now call the datepicker (that's why I got rid
	//of it from feed.asp
	$('.datepicker').datepicker();
};

$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
</script>

<a class="various fancybox.ajax" href="pro.html" title="test">Click Here</a>