JavaScript - Image File Size

Hello

I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code:

function ShowPicture(id,Source) { 
if (Source=="1"){ 
if (document.layers) document.layers[''+id+''].visibility = "show" 
else if (document.all) document.all[''+id+''].style.visibility = "visible" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
} 
else 
if (Source=="0"){ 
if (document.layers) document.layers[''+id+''].visibility = "hide" 
else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
} 
}

CSS code i use:
Code:

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 

} 
</style>

On the site to to body I put this html code:
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

When Im hovering over the link image is shown full size,

Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
 
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

I have followed all the correct steps to the Javascriptkit code for Plus Size Image Viewer: http://www.javascriptkit.com/script/...eviewer.shtml#

Everything works fine but the Enlarge Image buttons are not where they should be. They should all appear at the bottom left of each individual image and are floating up. See example he http://www.bannerpen.ca/plastic_glossy.html

Im not sure if the problem is the position or the display or none in the plusimageviewer.css script??


[CODE]
.enlargecaption{
position: absolute;
border: 1px dotted navy;
font: normal 11px Arial;
}

.enlargecaption a{
display:block;
background: lightgray; /*bg color of caption*/
padding: 3px;
text-decoration: none;
color: black;
}

.enlargecaption a:hover{
background: lightyellow; /*bg color of caption when mouse rolls over it*/
}

.enlargebox{
position: absolute;
border:1px solid gray;
display:none;
}

.enlargebox .title{
background:gray;
color:white;
padding: 3px 2px;
text-align: right;
font:bold 14px Arial;
}

.enlargebox .title img{
cursorointer;
cursor:hand;
} [CODE]

Hi,

I'm new here and trying to get some basics via examples.

On this page http://www.gilariverwoodworks.com/kitchens.htm

I have thumbnails in a table.
Immediately below the table is a full sized image of thumb 1.
I want to mouseover the thumbs and have the respective full size images swap.
The thumbs remain as is.

All the thumbs are the same file as the full size image but resized.

If moused over, the new image should remain until the next thumb is moused over - ie no autoclose or return to original image.
The viewer should be able to move around the page without having the image change til the next mouseover

All the images are the same size

Can someone offer or direct me to a script that will do this?

TIA

mr johnson

Hi. Sort of new to Javascript.

I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched.

I plan to apply it to several pages, and don't really fancy working out the pixels for each.

I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks!

Code:

<script>

$('#in').click(function() {
  $('#drag img').animate({
    width: '150%',
	height: '150%',
  }, 5000, function() {
    // Animation complete.
  });
}); 
</script>

I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate.

Is there a Javascript out there that will help me or will I be stuck having to rework my design?

http://www.uberbotjones.com/sanny/test.html

This site is really driving me crazy.

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

Hey all- trying to get this bit of js to work properly.
I'm close, but the issue is that if the window is opened at a size that is SMALLER than the original image, it wont scale down to the smaller size until i first make the window bigger, THEN size it down smaller.
The image itself is big (its fashion photography so it needs to be high res) and the js sets the minimum width at 1070. Id like to have the image as big as possible and then on page load automatically drop down to as low as 1070px if the window size is small.
Here is the js:

Code:

jQuery.noConflict();

    function screenSize() {

        var w, h; 
        w = (
             window.innerWidth ? 
             	window.innerWidth : 
                   (
                   document.documentElement.clientWidth ? 
                        document.documentElement.clientWidth : 
                              document.body.offsetWidth));
        h = (
             window.innerHeight ?
                window.innerHeight : 
                  (
                  document.documentElement.clientHeight ? 
                     document.documentElement.clientHeight : 
                         document.body.offsetHeight));
        return {w:w, h:h};
  }
  
jQuery(document).ready(function () 
	{
		if( screenSize().w > 1070 )
		{
		document.getElementById('home-page-bg-image').style.width = screenSize().w  + 'px';
		}
	})

jQuery(window).resize(function()
	{
		if( screenSize().w > 1070 )
		{
		document.getElementById('home-page-bg-image').style.width = screenSize().w  + 'px'; 
		}
	});

let me know if you have any ideas

Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance

<style>
.table th {border-style: solid; border-color: red;background-color: #CCCCFF;
}
</style>
<body>
<table border="1" class="table">
<thead>
<th colspan = "5">Click an Image to Enlarge
</th>
</thead>
<tbody>
<tr>
<td>
<img src = "Thumbnails/ada1838-thumb.JPG" alt =
"ada1838-thumb" >
</td>
<td>
<img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb">
</td>
<td>
<img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb">
</td>
<td>
<img src = "Thumbnails/aediagram-thumb.JPG" alt =
"aediagram-thumb">
</td>
<td>
<img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb">
</td>
</tr>

<tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center">

