fancybox issue again

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
LVL 16
Gurpreet Singh RandhawaWeb DeveloperAsked:
Who is Participating?
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
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
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
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 ...
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
so you are saying, the way i am doing it is not possible
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
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?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
yes
0
 
Julian HansenCommented:
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.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
how that you are saying can u show it by code way
0
 
Julian HansenCommented:
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
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
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 ?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i need to resize the modal box
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor 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>
0
 
Julian HansenCommented:
Was there a question - not sure what you are asking?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
what do you mean by this "was there a question", Did you not see the question above
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
the second one should be inside the modal window or outside it
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
it did not worked, so i abandoned it, i am accepting the answer
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.