Coppermine in an iframe - how to dynamically resize the height

[rbodanyi]

Hey all,
Following the advice I was given here (http://forum.coppermine-gallery.net/index.php/topic,78642.0.html) I put coppermine into an iframe on my website. But as you can see here - http://ryanbodanyi.org/bodanyiproject/project.html - I now have a problem with the height of the page.

I can get rid of the scrolling bars easily enough by setting a pixel value for the height, but I want the height to change according to the height of the content inside the iframe. That way there won't be scroll bars, AND there won't be vast stretches of empty space below when there's not much height to the content inside the iframe.

I've searched the web pretty extensively and tried just about everything I could find. Help?
And thanks!

[phill104]

There were a few solutions presented here in these forums, at least in older versions of CPG. Not tested this but here is the first of many I came across searching all forums for iframe - http://forum.coppermine-gallery.net/index.php/topic,35128.msg164960.html#msg164960

Rather than using an iframe, why not create a custom theme for cpg to fit the page you are wanting it on?

[allvip]

Is much better to try with jquery like Phill said but I belive that it only works if the gallery and the website with the iframe are on the same website.
Like this code with 244 likes http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using

If the iframe is on a diffrent server then

Code Select Expand


<iframe src="http://doamin1.com" id="external-frame" width="100%" style="border:none;"></iframe>


Then on the same domain where you have the iframe html code write css media queries in the website css file.

Something like this (it depends how long is your content). Adjust the queries min-width and max-width values and the height values for your needs. Slowly resize the browser to see how it works. You can add even more media queries to get a more accurate result.

Code Select Expand


#external-frame {height:510px;}
@media all and (min-width : 0px) and (max-width : 430px) {
#external-frame {
height:1200px;
}
}
@media all and (min-width : 430px) and (max-width : 540px) {
#external-frame {
height:1360px;
}
}
@media all and (min-width : 540px) and (max-width : 700px) {
#external-frame {
height:770px;
}
}
@media all and (min-width : 700px) and (max-width : 1300px) {
#external-frame {
height:600px;
}
}