</td>
</tr>
<thead>
<th colspan = "5">
</th>
</thead>
</table>
</body>
</html>

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

I am trying to grab the file name of an image generated by a PHP file. I first tried loading the image in an iframe, letting it load, and then grabbing the src; but IE and Fx security measures denied me access to both the src and the href of the iframe. Then, I tried storing the iframe in an object variable after loading and reading the src / href of the variable, but it was always null. Finally, I decided to replace the iframe with an image tag...and it actually started to work. I could access the src after the image had loaded! The only problem is...it is giving me the original src, when what I want is the src generated by the php file that I am using as the image src. As a last personal attempt, I stored the image tag into an Image object, and then used the name method to try and get the file name of the image inside of the tag, but again...that is just returning the src of the php file.

Here is where the code is loading: http://avatars.imvu.com/GetInfo

Can anyone tell me how to get the file name of an image?

Code:

<script type="text/javascript">

var UserID='';
var aviName='';
var aviPicBegin = 'http://www.imvu.com/catalog/web_av_pic.php?av=';
var aviPicFull='';
var aviPic2='';
var myIMG = imgDisplay;

function input() {
	aviName = fInput.txtAviName.value;
	aviPicFull = aviPicBegin + aviName;
	document.getElementById('imgDisplay').src=aviPicFull;
}

function display() {
	myIMG = imgDisplay;
	//aviPic2 = imgDisplay.src;
	//myIMG.src = aviPic2;
	alert("img src = " + myIMG.src);
	//userID=;
	// document.fOutput.txtID.value = userID;
	//document.fOutput.txtHP.value = "";
	//document.fOutput.txtBlock.value = "";
	//document.fOutput.txtAdd.value = "";
	//document.fOutput.txtReport.value = "";
}

</script>

<center>
<FORM name=fInput>
	Avi Name: <input type="text" name="txtAviName"></input><br/><br/>
	<input type="button" name="Operation" value="Get Info" OnClick="input();"></button>
</FORM>
<br/>
<br/>

<img src="/catalog/web_av_pic.php?av=GetInfo" id="imgDisplay" width="160px" height="220px" scrolling="no" padding="0" MARGINWIDTH="0" OnLoad="display();"></img>
<br/><br/>
<FORM  name="fOutput">
	ID: <input name="txtID"></input><br/>
	HP: <input name="txtHP"></input><br/>
	Block: <input name="txtBlock"></input><br/>
	Add: <input name="txtAdd"></input><br/>
	Report: <input name="txtReport"></input>
</FORM>
<br/><br/>
</center>

Thanks to everyone who took the time to read this.

Hey, I need some JavaScript code which will display the width and height of an image, before it is created on the page, so from the file itself.

I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that.

This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox):

Code:

function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}

Is it possible?

