We help IT Professionals succeed at work.

fancybox issue again

Medium Priority
641 Views
Last Modified: 2012-08-21
i have the following on my parent Page

<script type="text/javascript">
$(document).ready(function(e) {
      $("#modeLogin").fancybox({
             width                  : '19%',
             height                : '50%',
             autoScale             : true,
             autoDimensions   : false,
             transitionIn       : 'elastic',
             transitionOut      : 'elastic',
             type                   : 'iframe',
             scrolling               : 'no',
             padding              :  10            
      });
});
</script>

now in my fancybox iframe popup, i have another link on which when i click, i have written the jquery inside that popup. so that just opens in that fancybox,

but i want thge height should be increased too for that opened fancybox to some 50px upon click of the link.

i googled but could not find such an answer, is it possible

Thanks in advance
Comment
Watch Question

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
The fancybox window is indeed a div if you dont use frame. And every div can only be within the document boundaries , they are not old style javascript pop up windows .

The result you wish to achieve can only be possible by opening the second popup from the main page. You just trigger that from the page loaded in the iframe.Just carry the fancybox code which is in the iframe to the main page code. And change selector by referring the parent window. parent.  with something like

parent.$('#ID').trigger("click") // you may need adding window. at start ... havent tested

But if you use two fancyboxes one may close another so you may need to use colorbox or another plugin to make them not conflict ...
CERTIFIED EXPERT

Author

Commented:
so you are saying, the way i am doing it is not possible
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Are you saying that when you click a button inside the iframe (which is in the fancy box) you want the containing iframe to be increased by 50px?
CERTIFIED EXPERT

Author

Commented:
yes
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Ok - that you can't do - iframe is isolated from its container - you cannot communicate across the iframe boundary.

You will need to locate the button outside of the iframe in the fancy box - so make it a div and in your div put the iframe and below that put your button - would be one way of doing it.
CERTIFIED EXPERT

Author

Commented:
how that you are saying can u show it by code way
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Create the fancybox as a modal window with the code

$("#modalLogin").fancybox({
            'modal' : true
      });
      
<div id="modalLogin">
 <iframe src="..."></iframe>
 <button>Close</button>
</div>

Then link the Close button to the close event on the fancy box
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
as i've told before just place this in the iframe page code when you want to open second fancybox window.

parent.$('#ID_name').trigger("click")

and place a link set to open second modal window  with the name ID_name

would you please show a some code so we can understand better what we are dealing with. do you need to resize a modal box or open one after another through the first one ?
CERTIFIED EXPERT

Author

Commented:
i need to resize the modal box
CERTIFIED EXPERT

Author

Commented:
as you have already seen the fancybox code - >

inside the modal box the code is like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".newRegistration").click(function(){
            var increaseWidth = window.innerHeight + 200;
            var s = $("#fancybox-frame").css('height', increaseWidth);
            $("#forgotModal").hide();            
            $("#loginModal").hide();
            $("#registrationModal").show();
      });

});
</script>

<div id="registrationModal">

</div>

<div id="anotherdiv">
<a class="newRegistration" title="Click Here for New registration">New User</a>
</div>
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Was there a question - not sure what you are asking?
CERTIFIED EXPERT

Author

Commented:
what do you mean by this "was there a question", Did you not see the question above
PHP Development Team Leader
Commented:
it seems this depends on the version of fancybox you use

first try
parent.$("#fancybox-content").height($(document).height());

second try this

$("#lightbox").fancybox({
  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
      $('#fancybox-content').height($(this).contents().find('body').height()+30);
    });
  }
});

else look at here, there are some other suggestions at ;
http://stackoverflow.com/questions/994876/how-do-you-resize-fancybox-at-runtime
CERTIFIED EXPERT

Author

Commented:
the second one should be inside the modal window or outside it
CERTIFIED EXPERT

Author

Commented:
it did not worked, so i abandoned it, i am accepting the answer

Explore More ContentExplore courses, solutions, and other research materials related to this topic.