You can use datepicker with fancybox in this case-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('#txtDate').datepicker({
onSelect: function(dateText, option) {
callPopup();
}
});
});
</script>
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a.inline1").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'none'
});
});
function callPopup() {
jQuery("a.inline1").trigger("click");
}
</script>
</head>
<body>
<a href="#inline1" class="inline1" style="display:none">hidden anc</a>
<div style="display: none">
<div id="inline1" style="width:400px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor
facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante
ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium
varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales
orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare,
faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl
nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae
orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit
amet, vestibulum sed nunc.
</div>
</div>
<input id="txtDate" type="text" />
</body>
</html>
Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor
facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante
ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium
varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales
orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare,
faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl
nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae
orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit
amet, vestibulum sed nunc.
</div>
</div>
This is a working and tested sample. May be some other problem. Check whether all the necessary files are getting loaded using firebug / ie developer tool of fiddler.
Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
its working but i want to place this below div in the light box, so that if click the datetimepicker i can open lightbox with full calender control on it
Kannandesika...
Member
368 Points
764 Posts
light box javascript
Jan 11, 2012 06:40 AM|LINK
Hi,
i want to call lightbox through javascript, if i click the calender control i need to show lightbox , pls give ur valuable suggestions
Kannandesikan
asteranup
All-Star
30184 Points
4906 Posts
Re: light box javascript
Jan 11, 2012 09:53 AM|LINK
Hi,
You can use datepicker with fancybox in this case-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function() { jQuery('#txtDate').datepicker({ onSelect: function(dateText, option) { callPopup(); } }); }); </script> <script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript"></script> <link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("a.inline1").fancybox({ 'transitionIn': 'elastic', 'transitionOut': 'none' }); }); function callPopup() { jQuery("a.inline1").trigger("click"); } </script> </head> <body> <a href="#inline1" class="inline1" style="display:none">hidden anc</a> <div style="display: none"> <div id="inline1" style="width:400px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc. </div> </div> <input id="txtDate" type="text" /> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Kannandesika...
Member
368 Points
764 Posts
Re: light box javascript
Jan 11, 2012 10:01 AM|LINK
Hi,
i tried ur code if click the dattime picker , fancy box not calling , pls see below i copied ur code and run the same,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#txtDate').datepicker({
onSelect: function (dateText, option) {
callPopup();
}
});
});
</script>
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a.inline1").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'none'
});
});
function callPopup() {
jQuery("a.inline1").trigger("click");
}
</script>
</head>
<body>
<a href="#inline1" class="inline1" style="display:none">hidden anc</a>
<div style="display: none">
<div id="inline1" style="width:400px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor
facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante
ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium
varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales
orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare,
faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl
nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae
orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit
amet, vestibulum sed nunc.
</div>
</div>
<input id="txtDate" type="text" />
</body>
</html>
Kannandesikan
asteranup
All-Star
30184 Points
4906 Posts
Re: light box javascript
Jan 11, 2012 10:09 AM|LINK
This is a working and tested sample. May be some other problem. Check whether all the necessary files are getting loaded using firebug / ie developer tool of fiddler.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Kannandesika...
Member
368 Points
764 Posts
Re: light box javascript
Jan 11, 2012 11:05 AM|LINK
Hi,
its working but i want to place this below div in the light box, so that if click the datetimepicker i can open lightbox with full calender control on it
<div id="calendar" style="width:600px">
</div>
full calender control code
<link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.2/jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.2/jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('div[id*=calendar]').fullCalendar({
header: {
},
editable: true,
events: [
]
});
});
<div id="calendar" style="width:600px">
</div>
Kannandesikan
asteranup
All-Star
30184 Points
4906 Posts
Re: light box javascript
Jan 11, 2012 11:11 AM|LINK
Hi,
What is the problem with previous one. You can simply put the full calender control inside the following-
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Kannandesika...
Member
368 Points
764 Posts
Re: light box javascript
Jan 11, 2012 11:42 AM|LINK
hi,
i tried ur div its not working
inside the div content not working
Kannandesikan
jawed_akhtar...
Member
288 Points
72 Posts
Re: light box javascript
Jan 11, 2012 12:59 PM|LINK
You can use following Css for fancybox instead of http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css
html, body, div, ul {
margin: 0;
padding: 0;
}
body {
color: #262626;
background: #f4f4f4;
font: normal 12px/18px Verdana, sans-serif;
}
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
h1 {
margin: 30px 0 15px 0;
font-size: 30px;
font-weight: bold;
font-family: Arial;
}
h1 span {
font-size: 50%;
letter-spacing: -0.05em;
}
hr {
border: none;
height: 1px; line-height: 1px;
background: #E5E5E5;
margin-bottom: 20px;
padding: 0;
}
p {
margin: 0;
padding: 7px 0;
}
a {
outline: none;
}
a img {
border: 1px solid #BBB;
padding: 2px;
margin: 10px 20px 10px 0;
vertical-align: top;
}
a img.last {
margin-right: 0;
}
ul {
margin-bottom: 24px;
padding-left: 30px;
}
jawed_akhtar...
Member
288 Points
72 Posts
Re: light box javascript
Jan 11, 2012 01:44 PM|LINK
Try This, make sure all fancybox file at your local folder-
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#txtDate').datepicker({
onSelect: function (dateText, option) {
callPopup();
}
});
});
</script>
<script src="js/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="cs/fancybox.css" rel="stylesheet" type="text/css" />
<script src="js/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a.inline1").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'none'
});
});
function callPopup() {
jQuery("a.inline1").trigger("click");
jQuery(function () {
jQuery('#inline1').datepicker({
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="test" href="#inline1" class="inline1" style="display:none">hidden anc</a>
<div style="display: none">
<div id="inline1" style="width:330px; height:250px;">
</div>
</div>
<input id="txtDate" type="text" />
Kannandesika...
Member
368 Points
764 Posts
Re: light box javascript
Jan 12, 2012 04:20 AM|LINK
HI,
Thanks for ur code, its working, i have one more issue i have select month february month same should refelect in the light box calender
looking for foward the reply, i herewith iam sending the working code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#txtDate').datepicker({
onSelect: function (dateText, option) {
callPopup();
}
});
});
</script>
<script src="Scripts/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="Scripts/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="Styles/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("a.inline1").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'none'
});
});
function callPopup() {
jQuery("a.inline1").trigger("click");
jQuery(function () {
jQuery('#inline1').datepicker({
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="test" href="#inline1" class="inline1" style="display:none">hidden anc</a>
<div style="display: none">
<div id="inline1" style="width:330px; height:250px;">
</div>
</div>
</form>
<input id="txtDate" type="text" />
</body>
</html>
Kannandesikan