light box javascript : The Official Microsoft ASP.NET Forums

Reply

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

Regards,
Kannandesikan

Reply

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>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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>

Regards,
Kannandesikan

Reply

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.

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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

full calender control code

Regards,
Kannandesikan

Reply

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-

<div id="inline1" style="width:400px">

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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

<div id="inline1" style="width:400px">

inside the div content not working

Regards,
Kannandesikan

Reply

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;
}

Reply

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-

Reply

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>

Regards,
Kannandesikan

light box javascript RSS

23 replies

Kannandesika...

light box javascript

asteranup

Re: light box javascript

Kannandesika...

Re: light box javascript

asteranup

Re: light box javascript

Kannandesika...

Re: light box javascript

asteranup

Re: light box javascript

Kannandesika...

Re: light box javascript

jawed_akhtar...

Re: light box javascript

jawed_akhtar...

Re: light box javascript

Kannandesika...

Re: light box javascript

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft