Fancybox-ASP.NET button not working RSS

• • Reply
  

  mwcsdesign

  Member

  13 Points

  7 Posts

  Fancybox-ASP.NET button not working

  Jun 22, 2011 09:47 AM|LINK

  Dear Friends, 

  I am using master page in my site. and i have fancy box on content page. it is working fine. but fancybox not calling buuton click event. my code is

  <div style="display: none;">
  		<div id="inline1" style="width:300px;height:150px;overflow:auto;">
  		
  		<table cellpadding="5" class="style1" 
                                  style="text-align: left; vertical-align: top" __designer:mapid="bba">
          <tr>
              <td colspan="3" style="text-align: center;">
                                          Member&#39;s Login</td>
          </tr>
          <tr>
              <td style="width:20%">
                                          User Id :</td>
              <td style="width:30%">
                  <asp:TextBox ID="TxtLUserId" runat="server" BorderColor="#000099" 
                                              BorderStyle="Solid" BorderWidth="1px" Width="150px"></asp:TextBox>
              </td>
              <td style="width:50%">
                  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                              ControlToValidate="TxtLUserId" ErrorMessage="*"></asp:RequiredFieldValidator>
              </td>
          </tr>
          <tr>
              <td style="width:20%">
                                          Password :</td>
              <td style="width:30%">
                  <asp:TextBox ID="TxtPassword" runat="server" BorderColor="#000099" 
                                              BorderStyle="Solid" BorderWidth="1px" TextMode="Password" Width="150px"></asp:TextBox>
              </td>
              <td style="width:20%">
                  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                                              ControlToValidate="TxtPassword" ErrorMessage="*"></asp:RequiredFieldValidator>
              </td>
          </tr>
          <tr>
              <td style="width:20%">
                                          &nbsp;</td>
              <td colspan="2" style="text-align: left;">
                  <asp:Button ID="BtnLogin" runat="server" BorderColor="Black" 
                                              BorderStyle="Solid" BorderWidth="1px" CssClass="button" Height="25px" onclick="BtnContinue_Click" Text="Login" Width="90px" />
              </td>
          </tr>
      </table>
      
      </div>
      </div>

  Please help me i have spended whole day to solve this problem,

  Thank You 

  Sachin

   

• • Reply
  

  ayyappan.CNN

  Participant

  870 Points

  326 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 22, 2011 02:09 PM|LINK

  Hi, I tried, please remove  

  style="display: none;" 

  "Marks As Answer, if it helps U"

  Ayyappan.CNN,
  HAND IN HAND IND., Asst. Project Director, Admin and IT,Systems, TN,India
  
  Mark post(s) as "Answer" that helped you
• • Reply
  

  hiren.sharma

  Participant

  1460 Points

  311 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 23, 2011 06:55 AM|LINK

  I believe this login control is on your fancybox and button is not postbacking.

  Well solution is quite simple

  $("Selector").fancybox({
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))} // <== You need to call this on start event of facebox
   });

  The above line $(this).parent().appendTo($("form:first")) is the one that does the magic and it needs to be called onStart event of Fancybox

  
  HOPE THIS HELPS
  HAPPY CODING

  Do Mark as answer if my suggestion suits you
  Try out My Blog | Visit My Website
  • Edited by hiren.sharma on Jun 23, 2011 06:56 AM
• • Reply
  

  mwcsdesign

  Member

  13 Points

  7 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 23, 2011 07:07 AM|LINK

   Thank's Lot Hiren 

  You have solved my problem thanky ou, Very much

• • Reply
  

  hiren.sharma

  Participant

  1460 Points

  311 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 23, 2011 10:13 AM|LINK

  m glad that i could help but dont forget to mark as answered

  Do Mark as answer if my suggestion suits you
  Try out My Blog | Visit My Website
• • Reply
  

  mwcsdesign

  Member

  13 Points

  7 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 25, 2011 05:46 AM|LINK

  $("Selector").fancybox({
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))} // <== You need to call this on start event of facebox
   });

  the above code is not working i don't why, but i am facing same issue

  please solve my issue.

  Thanks,

• • Reply
  

  hiren.sharma

  Participant

  1460 Points

  311 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 25, 2011 07:03 AM|LINK

  But what happened, earlier you said its working now you saying it's not

  Please check for syntactical errors

  and try to debug your code using firebug

  N tell what changes did you made to the code that the code stopped working

  Do Mark as answer if my suggestion suits you
  Try out My Blog | Visit My Website
