Using David J Bradshaw's iframe-resizer

iframe, iframe-resizer, javascript, jquery, wordpress

Solution

It looks like you need to add a js file to your `http://66.172.12.238/ts3.php`

See fiddle here of your page and the example of the plugin page.

You need to add this js file:

<script type="text/javascript" src="http://davidjbradshaw.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>

I dont know if you have any knowledge on how to load extra js files to Wordpress. If not, read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Adding js files to Wordpress

I would add this to a js file on it's own to execute the resizer, I'll name it iframe.js:

iFrameResize({
    log                     : true,                  // Enable console logging
    enablePublicMethods     : true,                  // Enable methods within iframe hosted page
});

Add this to your functions.php file of your theme:

    function theme_name_scripts() {
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframeResizer.min.js ', array(), '1.0.0', true );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframe.js ', array(), '1.0.0', true );
    }

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Make sure you add the iframeResizer.min.js and iframe.js in your `themefolder/js/` folder.

You can edit the iframe.js script as you dont need the extra options for the plugin!

Problem

I have a Teamspeak status viewing script hosted on a different domain than my wordpress. So I'm trying to show the script results in a text/html widget using an iframe except it will not auto-size the height. Wordpress is on shared hosting so this script will not communicate with my teamspeak server from there. I cannot find any other ts3 viewers that work while auto-hide empty channels and not completely ugly. After doing some research I came across what appears to be the latest and greatest solution, David J Bradshaw's iframe-resizer. Now I'm no expert on the subject and don't completely understand how I should set this up properly. Currently my wordpress widget reads like this: ``` <iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe> ``` ts3.php reads like this: ``` <html> <head> <title>TSStatus</title> <link rel="stylesheet" type="text/css" href="/ts3/tsstatus.css" /> <script type="text/javascript" src="/ts3/tsstatus.js"></script> </head> <body> <?php require_once("/var/www/ts3/tsstatus.php"); $tsstatus = new TSStatus("ts3.greatarchitect.us", 10011); $tsstatus->useServerPort(9987); $tsstatus->imagePath = "/ts3/img/"; $tsstatus->timeout = 2; $tsstatus->hideEmptyChannels = true; $tsstatus->hideParentChannels = true; $tsstatus->showNicknameBox = false; $tsstatus->showPasswordBox = false; echo $tsstatus->render(); ?> </body> </html> ``` and that's pretty much all I have right now. I was hoping someone could help me properly install/setup this iframe-resizer. Thank you.

Original source