We Keep Coding

SWFObject event undefined in Chrome works in IE

I want to get the currentFrame of my Flash movie when it is loaded. I followed the the tutorial found here http://learnswfobject.com/advanced-topics/executing-javascript-when-the-swf-has-finished-loading/index.html and SWFOBJECT CurrentFrame Javascript. I am using SWFObject 2.3 beta. This works perfectly fine on Internet Explorer however it does not work on Google Chrome.
In Chrome I get the error
Uncaught TypeError: e.ref.currentFrame is not a function
Checking e it returns [object Object]
Checking e.ref returns [object HTMLObjectElement]
Checking e.ref.totalFrames returns undefined
var flashvars = {};
var params = {};
var attributes = {};
function mycall(e){
setInterval(function(){console.log("Frame: " + e.ref.currentFrame)},1000);
}
swfobject.embedSWF("notmyswf.swf", "course", "100%", "100%", "6.0.0", false, flashvars, params, attributes, mycall);
Why is this not working on Chrome but works well with IE? Is the event e not detected? Is there a work-around on how to make this work on Chrome?
The purpose of this is for me to create a check if the user is really using the course he has opened and not just leaving it idle. I have already added a code that will check idle but it is not enough. Most learners, have figured out a way to just open a course, leave it there to accumulate hours of training. Some even have a program running in their computers that will just move the mouse 1-pixel every few seconds so that the computer does not go to idle. If I can check the current frame of the Flash movie, I can create a function that will calculate the current page the user is viewing every 15 minutes. If he is stuck in the same page I can then show a prompt that the user must click in order to continue viewing the course or it will automatically close.

