JavaScript - Working In Ie But Not In Mozilla

Hi,
Can anyone tell me why the following js code fails in Mozilla?
I call the function from:
<tr><td><a href=\"javascript:;\" onClick=\"javascript:ChangeFrame('{$link}')\" ><img src='{$thumbs_fr}' border=0></a></td></tr>

Code:

var ie45,ns6,ns4,dom;
if (navigator.appName=="Microsoft Internet Explorer") ie45=parseInt(navigator.appVersion)>=4;
else if (navigator.appName=="Netscape"){  ns6=parseInt(navigator.appVersion)>=5;  ns4=parseInt(navigator.appVersion)<5;}
dom=ie45 || ns6;

var http=createRequestObject();
var objectId = '';
var loadok = 0;

function createRequestObject(htmlObjectId){
    var obj;
    var browser = navigator.appName;
    
    if(browser == "Microsoft Internet Explorer"){
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        obj = new XMLHttpRequest();
    }
    return obj;    
}

function sendReq(serverFileName, variableNames, variableValues,objId) {
	var paramString = '';
	
	objectId = objId;
	
	variableNames = variableNames.split(',');
	variableValues = variableValues.split(',');
	
	for(i=0; i<variableNames.length; i++) {
		paramString += variableNames[i]+'='+variableValues[i]+'&';
	}
	paramString = paramString.substring(0, (paramString.length-1));
			
	if (paramString.length == 0) {
	   	http.open('get', serverFileName);
	}
	else {
		http.open('get', serverFileName+'?'+paramString);
	}
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
	
	if (http.readyState == 4) {
		responseText = http.responseText;
		getobj(objectId).innerHTML = responseText;
    } else {
		getobj(objectId).innerHTML = "<br><div align=center><img src='images/loading.gif' border=0><br>Loading content ...</div>";
	}
		
}

function change_icon(imgDocID,url) {
document.images[imgDocID].src = url;
}  

function showhide(id) {
el = document.all ? document.all[id] :   dom ? document.getElementById(id) :   document.layers[id];
els = dom ? el.style : el;
  if (dom){
    if (els.display == "none") {
        els.display = "";
      } else {
        els.display = "none";
      }
    }
  else if (ns4){
    if (els.display == "show") {
        els.display = "hide";
      } else { 
      els.display = "show";
         }
  }
}

function getobj(id) {
el = document.all ? document.all[id] :   dom ? document.getElementById(id) :   document.layers[id];
return el;
}

function showobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
 	if (dom){
	    els.display = "";
    } else if (ns4){
        els.display = "show";
  	}
}

function hideobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
 	if (dom){
	    els.display = "none";
    } else if (ns4){
        els.display = "hide";
  	}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function openPopUp(url, windowName, w, h, scrollbar) {
           var winl = (screen.width - w) / 2;
           var wint = (screen.height - h) / 2;
           winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scrollbar ;
		   win = window.open(url, windowName, winprops);
           if (parseInt(navigator.appVersion) >= 4) { 
              	win.window.focus(); 
           } 
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}

function sendToFlash () {
	var txt = document.getElementById("inputField").value;
	var txtBold = document.getElementById("txtBold").value;
	var txtItalic = document.getElementById("txtItalic").value;
	var txtColor = document.getElementById("txtColor").value;
	var txtFont = document.getElementById("ls_font").value;
	var txtSize = document.getElementById("ls_size").value;
	getobj('NDKPhoto').sendText(txt,txtFont,txtColor,txtSize,txtBold,txtItalic);
	return false;
}

function ChangeFrame (url) {
	getobj('NDKPhoto').sendFrame(url);
}

function ChangeClipart (url) {
	getobj('NDKPhoto').sendClipart(url);
}

function updateFile(outFile) {
	furl = 'act:savecam|url:'+outFile;
	sendReq('index.php', 'cmd', furl,'cam_result');
	showobj('cam_result');
}

