javascriptjquerywordpressiframeiframe-resizer

Using David J Bradshaw's iframe-resizer

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.

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!