Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

fancybox issue again

Posted on 2012-08-11
15
Medium Priority
?
617 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
0
Comment
  • 8
  • 4
  • 3
15 Comments
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38284473
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38284791
so you are saying, the way i am doing it is not possible
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38285229
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38285463
yes
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38285494
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38285547
how that you are saying can u show it by code way
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38285601
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
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38286020
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38286515
i need to resize the modal box
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38286556
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38286658
Was there a question - not sure what you are asking?
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38286849
what do you mean by this "was there a question", Did you not see the question above
0
 
LVL 9

Accepted Solution

by:
Erdinç Güngör Çorbacı earned 1500 total points
ID: 38286883
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38287374
the second one should be inside the modal window or outside it
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 38319146
it did not worked, so i abandoned it, i am accepting the answer
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month11 days, 19 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question