I am writing an code for website in php & html to see how can I do
and i am facing resize problem iframe.
on the index page i am having a iframe in which all the content are loaded as the user uses the menu and other hyperlink.
there is one admin page which is also having iframe which is also having menus and when the user have interactive hyperlink.
if that admin page is open in new window , then the page works perfect.
even the main iframe works perfect till the time that admin page opens in the main iframe.
------- the problem is that, that when there is ifame in that main iframe, only inner iframe resize perfectly but the main iframe don't resize.
i was not having this problem till yesterday
every thing was working perfectly but there was some table problem which i was having and when i solved it, this new problem came up.
Main iframe code:
Iframe from other page:
Below are the external js script i am using to resize the iframe.
iframe.js
please help me out
Thank you for reading......
If there any other alternative to iframe then please share it
on the index page i am having a iframe in which all the content are loaded as the user uses the menu and other hyperlink.
there is one admin page which is also having iframe which is also having menus and when the user have interactive hyperlink.
if that admin page is open in new window , then the page works perfect.
even the main iframe works perfect till the time that admin page opens in the main iframe.
------- the problem is that, that when there is ifame in that main iframe, only inner iframe resize perfectly but the main iframe don't resize.
i was not having this problem till yesterday
every thing was working perfectly but there was some table problem which i was having and when i solved it, this new problem came up.
Main iframe code:
Code:
<code>
<iframe id="iframe" name="iframe" src="Slider/index.php" style="border: medium none; overflow: hidden; width: 100%; height: 100%;" onLoad="refresh" allowtransparency="true" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" hspace="10px" vspace="10px">
</iframe>
</code>Iframe from other page:
Code:
<code>
<iframe name="iframe1" src="#" style="border: medium none; overflow: hidden; width: 100%; height: 100%;" onload="calcHeight();refresh"allowtransparency="true" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" hspace="10px" vspace="10px" > </iframe>
</code>Below are the external js script i am using to resize the iframe.
iframe.js
Code:
<code>
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
);
}
}
);
</code>
<code>
(function ($) {
$.fn.iframeAutoHeight = function (options) {
// set default option values
var options = $.extend({
heightOffset: 0
}, options);
// iterate over the matched elements passed to the plugin
$(this).each(function () {
// Check if browser is Opera or Safari(Webkit so Chrome as well)
if ($.browser.safari || $.browser.opera) {
// Start timer when loaded.
$(this).load(function () {
var iframe = this;
var delayedResize = function () {
resizeHeight(iframe);
};
setTimeout(delayedResize, 0);
});
// Safari and Opera need a kick-start.
var source = $(this).attr('src');
$(this).attr('src', '');
$(this).attr('src', source);
}
else {
// For other browsers.
$(this).load(function () {
resizeHeight(this);
});
}
// resizeHeight
function resizeHeight(iframe) {
// Set inline style to equal the body height of the iframed content plus a little
var newHeight = iframe.contentWindow.document.body.offsetHeight + options.heightOffset;
iframe.style.height = newHeight + 'px';
}
}); // end
}
})(jQuery);
</code>please help me out
Thank you for reading......
If there any other alternative to iframe then please share it