Widget:Advanced iframe

From Mibbit Wiki
Revision as of 17:55, 25 February 2009 by Molkmin (talk | contribs) (Resizing an iframe to fill the available window space:)
Jump to: navigation, search

Resizing an iframe to fill the available window space:

Add the onload and id attributes as shown below to your iframe tag.

<iframe id="chat" onload="resizeIframe();" frameborder="0" style="width: 100%; margin: 0px; padding: 0px; border: none;" src="http://widget.mibbit.com?channel=%23chat"></iframe>

Add the following javascript in the <head> section of your webpage: <script type="text/javascript">

  function resizeIframe() {
        var fheight = document.documentElement.clientHeight;
        document.getElementById('chat').style.height = fheight +"px";
  }
  window.onresize=resizeIframe;
</script>

If you have questions, ask molkmin in #help on the Mibbit IRC channel. --Molkmin 17:41, 25 February 2009 (UTC)

Here an example how to integrate the Mibbit widget into your site (stored as "myMibbit.php"):

<?PHP
 $nick = empty($_SESSION['user_name']) ? 'Wdg' : $_SESSION['user_name'];
 // default: irc.mibbit.net
 $server = 'irc.freenode.net'; 
 $room   = 'MibChat'; // w/o # or %23 !
 $uri    = 'http://widget.mibbit.com/'
 . "?nick=$nick_%3F%3F" // each %3F(=?) will be replaced by a random digit 
 . '&customprompt=Welcome%20to%20$server/$room"'
 . '&customloading=maybe%20you%20need%20to%20close%20other%20Mibbit%20windows%20first...'
 . '&settings=c76462e5055bace06e32d325963b39f2'; 
 if (!empty($room))    {$uri .= '&channel=%23' . $room;}  
 if (!empty($server )) {$uri .= '&server='     . $server;}  
 // IE needs a proper header:
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>my chat on <?php echo empty($server)  ? 'irc.mibbit.net' : $server; ?></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style>
body {font:93% verdana,sans-serif; background:#999; color:#fff;}
iframe {
  width: 97%;
  height: 400px /* "%" doesn't work for height in strict mode! */;
}
</style>
</head>
<body><center>
<h3>advanced embedded mibbit widget example</h3>
<iframe  src="<?PHP echo $uri; ?>" frameborder="0">
 [Your user agent does not support frames or is currently configured
 not to display frames. However, you may want to open the
 <A href="<?PHP echo $uri; ?>"
 target="_blank"> chat in a new browser window ...</A>]
</iframe>
<br>(no spaces, interpunctuation or leading ciphers in your /nick name)
<h4>type /help to learn about special commands</h4>
</center></body></html>
 

if you link/open this in a new window you avoid unintentional leaving the chat when hitting the back button/key:

<a href="myMibbit.php" target="_blank">myMibbit</a>