I have almost 300 photos that I want to have in a gallery that is easy to use. I would like to avoid making 300 list items (as is necessary with all of the auto rotators and other jquery plug ins that I've found) but to have the images load straight from the folder after the rest of the website has loaded.

It wold be nice if maybe there was a pretty horizontal scroll bar or something and the image in the middle of the page was biggest if possible, but I'm really not picky. I don't know what the best way is to display so many photos! They don't need captions or anything.

Any ideas??? Thanks!

Hi, I am new to this forum but I am in dire need of help. I am sorry if this isn't they way you normally do things. I read through some of the rules, but it is late and I am in a hurry. Any help would be greatly appreciated.

I need the image file names in my array to be shown in the text box. I am not quite sure how to do this. I have been trying for some time but cannot figure it out. Here is my code.

<head>
<title>Asn4CStartup.htm by Todd Bowman</title>
<style type="text/css" >
h1, h2, h3 {font-family: 'arial black';}
.controls { font-family: 'arial black'; font-size:10pt;}
</style>
<script type="text/javascript">
/* <![CDATA[ */
// Note: variables declared inside a function
// using the var keyword are all local variables. It means that these
// variables are only known inside the function. Other functions cannot see
// the values.
// On the other hand if a variable is declared outside any function, these are global
// variables. The values of global variables are available in all other functions.
// Other function can change the values of global variables.

// Declare a global var n:
var n=0; // we will use this global variable to keep track of exactly which element of the array
// is being displayed now. When the user clicks Next button, we will add 1 to n and
// then display the image file in the nth element of the array

// Declare a global array that will contain the names of image files.
var imgArray = new Array();

// The following function will be triggered on the onload event of the page.
function fillArray()
{
// alert ("Hello on load");
imgArray[0]="Bus1.jpg";
imgArray[1]="Bus2.jpg";
imgArray[2]="Fam1.jpg";
imgArray[3]="Fam2.jpg";
imgArray[4]="Honey1.jpg";
imgArray[5]="Honey2.jpg";
imgArray[6]="Map1.png";
// for ( i in imgArray)
// alert (imgArray[i]);

}

function showNext()
// This function will be triggered on click of the Next button
{ // alert ("Hello showNext");
// alert(n);
n = n+1;
//alert (n);
if (n > imgArray.length-1)
{ alert ('You are already on the last image');
n = n-1;
}
else
document.getElementById('imgPic').src='images/'+imgArray[n];

} // end showNext()

function showPrevious()
// This function will be triggered on click of the Previous button
{
// alert("Hello Previous");
// alert(n);
n = n-1;
// alert (n);
if (n < 0)
{ alert ('You are already at the first image');
n = n+1;
}
else
document.getElementById('imgPic').src='images/'+imgArray[n];
} // end showPrevious()
function showFirst()
//This function will be triggered on click of the First button
{

// alert (n);
if (n == 0)
{ alert ('You are already on the first image');
}
else
document.getElementById('imgPic').src='images/'+imgArray[0];
}
function showLast()
{
// alert (n);
if (n > imgArray.length-1)
{ alert ('You are already on the last image');
}
else
document.getElementById('imgPic').src='images/'+imgArray.length-1;
}
/* ]]> */
</script>
</head>

<body onload="fillArray();">
<div>
<h1> Asn4CStartup.htm by Mesbah Ahmed </h1>
<h2>Windsurf Image Navigation </h2>
Name of the image file shown below: &nbsp <input type="text" id="imageName" size="20" readonly="readonly" /> <br/><br/>

<img id="imgPic" src = "images/Bus1.jpg" alt="picture" width="500px" height="350px" /> <br/>
<input type="button" value="Next" class="controls"
onclick="showNext();" />
<input type="button" value="Previous" class="controls"
onclick="showPrevious();" />
<input type="button" value="First" class="controls" onclick="showFirst();" />
<input type="button" value="Last" class="controls" onclick="showLast();" />
<br/>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml11.png"
alt="Valid XHTML 1.1!" height="31px" width="88px" />

<img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.png"
alt="Valid CSS!" height="31px" width="88px" />
</p>
</div>
</body>
</html>

Hey everyone, I'm working on a website, and I have one page that uses a forum that is supplied by tal.ki. The forum works fine, but the .js file that the forum uses is grabbing the image that I am using as my header on the page (not in the header of the html, just on top of the page) and moves it down and right from where it is supposed to be. My apologizes for the file being so long, but I have no idea which line it is that makes the image move. If needed, I have pictures of how it looks in the program that I use, vs. how it looks when viewed in a browser.

Thanks so much (in advance) for any help.

Code:

 if (!window.chatter) {
                window.chatter = function() { return this; }();
            }
            if (!window.chatter.embeds) {
                window.chatter.embeds = {};
            }
            window.chatter.embed = function(host, args) {
                var host = host;
                var cid = Math.floor((Math.random())*1000000000).toString();
                var default_height = 1600;
                var embed_url = window.location.href.split('#')[0];

                var current_path = window.location.hash.substr(1);
                var disable_path = current_path && current_path[0] != "/";
                disable_path |= (window != top);
                    
                if (!current_path || disable_path) {
                    if (!current_path && !disable_path) {
                        location.href = embed_url + "#/";
                    }
                    current_path = "/";
                }

                if (window.gadgets)
                    embed_url = ''; // Don't let the site change the hash

                window.chatter.embeds[cid] = this;

                handleCommand = function (cmd) {
                    if (cmd[0] == 'ch_resize') {
                        resizeFrame(cmd[1]);
                    } else if (cmd[0] == 'ch_load') {
                        if (disable_path)
                            current_path = cmd[1];
                        else {
                            current_path = window.location.hash.substr(1);
                            if (current_path != cmd[1]) {
                                current_path = cmd[1];
                                location.href = embed_url + "#" + current_path;
                            }
                        }
                    } else if (cmd[0] == 'ch_unload') {
                        if (window.attachEvent || findPosScroll('chatterframe'+cid) < 0)
                            document.getElementById('chatterframe'+cid).scrollIntoView(true);
                        // resizeFrame(default_height);
                    } else if (cmd[0] == 'ch_scrollto') {
                        window.scrollTo(0, findPos('chatterframe'+cid)+parseInt(cmd[1], 10));
                    } else if (cmd[0] == 'ch_delfoot'){
                        var a = document.getElementById(cmd[1]);
                        a.parentNode.removeChild(a);
                    }
                }

                if (window.postMessage) {
                    function onMessage(e) {
                        var cmd = e.data.split(':');
                        var frame = document.getElementById('chatterframe'+cid);
                        if (frame.contentWindow != e.source)
                            return;
                        handleCommand(cmd);
                    }
                    if (window.addEventListener)
                        window.addEventListener("message", onMessage, false);
                    else
                        window.attachEvent("onmessage", onMessage);
                } else {
                    /* Fall back for browsers that don't support HTML5's postMessage */
                    var msg_seq = null;
                    function checkMessages() {
                        var chatter_frame = window.frames['chatterframe'+cid];
                        if (!chatter_frame)
                            return;

                        try {
                            var bus = chatter_frame.frames.msg_frame;
                            var hash = bus.location.hash.substr(10);
                        } catch(e) {
                            return;
                        }

                        var cmd = hash.split(':');
                        var seq = cmd[0];
                        if (msg_seq == seq)
                            return;
                        msg_seq = seq;
                        cmd.splice(0, 1);
                        handleCommand(cmd);
                    }
                    setInterval(checkMessages, 300);
                }

                function checkHash() {
                    var path = window.location.hash.substr(1);
                    if (!path)
                        path = "/";
    
                    if (path != current_path) {
                        current_path = path;
                        window.frames['chatterframe'+cid].location.replace(buildURL(path));
                    }
                }

                if (!window.gadgets) {
                    if (!disable_path) {
                        if ("onhashchange" in window) {
                            if (window.addEventListener)
                                window.addEventListener("hashchange", checkHash, false);
                            else
                                window.attachEvent("onhashchange", checkHash);
                        } else {
                            setInterval(checkHash, 300);
                        }
                    }
                }

                function buildURL(path) {
                    return 'http://' + host + path + "?" + args + "&cid=" + cid + "&eh=" + encodeURIComponent(embed_url);
                }

                function resizeFrame(height) {
                    var el = document.getElementById('chatterframe'+cid);
                    el.style['height'] = height + "px";
                    if (window.gadgets) {
                        gadgets.window.adjustHeight();
                    }
                }

                function findPosScroll(id) {
                    var node = document.getElementById(id);
                    var curtop = 0;
                    var curtopscroll = 0;
                    if (node.offsetParent) {
                        do {
                            curtop += node.offsetTop;
                            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
                        } while (node = node.offsetParent);
                        return curtop - curtopscroll;
                    }
                    return -1;
                }

                function findPos(id) {
                    var node = document.getElementById(id);
                    var curtop = 0;
                    if (node.offsetParent) {
                        do {
                            curtop += node.offsetTop;
                        } while (node = node.offsetParent);
                        return curtop;
                    }
                    return -1;
                }
                
                
                //--Auto Theming:
                try{
                    var theme_args = '';
                    if (window.chatter_options) { 
                        if ('css_append' in window.chatter_options) {
                            theme_args = '&cssa='+encodeURIComponent(window.chatter_options['css_append']);
                        } else if ('css_replace' in window.chatter_options) {
                            theme_args = '&cssr='+encodeURIComponent(window.chatter_options['css_replace']);
                        }
                    }
                    if (theme_args === '') {    
                        document.write("<span id='probe"+cid+"'></span>");
                        var op = document.getElementById('probe'+cid);
                        var p = op;
                        var i = 0;
                        var color = null;
                        var font = null;
                        while (i < 1000){
                            p = p.parentNode;
                            if (window.getComputedStyle) {
                                var style = window.getComputedStyle(p, null);
                                color = style.getPropertyValue('background-color');
                            } else {
                                color = p.currentStyle.backgroundColor;
                            }
                            if(color != 'transparent' && color != '' && color != 'rgba(0, 0, 0, 0)') {
                                break;
                            }
                            color = null;
                            i++;
                        }
                        if (window.getComputedStyle) {
                            var style = window.getComputedStyle(op, null);
                            font = style.getPropertyValue('font-family');
                        } else {
                            font = op.currentStyle.fontFamily;
                        }
                        
                        //ie8 no like this
                        //delete op.parentNode.removeChild(op);
                        
                        if (font)
                            font = font.replace(/['"]/g,'');
                        
                        theme_args = '&f='+encodeURIComponent(font) +'&t='+encodeURIComponent(color)+'&nocss=1';
                    }
                } catch(e) { }
                
                var forum_code = "<iframe id='chatterframe"+cid+"' name='chatterframe"+cid+"' src='" + buildURL(current_path) + theme_args + "' style='width:100%; height:" + default_height + "px; border:0;' scrolling='no' frameborder='0' border='0' width='100%' height='" + default_height + "'></iframe>";
                document.write(forum_code);
                return this;
            };
            try {
                if (window.location.hash.substr(0, 9) != "#msgframe")
                    window.chatter.embed('qcx1quj3rz.embed.tal.ki', '');
            } catch(e) {
                document.write("<div style='background-color:white; color:black';>Forum failed to load: " + e + "</div>");
            }