• • Reply
  

  mwcsdesign

  Member

  13 Points

  7 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 27, 2011 05:18 AM|LINK

  In my master page i have written following code 

  <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  	<script>
  		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
  	</script>
  	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
   	<link rel="stylesheet" href="style.css" />
  	<script type="text/javascript">
  			 
  		$(document).ready(function() {
  			/*
  			*   Examples - images
  			*/			
              $("Selector").fancybox({ 
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))} // <== You need to call this on start event of facebox
   });
  			 
  			$("a#example1").fancybox();
  
  			$("a#example2").fancybox({
  				'overlayShow'	: false,
  				'transitionIn'	: 'elastic',
  				'transitionOut'	: 'elastic'
  			});
  
  			$("a#example3").fancybox({
  				'transitionIn'	: 'none',
  				'transitionOut'	: 'none'	
  			});
  
  			$("a#example4").fancybox({
  				'opacity'		: true,
  				'overlayShow'	: false,
  				'transitionIn'	: 'elastic',
  				'transitionOut'	: 'none'
  			});
  
  			$("a#example5").fancybox();
  
  			$("a#example6").fancybox({
  				'titlePosition'		: 'outside',
  				'overlayColor'		: '#000',
  				'overlayOpacity'	: 0.9
  			});
  
  			$("a#example7").fancybox({
  				'titlePosition'	: 'inside'
  			});
  
  			$("a#example8").fancybox({
  				'titlePosition'	: 'over'
  			});
  
  			$("a[rel=example_group]").fancybox({
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				'titlePosition' 	: 'over',
  				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
  					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  				}
  			});
  
  			/*
  			*   Examples - various
  			*/
  
  			$("#various1").fancybox({
  				'titlePosition'		: 'inside',
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none'
  			});
  
  			$("#various2").fancybox();
  
  			$("#various3").fancybox({
  				'width'				: '75%',
  				'height'			: '75%',
  				'autoScale'			: false,
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				'type'				: 'iframe'
  			});
  
  			$("#various4").fancybox({
  				'padding'			: 0,
  				'autoScale'			: false,
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none'
  			});
  		});
  	</script>
  </head>

  and in Content Page I am writting following code

  <li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li><li>
  		<a id="various2" href="ajax.txt">Ajax</a></li><li>
  		<a id="various3" href="http://google.ca">Iframe</a></li><li><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li></ul>
  
  	<div style="display: none;">
  		<div id="inline1" style="width:800px;height:500px;overflow:auto;">
  			
      <table bgcolor="gray" style="width: 100%; color: black; position: static">
          <tr>
              <td style="width: 5%">
              </td>
              <td style="width: 15%">
              </td>
              <td style="width: 80%; text-align: right">
                  </td>
          </tr>
          <tr>
              <td style="width: 5%; text-align: left">
              </td>
              <td style="width: 15%; text-align: left">
                  Subject :</td>
              <td style="width: 80%; text-align: left">
                  <asp:TextBox ID="TxtSubject" runat="server" BorderColor="Navy" BorderStyle="Solid"
                      BorderWidth="1px" Font-Bold="True" Font-Names="Tahoma" Font-Size="10pt" Height="20px"
                      Style="position: static" Width="85%"></asp:TextBox>
                  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TxtSubject"
                      ErrorMessage="*" Font-Bold="True" Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
                      Style="position: static"></asp:RequiredFieldValidator></td>
          </tr>
          <tr>
              <td style="vertical-align: top; width: 5%; text-align: left">
              </td>
              <td style="vertical-align: top; width: 15%; text-align: left">
                  Message :</td>
              <td style="width: 80%; text-align: left">
                  <asp:TextBox ID="TxtNewsFeedDtls" runat="server" BorderColor="Navy" BorderStyle="Solid"
                      BorderWidth="1px" Font-Names="Tahoma" Font-Size="10pt" Height="60px" Style="position: static"
                      TextMode="MultiLine" Width="85%"></asp:TextBox></td>
          </tr>
          <tr>
              <td style="width: 5%; height: 36px; text-align: left">
              </td>
              <td style="width: 15%; height: 36px; text-align: left">
                  Share Link</td>
              <td style="width: 80%; height: 36px; text-align: left">
                  <asp:TextBox ID="TxtLink" runat="server" BorderColor="Navy" BorderStyle="Solid" BorderWidth="1px"
                      Font-Names="Tahoma" Font-Size="10pt" Height="20px" Style="position: static" Width="85%"></asp:TextBox>&nbsp;</td>
          </tr>
          <tr>
              <td style="width: 5%; text-align: left">
              </td>
              <td style="width: 15%; text-align: left">
                  Video Link</td>
              <td style="width: 80%; text-align: left">
                  <asp:TextBox ID="TxtVideoLink" runat="server" BorderColor="Navy" BorderStyle="Solid"
                      BorderWidth="1px" Font-Names="Tahoma" Font-Size="10pt" Height="20px" Style="position: static"
                      Width="85%"></asp:TextBox>&nbsp;
                  <asp:Label ID="LnkVideoMsg" runat="server" Font-Bold="False" Font-Size="8pt" Style="position: static"
                      Text="(to Share video link please use youtube video url only) " Visible="False"></asp:Label></td>
          </tr>
          <tr>
              <td style="width: 5%; text-align: left">
              </td>
              <td style="width: 15%; text-align: left">
                  Image :</td>
              <td style="width: 80%; text-align: left">
                  <asp:FileUpload ID="FUPhoto" runat="server" BorderColor="Navy" BorderStyle="Solid"
                      BorderWidth="1px" class="multi" Font-Names="Tahoma" Font-Size="8pt" Height="20px"
                      Style="position: static" Width="85%" /></td>
          </tr>
          <tr>
              <td style="width: 5%">
              </td>
              <td style="width: 15%">
              </td>
              <td style="width: 80%; text-align: left">
                  <asp:Button ID="BtnSubmit" runat="server" BorderColor="White" BorderStyle="Solid"
                      BorderWidth="1px" CssClass="button" Font-Bold="False" Font-Names="Tahoma" Font-Size="8pt"
                      Height="25px" OnClick="BtnSubmit_Click" Style="position: static" Text=" + Submit NewsMania" Width="133px" /></td>
          </tr>
          <tr>
              <td style="width: 5%">
              </td>
              <td style="width: 15%">
              </td>
              <td style="width: 80%; text-align: left">
              </td>
          </tr>
      </table>
      <br />
  	</div>
  	</div>

  Please tell me what is wrong in my code

  Thank you,

  

