|
JavaScript - Help Porting Javascript App To 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 ?? Similar TutorialsHi, 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');
}
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. 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>'); 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 All, This is my first post in this forum. I am relatively new to javascript. Hope I get some guidance here. Also I would like to contribute here when I get little expertise on javascript. I have developed following snippet of code, which is working very well with firefox 6.0. But when it comes to IE 8.0, it just does not work. Quote: <SCRIPT LANGUAGE="JavaScript"> function refreshFrame() { frames['top'].window.location.href = "report.php?parent_id=<? echo $parent_id; ?>"; } </script> </head> <? include('style.php'); include('PHP_functions.php'); print(" <FRAMESET rows='96,100' onLoad=refreshFrame() BORDERCOLOR=blue BORDER=0> <FRAME SRC=blank.html SCROLLING=NO NORESIZE NAME=top> <FRAME SRC=manage.php?view=show_all&parent_id=$parent_id NAME=bottom> </FRAMESET> "); ?> </HTML> In the above script, I am trying to load the frame top after loading frame bottom, as the latter takes more time to load due to some processing involved. Till frame bottom is under processing stage, I display a message "Processing Please wait" which is coming from blank.html. Working under Firefox: It loads blank.html first and displays the message as "processing please wait". Once frame bottom has completed the processing it displays its contents at second half of the webpage. Then finally frame top gets loaded on first half of the web page. This is the expected result. Here URL does not change as the URL remains same as before "http://xyz.com/index.html" Not Working under IE It loads blank.html first and displays the message as "processing please wait". Once frame bottom has completed the processing it displays its contents at second half of the webpage. Then finally frame top gets loaded on whole page instead of first half of the page. Here URL changes to complete new URL as "http://xyz.com/report.php?parent_id" Can anyone please suggest what could be reason for this. Thanks, Vinay HI Friends, I am facing some issue in javascript .my code is working in ie but not in mozilla onkeypress and onkeydown events.please tell me the solution if u knows. my code is givenbellow. in javascript file i have two methods. Code: //========javascript file===========
//will call on keydown
function keyCheck(e)
{
alert('hi---hello --onkeydown');
// var KeyID =(window.event)? event.keyCode : e.which;
var browser=navigator.appName;
// document.write("Browser name: "+ browser);
var asciiValue=event.keyCode;
if(asciiValue=='13' || asciiValue=='32'){
return true;
}
return false;
}
//call on key press
function closePopUpLayer1(e){
alert('hi---onkeypress');
var browser=navigator.appName;
document.write("Browser name: "+ browser);
unHideDropDownLists();
document.getElementById('popupLayerContent').className="popuplayer";
document.getElementById('mainBody').style.display="none";
document.getElementById('Hotels_TnC_popUp').focus();
}
==============my html file===========
<div>
<div class="popup-top-corner-left-img"></div>
<div class="popup-top-image"></div>
<div class="popup-top-corner-right-img"></div>
</div>
<div>
<div class="popup-left-image"></div>
<div class="popup-div1">
<div>
<div class="XX-Large-Dark-Gold-popUpText">credit</div>
//here i am calling two functions in javascript
<div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="alert('hello');javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div>
</div>
<div class="popup-dark-gray-text">xxxxxdiv>
</div>
<div class="popup-right-image"></div>
</div>
<div class="popup-bottom">
<div class="popup-bottom-corner-left-img"></div>
<div class="popup-bottom-image"></div>
<div class="popup-bottom-corner-right-img"></div>
</div>
How can we fire/invoke ondragstart diagrammatically in Mozilla?
Hello, I have this script (which i didn't program) which is suppose to count down an amount of time, and then redirect the page to another place. It works fine on IE/Opera but it doesn't on Netscape/Mozilla. I was wondering if any one could tell me the couse or another script that will work on most browsers. Thanks a lot Code: time_in_sec = 300;
function nextSec()
{
m = Math.floor(time_in_sec / 60);
s = time_in_sec % 60;
if (s < 10) { s = "0" + s; }
if ((m == 0)&&(s == 0))
{
location.replace("SOME_URL");
} else {
document.all.counter.innerHTML = '<font style="font-size: 13pt" color="#999999">' + m + ":" + s + "</font>";
window.setTimeout('nextSec()',1000);
}
time_in_sec--;
}
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. I have an online calculator in javascript which works in IE but not Moz. Can anyone help: site: http://www.exigotranslations.com code: function workit() { var xsource = new Array(0,0.09,0.1); // source language var xtarget = new Array(0,0.09,0.10,0.12,0.14); // target language var xtype = new Array(0,0,0.06,0.02,0.06,0.04,0.06,0.03,0.01); // type of text var itemA = parseInt(form1.words.value); if(!itemA){itemA=1}; var itemB = parseInt(form1.source.options[form1.source.selectedIndex].value); var itemC = parseInt(form1.target.options[form1.target.selectedIndex].value); var itemD = parseInt(form1.type.options[form1.type.selectedIndex].value); var total = (itemA*(xtarget[itemC]+xtype[itemD])); if(total < 9) {total = 9}; mytotal.innerHTML = total.toFixed(2); } link to code from webpage is: <script src="Javascript/formcheck.js" type="text/javascript"></script> Can anyone help with what I have done wrong. Thanks, Richard Hi All, I am using one script which is functioning properly incase of IE but incase of Mozilla evenif the shift key is pressed and any character key is pressed then it is displaying Caps Lock is On. can anyone tell how can I make it Mozilla and IE compatible. 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. 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 Hi All, I am using one script which is functioning properly incase of IE but incase of Mozilla evenif the shift key is pressed and any character key is pressed then it is displaying Caps Lock is On. can anyone tell how can I make it Mozilla and IE compatible. 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>
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 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! 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 |
|||||||