jQuery - FancyBox Styled Chat Window

Message Share Topic Printable Version Google Delicious Digg StumbleUpon Windows Live Yahoo Bookmarks reddit Facebook MySpace Newsvine Furl Topic Search Topic Options Post Reply Create New Topic

I have put together a sample of the WhosOn chat window inside and iFrame element that works using the FancyBox 1.3.4 code. Here are the samples of code I used via jQuery - 

External References to FancyBox elements:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.css" media="screen" />

JavaScript for behaviour of the popup box:

<script type="text/javascript">
		$(document).ready(function() {

			$("#chatlink").fancybox({
				'width'				: '65%',
				'height'			: '60%',
				'autoScale'			: false,
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'type'				: 'iframe'
			});

		});
</script>

Required Link:

<a id="chatlink" href="http://testdrive.whoson.com/chat/chatstart.aspx?domain=testdrive.whoson.com">Click to Chat (iframe)</a>

Here is a link to a version of the HTML that you can render and play with yourself - Link to Example

Edited by James Horton - 10 Nov 2011 at 11:09am