• • Reply
  

  hiren.sharma

  Participant

  1460 Points

  311 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 27, 2011 05:28 AM|LINK

  You have written

       $("Selector").fancybox({ 

  You need to write it like

  $("a#example1").fancybox(

   onStart: function(event,ui){$(this).parent().appendTo($("form:first"));

  );
  
  			$("a#example2").fancybox({
  				'overlayShow'	: false,
  				'transitionIn'	: 'elastic',
  				'transitionOut'	: 'elastic',

   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))

  
  			});
  
  			$("a#example3").fancybox({
  				'transitionIn'	: 'none',
  				'transitionOut'	: 'none'	,

   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))

  
  			});

  
  
  Yopu need to specify it in each and every initialization statement of FACEBOX and please remove
  
  

    $("Selector").fancybox({ 
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))} // <== You need to call this on start event of facebox

  
  });
  
  This doesn't make any sense
  

  Do Mark as answer if my suggestion suits you
  Try out My Blog | Visit My Website
• • Reply
  

  mwcsdesign

  Member

  13 Points

  7 Posts

  Re: Fancybox-ASP.NET button not working

  Jun 27, 2011 07:57 AM|LINK

  Now the fancy box is not working after making following changes

  <script type="text/javascript">
  			 
  		$(document).ready(function() {
  			/*
  			*   Examples - images
  			*/			           
  			 
  			$("a#example1").fancybox( onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  );
  
  			$("a#example2").fancybox({
  				'overlayShow'	: false,
  				'transitionIn'	: 'elastic',
  				'transitionOut'	: 'elastic',
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  
  			});
  
  			$("a#example3").fancybox({
  				'transitionIn'	: 'none',
  				'transitionOut'	: 'none'	,
   onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  
  			});
  
  			$("a#example3").fancybox({
  				'transitionIn'	: 'none',
  				'transitionOut'	: 'none',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("a#example4").fancybox({
  				'opacity'		: true,
  				'overlayShow'	: false,
  				'transitionIn'	: 'elastic',
  				'transitionOut'	: 'none',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("a#example5").fancybox(onStart: function(event,ui){$(this).parent().appendTo($("form:first")););
  
  			$("a#example6").fancybox({
  				'titlePosition'		: 'outside',
  				'overlayColor'		: '#000',
  				'overlayOpacity'	: 0.9,
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("a#example7").fancybox({
  				'titlePosition'	: 'inside',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("a#example8").fancybox({
  				'titlePosition'	: 'over',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))				
  			});
  
  			$("a[rel=example_group]").fancybox({
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				'titlePosition' 	: 'over',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first")),
  				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
  					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  				}
  			});
  
  			/*
  			*   Examples - various
  			*/
  
  			$("#various1").fancybox({
  				'titlePosition'		: 'inside',
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("#various2").fancybox(onStart: function(event,ui){$(this).parent().appendTo($("form:first")));
  
  			$("#various3").fancybox({
  				'width'				: '75%',
  				'height'			: '75%',
  				'autoScale'			: false,
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				'type'				: 'iframe',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  
  			$("#various4").fancybox({
  				'padding'			: 0,
  				'autoScale'			: false,
  				'transitionIn'		: 'none',
  				'transitionOut'		: 'none',
  				onStart: function(event,ui){$(this).parent().appendTo($("form:first"))
  			});
  		});
  	</script>