Once I was in problem of resizing colorbox iframe.
The scenario was that I have opened the colorbox iframe for opening a page and that iframe size was according to that opened page content. But After submission of the page It redirects to another page which is also opened in the same colorbox iframe. Now my problem was that new page content was more so content is not fitting in existing iframe size.
This colorbox iframe resizing problem can occur also if we click on a link of that page which will open in the same iframe but page content might be different so iframe need to resize according to page content.
So by using below given code I resolve my problem :
1 2 3 4 5 | $(document).ready(function(){ $(".iframe").colorbox.resize({width:"960px", height:"675px"}); }) |
Or we can write it as follows:
1 2 3 4 | $(document).ready(function(){ $.fn.colorbox.resize({width:"960px", height:"675px"}); }) |
this code will resize the colorbox iframe according to given size.
If we are using ajax calling then we need to resize colorbox as follows :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> $(document).ready(function(){ $.ajax({ type: 'POST', dataType: 'json', url: ajax_login_object.ajaxurl, data: { 'action': 'ajaxforgotpassword'}, success: function(data){ // do processing with data // if colorbox then resize $.fn.colorbox.resize(); } }) return false }) </script> |
Note : for Iframe, we have to specify the size.
If you are facing any issue regarding colorbox as well as fancybox then post us your query. We will try to provide you a solution as soon as possible.
We are using jQuery colorbox with the contetType as iframe. The targeted iframe page makes two ajax calls to fetch the table content. I want the colorbox to be re-sized after the completion of both ajax calls based on number of rows fetched in the tables. could be really helpful, if you provide any suggestion or solution. Thanks.
Please call the function ‘ $.fn.colorbox.resize() ‘ in success callback function
of the ajax call which you are calling in colorbox iframe. It will automatically resize colorbox iframe according to newly loaded content.
Thanks for your response. When I call ‘ $.fn.colorbox.resize() ‘, the colorbox iframe height is getting reduced to tiny, though there is enough content in the page.
I also tested ‘ $.fn.colorbox.resize() ‘ function in Page : http://www.jacklmoore.com/colorbox/example1/ Example: ‘Outside Webpage (Iframe)’. (the example which opens wikipedia page in iframe).
When I execute the colorbox resize() function, the iframe height get reduces, But I expect the iframe height to be increased with out any vertical scroll bar.
Thanks.
You need to set colorbox scrolling option to false and also please provide url of the page where you have implemented the code instead of colorbox demo.
Thanks for your response. I tried calling the function ‘ $.fn.colorbox.resize() ‘, But the iframe window height gets reduce instead of enlarging though there is enough content in the page.
I also tried calling the ‘ $.fn.colorbox.resize() ‘ function using browser’s javascript console for below page.
page: http://www.jacklmoore.com/colorbox/example1/ example: Outside Webpage (Iframe).
I got the same output, the iframe window height doesn’t get increase to the content. Instead the iframe height gets decrease. I agree this iframe doesn’t get loaded by AJAX call, But I considered that, the content is already loaded.