function Show_Select_Color() {
	var newcolor = showModalDialog("select_color.html", "000000", "resizable: no; help: no; status: no; scroll: no; unadorned: no; dialogLeft:400; dialogTop:500;");
    if (newcolor != null) {
		document.getElementById("txtColor").value = newcolor; 
		document.getElementById("cl_pick").src = "pick_color.php?c="+newcolor;
		sendToFlash();
	}
}

function Dao_Gia_Tri(obj) {
	var num = document.getElementById(obj).value;
	if (num!=1) document.getElementById(obj).value = 1;
	else document.getElementById(obj).value = 0;
	sendToFlash();
}

function gotopage(p,cat){  
	change_frame_page(p,cat);
}

function change_frame_page(p,cat) {
	furl = 'act:jsload|sub:frame|p:'+p+'|cat:'+cat;
	sendReq('index.php', 'cmd', furl,'displayFrame');
}

function gotopage_clip(p,cat){  
	change_clip_page(p,cat);
}

function change_clip_page(p,cat) {
	furl = 'act:jsload|sub:clip|p:'+p+'|cat:'+cat;
	sendReq('index.php', 'cmd', furl,'displayClipart');
}

Could anyone advise on a Mozilla-equivalent of the following line of code:

Code:

document.getElementById('editorContent').contentWindow.event.srcElement.href

The purpose of this line is to get the "href" value of a link when clicked on inside a content-editable iframe.

I have the function working perfectly in IE, but not having much luck with Mozilla browsers.

How can we fire/invoke ondragstart diagrammatically in Mozilla?

hello Guys ,
Well, i've a BIG Problem With a HUGE JS application , i'm modifying its javaScript code to work on both IE/Mozilla , currently it works fine on IE but not on Mozilla.

My main Point now is events.

lets try with a little module, consider this function :

Code:

function HiliteLectures(Group,Alternatives,ForeColor){
	var i,Lecture,EventLecturesGroup,EventLecturesAlternatives,LecSrcElement
//validate event source    
    if (event.srcElement.id=='Animate'){LecSrcElement=event.srcElement.parentElement}else{LecSrcElement=event.srcElement}
    EventLecturesGroup = Group.split(",")
	EventLecturesAlternatives = Alternatives.split(",")
//hilite Lecture Group with Red as sections
	for(i=0;i<EventLecturesGroup.length;i++){//if item is not selected
		Lecture=document.getElementById(EventLecturesGroup[i])
		if ((EventLecturesGroup[i]!='') & (Lecture!= null)){
	        Lecture.style.borderColor='red';
	        Lecture.style.borderWidth=2
	        if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
		}
	}
//hilite Lecture Alternatives with blue as Lectures
	for(i=0;i<EventLecturesAlternatives.length;i++){//if item is not selected
		Lecture=document.getElementById(EventLecturesAlternatives[i])
		if ((EventLecturesAlternatives[i]!='') & (Lecture != null)){
		    if (EventLecturesAlternatives[i]!=''){
			    Lecture.style.borderColor='blue';
			    Lecture.style.borderWidth=2
			    if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
		    }
		}
	}
//Put the current lecture forecolor to ForeColor
    LecSrcElement.style.backgroundColor=ForeColor;
}

and it is attached in this place like :

Code:

temp.onmouseover=new Function("HiliteLectures('"+Lecture.Group+"','"+Lecture.Alternatives+"','"+Day.HiliteColor+"');")

this works fine in IE , i want to modify it to work on Mozilla , Any Help ??

Hi, I'm having a problem with a website I'm creating for christmas, in my family we always write santa claus letters but with a tricky side to it. So I decided to make questions on a website, the problem is that when the correct answer is given the javascript alert that is supposed to tell the user something appears and disappears without interaction from the user. I need the user to have to click OK.

By the way, this only happens when using Mozilla.

This is a problem that i have googled for hours and can't find an answer so i resort to asking on here because i found similar question on here.

I have a page i use, It has an iframe on it but it is not regular iframe, The iframe has a resizing script that resizes the height of the iframe to the height of the page being viewed. Using this script it eliminates scrolling!

