Difference between revisions of "Widget:Advanced iframe"
(→Resizing an iframe to fill the available window space:) |
(→Resizing an iframe to fill the available window space:) |
||
| Line 7: | Line 7: | ||
Add the following javascript in the <head> section of your webpage: | Add the following javascript in the <head> section of your webpage: | ||
| − | |||
| − | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function resizeIframe() { | function resizeIframe() { | ||
| Line 16: | Line 14: | ||
window.onresize=resizeIframe; | window.onresize=resizeIframe; | ||
</script> | </script> | ||
| − | |||
If you have questions, ask molkmin in #help on the Mibbit IRC channel. | If you have questions, ask molkmin in #help on the Mibbit IRC channel. | ||
--[[User:Molkmin|Molkmin]] 17:41, 25 February 2009 (UTC) | --[[User:Molkmin|Molkmin]] 17:41, 25 February 2009 (UTC) | ||
Revision as of 17:55, 25 February 2009
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>