I suggest dropping the SWF-based currentFrame approach in favor of monitoring your calls to the database using JavaScript. (Based on your comments, it sounds like the DB calls are being sent by JS, so this shouldn't be a problem.)
If the course bookmark is auto-saved every 3 minutes (as described in your comments), you can cache the value in your page's JS and do a compare every time the save is performed. If the value hasn't changed in x number of minutes, you can display your timeout warning.
If you're using a SCORM wrapper (or similar), this is really simple, just modify the wrapper to include your timer code. Something like:
//Old code (pseudocode, not tested)
function setBoomark (val){
API.SetValue("cmi.core.lesson_location", val);
}
//New code (pseudocode, not tested)
var current_location = "";
var activityTimer;
function disableCourse(){
//do stuff to disable course because it timed out
}
function setBoomark (val){
API.SetValue("cmi.core.lesson_location", val);
if(val === current_location){
//do nothing, timer keeps ticking
} else {
//reset timer using new bookmark value
if(activityTimer){ clearTimeout(activityTimer); }
activityTimer = setTimeout(disableCourse, 15000);
//Update current_location value
current_location = val;
}
}
This is a rough sketch but hopefully you get the idea.

I feel stupid!
It did not work in Chrome and Firefox because I used the wrong casing for the functions but in IE11 it works no matter the case.
So the correct functions are:
e.ref.CurrentFrame() //I used currentFrame() which still works in IE11
e.ref.TotalFrames() //I used totalFrames() which still works in IE11
e.ref.PercentLoaded() //I used this correctly and was able to get the value

tabs with javascript not working in IE

Well I’m having a hard time figuring this out, the deal it’s that I’m using this code in some tabs that I have, it works perfect in all browser except for Internet Explorer 10, 9, the tabs are showing but when you click on them the information doesn’t change. So after looking what the error it’s I have found that in IE one if it’s not running, here’s the code:
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self = this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
//the problem lies here, in IE the if doesn't run
if (el == li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
</script>
So the deal it’s that the condition of the IF statement it’s not running and I have no clue of why.
I'm using IE 10 and 9 since IE 8 it's working fine, also I'm not getting any errors in the console of IE .

Open the F12 tools and use the debugger. Set a break point on the line. See what li and el are and see if they are actually equal. I would probably try to compare the id or some other value that is unique to the li you are trying to match. you have to remember you are comparing two instances of jQuery the way your are doing it right now. To actually compare the node (element) you would do it this way: li[0] === el[0];
Try the debugger and use the watch window to see what the values actually are and try to compare the actual node, not jQuery instances.

If Your code is working fine with IE8 then try following code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
This will make your code IE 8 compatible no matter which version of IE you are using.
The only thing you should take care is, your code should work fine in IE 8.

Well I have figured out what happen
ul.select('li', 'ol').each(function(el){
so in this line i had 'li' and 'ol', since the page didn't have any 'ol' the page in IE wasn0t working so since I remove

IE Browser Mode and Document Mode onchange()

A client has a few machines set to different browser and document modes. This is affecting a Javascript function:
$(".jumpmenu").change(function() {
var val = $(this).val();
if (val != '') {
location.href=val;
}
});
The function does not run when this is the case. I have set my IE to the same and can confirm that the change does not happen.
My first question is why would an IT department set the browser and document modes differently.
Secondly is there anything I can do to quickly fix the problem without making them change their doc and browser modes?
regards.

Javascript, detect if the textbox has focus?

I'm upgrading a script to make it crosss browser. The current code I have is as follows.
function testFocus(){
var testSelection = document.getElementById('chattext').contentWindow.
window.document.selection.createRange().parentElement();
while (testSelection)
{
if (testSelection.id == "chatContent") {
return true;
}
testSelection = testSelection.parentElement;
}
return false;
}
However the following code no longer works in modern browsers. Presently the code above has to have text selected. Where it just needs to check that the textbox has focus. The function is used as a check before text is added by a button / javascript.

Strikes me that you could use an event listener to set a variable. The only problem being that IE uses attachEvent(event, callback) instead of addEventListner so you've actually got to add the code
<script type="text/javascript">
var ChatHasFocus = false;
var ts = document.getElementById('chattext');
function setFocus() {ChatHasFocus = true;}
function setNoFocus(){ChatHasFocus = false;}
if (ts.addEventListener != undefined) {
ts.addEventListener('focus', setFocus, false);
ts.addEventListener('blur', setNoFocus, false);
} else if (ts.attachEvent != undefined) {
ts.attachEvent('onfocus', setFocus);
ts.attachEvent('onblur', setNoFocus);
} else {
ts.onmouseover = setFocus;
ts.onmouseout = setNoFocus;
}
</script>
edit - I've added script tags to show you how it adds to your document. I've tested in firefox and chrome and it seems to work, but getting an IE sandbox together might be a little more difficult for me. I'm sure there's something little that I'm missing there - i'll take a look.
edit2 i made a mistake with the IE code. tuns out you don't put quotes around 'undefined' I've fixed the code above to reflect an answer that is tested and wotkign in firefox, chrome and IE6. I don't have any other IEs to test in.

Why would this code work in IE and fail in Firefox and Chrome?

So loading up our new web application in Firefox and Chrome I had an alert subtly tell me that a tabStrip couldn't be found. Following through the code I found this function:
function initializeTabStrip() {
var tblList = document.getElementsByTagName("table");
var tabStrip = null;
for (var i = 0; i < tblList.length; ++i) {
if (typeof (tblList[i].tabStripRoot) != "undefined") {
tabStrip = tblList[i];
break;
}
}
if (tabStrip) {
window.tabStrip = new TabStrip(tabStrip);
}
else {
alert("couldn't find tabstrip");
}
}
In both Firefox and Chrome, typeof (tblList[i].tabStripRoot) comes up to be undefined, whereas in Internet Explorer the same section of code will find an item, and follow through correctly.
I've tried using Firebug and IE's developer toolbar script debugging tool to follow through and attempt to discover what 'tabStripRoot' is, but I haven't had any luck.
Would any of you JavaScript guru's be able to give me some direction into why one out of three browsers works?
Thanks for your help.

You're relying on IE's non-standard ability to access arbitrary attributes as properties of DOM elements.
In standards-compliant browsers, you cannot write someElement.tabStripRoot to access the tabStripRoot attribute.
Change it to tblList[i].getAttribute('tabStripRoot').