This has all been working out great but then i realise for it to function properly in IE i need to add a doctype, When i add a doctype to it it functions properly in IE but it doesn't work in firefox. In firefox the frame doesnt resize and it is like 50px height.
I have tried a bunch of different doctypes and they don't work.

This is the problem page (with doctype - works properly only on IE):
http://ww-chat.com/games.php

This is the page without a doctype (Works properly only on FIREFOX - not IE):
http://ww-chat.com/games-nodoctype.php


This is the code that i use for the iframe:

Quote:
<iframe id="games" name="games" src="http://ww-chat.com/games/" frameborder=0 scrolling=no width="990" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('games');}"></iframe>

This is the script that it uses to resize the frame:
http://ww-chat.com/iframeresize.js


I have other iframes on my website which don't use the resize script and they work perfectly fine (with doctype!).

Thanks,
Worldwideebm

I have a JS method register in a TD element as below:

<td Id="MyTd" ondragenter="MyMethod('MyParam')" />

Below is the Js Method:

function MyMethod(MyParam)
{
event.dataTransfer.dropEffect = 'move';
}


The JS method works fine in IE but in mozilla throws an error that event is undefined.

I cant pass the event object from HTML while registering the method as HTML is written by someone else and I cannot change that. All I can change is the JS method.

How can i access the event object in JS method.

Thanks.

Hi all, I was looking at mozilla object.watch function and found this post

http://stackoverflow.com/questions/1...r-all-browsers

and the solution post has a object.watch function, my question is how is this implemented?

Do I need to put it in a file and include it along with my other libs? When I call it do I need to add the .prototype or just
PHP Code:
myObject.watch("itemSelect", handler); 


Will this create a problem if I'm using mozilla?

Thanks!

Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code.

Could you please assist me - why is it that the following code works in IE, yet not in Mozilla?

More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so:

HTP.p(
'<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;">
<tr>
<td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td>
</tr><tr>
<td colspan="1" style="display:none;color:#ff0000;">');

<head>
<script language="JavaScript">

function ftoggle(id){
var el = document.getElementById(id);
if(id.parentNode.nextSibling.childNodes.item(0).style.display=="")
{
id.parentNode.nextSibling.childNodes.item(0).style.display="none";
}
else {
id.parentNode.nextSibling.childNodes.item(0).style.display="";
}
}

</script>
</head>');

Ok, so the code below will open a DIV under the iframe when right-clicking inside the iframe. The DIV will display the mouse coords where it was clicked.

This works in IE, but I can't get it to work in Mozilla (FF, Saf, Op, Chr).

Any help appreciated!

Code:

<html>
<body>

<script language="JavaScript">

function initialise() {
	
	if (navigator.appName == "Microsoft Internet Explorer") {
	
		editorContent.document.designMode='on';
		editorContent.document.attachEvent("oncontextmenu", showContextMenu);
		editorContent.document.attachEvent("onclick", hideContextMenu);
		
	} else {

		document.getElementById("editorContent").contentDocument.designMode='on';
		editorContent.document.addEventListener("contextmenu", showContextMenu, true);
		editorContent.document.addEventListener("click", hideContextMenu, true);
			
	}
}

function showContextMenu() {

	if (navigator.appName == "Microsoft Internet Explorer") {
		
		var editorContentWin = document.getElementById('editorContent').contentWindow;
		var mousex = editorContentWin.event.clientX;
		var mousey = window.screenTop + editorContentWin.event.clientY;	
		
	} else {
	
		/***************************************/
		/* WHAT TO DO HERE TO WORK IN MOZILLA? */
		/***************************************/
	}
	

	
	document.getElementById("contextMenu").style.visibility = 'visible';
	document.getElementById("contextMenu").style.display = '';
	document.getElementById("contextMenu").innerHTML = 'X: '+mousex+' Y: '+mousey;
	
	if (navigator.appName != "Microsoft Internet Explorer") {
		document.stopPropagation();
		document.preventDefault();
	}
	
	return false;
}

function hideContextMenu() {
	
	document.getElementById("contextMenu").style.visibility = 'hidden';
	document.getElementById("contextMenu").style.display = 'none';

}

</script>

<iframe id="editorContent" name="editorContent" width="400" height="400" frameborder="1" onLoad="initialise();"></iframe>

<div id="contextMenu" style="width: 100px; height: 20px; border: 1px solid black; background-color: yellow; visibility: hidden; display: none"></div>

</body>
</html>

Hey Guys!

I'm new to the site but, I am building a site that has a small area of scrollable text on the page.

Basically, my scrollbar is created using layers and styles and it runs an external .js file. It has been working great up until about 6 months ago where it was incompatible in all browsers. I have no idea why. I'm literally pulling out my hair thinking about it. Any help would be nice.

The external .js file is below

<code>
// variables
var mouseover = false;
var scrolldirection;
var scrollratio;
var theheartbeat, scrolling;
var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0;
var currentX = currentY = 0;
var whichIt = null;

// events
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;

// switch direction scroller will move while pressing a button
function switchit(obj, cmd)
{
if (cmd == 'in')
{
mouseover = true;
if (obj.getAttribute('id') == "scrollup")
{
scrolldirection = -1;
}
else
{
scrolldirection = 1;
}
}
else
{
mouseover = false;
}
}

function scroll()
{
if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += scrolldirection;
}
}

function heartBeat()
{
data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop);
}

function grabIt(e) {
if (event.button == 1)
{
if (mouseover)
scrolling = window.setInterval("scroll();",1);
else
{
whichIt = event.srcElement;
while (whichIt.id.indexOf("scrollbox") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
// whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}

theheartbeat = window.setInterval("heartBeat()",1);
}
}

function moveIt(e) {
if (whichIt == null) { return false; }
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += distanceY;
}
event.returnValue = false;
return false;
}

function dropIt() {
clearInterval(scrolling);
clearInterval(theheartbeat);
whichIt = null;
}

function init()
{
menuOffsetTop = floater.style.pixelTop;
menuMaxHeight = floater.style.pixelHeight;

getscrollinc();
}

function getscrollinc()
{
var contentinc;
var scrollerinc;
var contentHeight = data.offsetHeight;
var scrollerHeight = content.style.pixelHeight;

if (scrollerHeight < contentHeight)
{
contentinc = content.style.pixelHeight / contentHeight;
scrollerinc = floater.style.pixelHeight*contentinc;
scrollratio = contentHeight / floater.style.pixelHeight;
}
else
{
scrollerinc = floater.style.pixelHeight;
contentinc = 1;
}

scrollbox.style.height = scrollerinc;
}
</code>


An example of a page I was trying to use it on is (http://desifraternity.org/history.html)


Thanks you in advance!

Hi,

I have this web browser which opens up a website that has a drop down list showing values that the user can select. And when I the firebug to inspect the elements in the page, what shows in the inspection window is this:

Code:

<select id="instance2" name="instance2"> 
<option value="0">All instances</option> 
<option value="1">Item0</option> 
<option value="2">Item1</option> 
<option value="3">Item2</option> 
                     . 
                     . 
                     . 
<option value="23">Item22</option>

What I'm supposed to do is to get the values and update them automatically to the database. I'm actually using HtmlUnit to do this project, and I've heard how I can use getElementById() to get the values. But I don't know how to start. I'm a beginner so I might need a lot of help on this matter. Help is kindly appreciated.

Thanks.

Hi guys,

I'm relatively new to coding, so apologies if this is something really trivial or even uneccessarily long.

I'm currently running a mootools and a jquery script on the same page (http://tamwardsings.squarespace.com/media).
Jquery = Jplayer audio player
mootools = video light box

Initially the jquery script wasn't working but I resolved that with var $j = jQuery.noConflict();

Now, while both scripts run in Chrome and Safari Browsers, firefox will not initiate either script.

Clicking an image with a link to the video lightbox instead sends you directly to the anchored link, and the audio player, fails to play.

Videobox script: Code:

var Videobox = {

	init: function (options) {
		// init default options
		this.options = Object.extend({
			resizeDuration: 400,	// Duration of height and width resizing (ms)
			initialWidth: 250,		// Initial width of the box (px)
			initialHeight: 250,		// Initial height of the box (px)
			defaultWidth: 425,		// Default width of the box (px)
			defaultHeight: 350,	// Default height of the box (px)
			animateCaption: true,	// Enable/Disable caption animation
			flvplayer: 'storage/js/flvplayer.swf'
		}, options || {});

		this.anchors = [];
		$A($$('a')).each(function(el){
			if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
				el.addEvent('click', function (e) {
          e = new Event(e);
          e.stop();
          this.click(el);
				}.bind(this));
				this.anchors.push(el);
			}
    }, this);

		this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
		this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);

		this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
		this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
		new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
		this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
		new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
			bottom: this.bottom.effect('margin-top', {duration: 400})
		};

	},

	click: function(link) {
	
     		return this.open (link.href, link.title, link.rel);

	},
	open: function(sLinkHref, sLinkTitle, sLinkRel) {
		this.href = sLinkHref;
		this.title = sLinkTitle;
		this.rel = sLinkRel;
		this.position();
		this.setup();
		this.video(this.href);
		this.top = Window.getScrollTop() + (Window.getHeight() / 15);
		this.center.setStyles({top: this.top+'px', display: ''});
		this.fx.overlay.start(0.8);
		this.step = 1;
		this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center');
		this.caption.innerHTML = this.title;
		this.fx.center.start({'height': [this.options.contentsHeight]});
	},

	setup: function(){
		var aDim = this.rel.match(/[0-9]+/g);
		this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
		this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;

	},

	position: function(){
    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
	},

	video: function(sLinkHref){
		if (sLinkHref.match(/youtube\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('/');
			this.videoID = videoId[4];
			this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/google\.com\/videoplay/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/ifilm\.com\/video/i)) {
		  this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('video/');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
			this.so.addVariable("flvbaseclip", this.videoID+"&");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/\.mov/i)) {
		  this.flash = false;
			if (navigator.plugins && navigator.plugins.length) {
          this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      } else {
        this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      }
		}
		else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
		this.flash = false;
		 this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
		}
		else if (sLinkHref.match(/\.flv/i)) {
		 this.flash = true;
		 this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
		}
		else {
		  this.flash = true;
			this.videoID = sLinkHref;
			this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
		}
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
			break;
			this.step++;
		case 2:
			this.center.setStyle('background','#fff');
			this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
			this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
			if (this.options.animateCaption){
				this.fx.bottom.set(-this.bottom.offsetHeight);
				this.bottomContainer.style.height = '';
				this.fx.bottom.start(0);
				break;
			}
			this.bottomContainer.style.height = '';
			this.step++;
		}
	},

	close: function(){
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}

};


window.addEvent('domready', Videobox.init.bind(Videobox));

HTML for videobox: Code:

<script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script>
<link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" />
<div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div>

Jplayer javascript: Code:

//<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){

    var Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        $j.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        $j(this.cssSelector.jPlayer).jPlayer(this.options);

        $j(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            $j(this).blur();
            return false;
        });

        $j(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            $j(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            $j(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                $j(this.cssSelector.playlist + " ul").append(listItem);
                $j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = $j(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        $j(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $j(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            $j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $j(this).data("index");
                                $j(self.cssSelector.playlist + "_item_" + index).click();
                                $j(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            $j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            $j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            $j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            $j(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        }
    };



    var audioPlaylist = new Playlist("1", [
        {
            name:"Tempered Song",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
            
        },
        {
            name:"Hidden",
            mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3"
            
        }
        

    ], {
        ready: function() {
            audioPlaylist.displayPlaylist();
            audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
        },
        ended: function() {
            audioPlaylist.playlistNext();
        },
        play: function() {
            $j(this).jPlayer("pauseOthers");
        },
        swfPath: "storage/js",
        supplied: "mp3"
    });

    $j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")});
    $j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")});
});
//]]>

Any help on this matter would be greatly appreciated,

Josh