Develop Reference

Can't get HTML5 Video id in HTML4 using javascript?

i need to track that a video is viewed or not, so i have found a trick that using javascript as follows
<script type='text/javascript'>
document.getElementById('fce_video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
alert('hi');
}
</script>
But my HTML version is 4, while i get video tag id it cause
Error: TypeError: document.getElementById(...) is null
what is wrong with my script?

If you're using a html video tag in HTML4, it won't matter what you do, since that tag didnt exist in HTML4, hence why you're javascript can't find the tag. If you're using a flash video, make sure to run your script after the page has loaded, it might be running before the video was rendered to the page.

JavaScript can't find the element with id="fce_video".
Make sure you run this script after the element has been included on the page.
Sometimes I see this:
[script here]
[referenced element here]
That doesn't work, you have to change the order.

Uploadify in ie9 getting js error : SCRIPT5007: Object expected

I am trying to bind uploadify on div.
When I clicked on upload button it show me error like SCRIPT5007: Object expected.
For demo check below link which produced error on dragging of div in ie9
head
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/js/jquery.uploadify.min.js"></script>
body
<div class="container" id="container">
<div id="uploadify-item"></div>
This container is not draggable in IE9 but it works in Chrome and FF. Why not?
</div>
js
$('#uploadify-item').uploadify({
'swf' : 'http://www.uploadify.com/uploadify/uploadify.swf',
'uploader' : 'http://www.uploadify.com/uploadify/uploadify.php'
});
$("#container").draggable();
Refer : http://jsfiddle.net/axzdR/19/

IE9 seems to have a bug with SWFUpload embeds, whereby if you try to
call "getAttribute / removeAttribute / setAttribute" on the element,
an "object expected" error is raised. And I found that the cleanUp()
function in the swfupload.js remove all the js functions including
"getAttribute / removeAttribute / setAttribute" from the object DOM in
IE9.
To fix this issue
In SWFUpload.prototype.cleanUp
Change:
if (typeof (movieElement[key]) === "function")
To:
if (typeof (movieElement[key]) === "function" && key[0] <= 'Z') // Remove only Flash functions (starts with capital letters).
Patched version of uploadify is kept at this location
http://www.dariowiz.com/scripts/jquery.uploadify3.1Fixed.js
Regards.

Try using lates jQuery (container is draggable in IE9, and "Object expected" error disapears)
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Make sure you have installed Flash player for IE (it is separate install)
It can be downloaded from here
http://get.adobe.com/flashplayer/otherversions/
But even Unloadify demos is not working in my IE9 (I can click like a minute in Select files button with no result and suddenly with no reason it starts to work and opens select files dialog)

You find the finally solution for this problem here >>> https://groups.google.com/forum/?fromgroups=#!topic/swfupload/57ySk2JoLbE

It appears there is a problem in the sources of uploadify that conflicts with jquery UI in IE 9. Specifically in the swfupload utility. In order to fix it you need to do a little hack which appears to have detailed steps here: http://www.uploadify.com/forum/#/discussion/comment/19212
Sorry I can't validate this without setting up a whole test environment. Not something that can just be put in a JSFiddle. Good luck, let me know if you succeed.

Mysterious "Type Error: non-native scope object" in Firebug

Consider the following HTML:
<!DOCTYPE html>
<html>
<body>
Test page
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//cdn.zopim.com/?pTR0FiicfJ4aMcmuHI9HfVAB4uzKeFIT';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->
<script type="text/javascript" async="">
window.addEventListener('load', function() {
var b = document.getElementsByTagName("body")[0];
var o = document.createElement("object");
o.setAttribute("type", "application/x-shockwave-flash");
var t = b.appendChild(o);
});
</script>
</body>
</html>
jsFiddle here: http://jsfiddle.net/V9jtD/
It contains Zopim widget code, another async script that just adds an "object" tag to DOM. Let the above file be served by a webserver (you can use the jsFiddle: http://fiddle.jshell.net/V9jtD/show/). Open it in MacOSX Firefox 15+ with Firebug activated.
You will see the following error repeated many times:
TypeError: non-native scope object
If the errors donot show up, just refresh the page. And mainly Zopim fails to show up (sometimes appears with incomplete functionality). I could not reproduce this in Firefox/Ubuntu. (It might be reproducible in Firefox/Windows I could not check).
However, in the following cases Zopim loads fine:
Comment out "var t = b.appendChild(o);" (ie. dont append the "object" tag to DOM, or you can just remove second script tag entirely).
Deactivate Firebug.
I essentially want to understand who is causing the error so I can debug it.
Is it Firebug, because deactivating it Zopim works fine? But then removing the second script tag with Firebug enabled does not cause the error.
Is it the second script tag, because removing it Zopim works fine? But then deactivate Firebug and Zopim works fine even with second script tag.
Or is it Zopim itself?
Note that the content in the second script tag is part of function testPlayerVersion() in swfobject.js. I have hit this error when I am trying to add Zopim to a page that already has swfobject.

It would probably be easier to work out if the fiddle wasn't loading minified JS from Zopim, but the offending line (roughly beautified) is:
try {
(0)()
} catch (v) {
s = v.arguments ?
'chrome' : v.stack ?
'firefox' : window.opera && !('stacktrace' in v) ?
'opera' : 'other'
}
Which looks like a hacky way of detecting the browser. I'm not sure why it's causing Firebug to bail, it might be worth raising an issue with them if it's reproducible.

IE 8 - Scripts not always load

It's been a common problem among my team for a while. For aparently no reason, IE8 only loads the scripts sometimes. I'm using asp.net mvc3 and some scripts are loaded through _layout.cshtml (which is like a master page that all my others pages inherits). The other bunch of scripts are loaded only when needed. I must mention that i began to use Head.js to load my scripts. I was actually hoping that it would fix the IE8 scripts load problem.
These problems don't occur on firefox or chrome (which is another motive i'm certain it only happens on IE). And as it seems, if a single script breaks on IE8, this break propagates through other scripts.
I understand this may be a problem too broad to be solved with just the forementioned situation. So what i'd like to know is have you had a problem like this? If yes, what did you do to solve it? I really appreciate some directions, since i have to use IE.
Here is the scripts that are being loaded on _layout.cshtml, in the order of loading:
Head.js;
jquery-1.5.1.min.js;
modernizr-1.7.min.js;
jquery-ui-1.8.11.min.js;
jquery.ui.datepicker-pt-BR.js;
jquery.validate.min.js;
jquery.validate.unobtrusive.min.js;
An these are some of the other scripts that i use on some pages (it's not in their order):
jquery-blockUI.js;
jquery.jqGrid-4.1.2.min.js;
jquery.orbit-1.2.3.min.js;
jquery.jqplot.min.js (and some of it's renderers);
jquery.form.wizard-min.js;
ZeroClipboard.js;
EDIT
As T.J. asked for some piece of code, since it would be to hard to identify the problem with only the name of scripts used, here it is.
Scripts loaded on _layout.cshtml
<head>
<script src="#Url.Content("~/Scripts/head.min.js")" language="javascript" type="text/javascript"></script>
//Lots of css files loaded mostly through document.write
<script type="text/javascript" language="javascript">
// if (head.browser.mozilla || head.browser.webkit || head.browser.opera ||
// (head.browser.ie && (head.browser.version == '9.0'))) {
head.js('#Url.Content("~/Scripts/jquery-1.5.1.min.js")')
.js('#Url.Content("~/Scripts/modernizr-1.7.min.js")')
.js('#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")')
.js('#Url.Content("~/Scripts/jquery.ui.datepicker-pt-BR.js")')
.js('#Url.Content("~/Scripts/jquery.validate.min.js")')
.js('#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")');
if (screen.width == 1024) {
head.js('#Url.Content("~/Scripts/resolucao1024.js")');
} else {
head.js('#Url.Content("~/Scripts/resolucaoMaior1024.js")');
}
</script>
#RenderSection("Header", false)
</head>
Scripts loaded on a charts and graphics page
#section Header{
<script type="text/javascript" language="javascript">
head
.js('#Url.Content("~/Scripts/jquery-blockUI.js")')
.js('#Url.Content("~/Scripts/jqGridMVC/grid.locale-pt-br.js")')
.js('#Url.Content("~/Scripts/jqGridMVC/jquery.jqGrid-4.1.2.min.js")')
.js('#Url.Content("~/Scripts/jquery-ConfigAjax.js")')
.js('#Url.Content("~/Scripts/jqPlot/jquery.jqplot.min.js")')
.js('#Url.Content("~/Scripts/jqPlot/jqplot.highlighter.min.js")')
.js('#Url.Content("~/Scripts/jqPlot/jqplot.dateAxisRenderer.min.js")')
.js('#Url.Content("~/Scripts/jqPlot/jqplot.pieRenderer.min.js")')
.js('#Url.Content("~/Scripts/jqPlot/jqplot.donutRenderer.min.js")')
.js('#Url.Content("~/Scripts/jqPlot/jqplot.cursor.min.js")');
</script>
}
EDIT 2
Oh! i forgot to mention that every time i call some javascript functionality, i use head(function() {}) instead of $(function(){}) (it's recommended on head.js site).
EDIT 3
As Zeta asked, i'm providing a print from IE console (it's from my charts and graphic page).
Since i'm brazilian, it's in portuguese. Simple to understand though: it means 'jqplot' is null or is not an object. Like jqplot was never loaded or had some problem during the loading.

I resolved doing this:
head.js("js/jquery-1.7.1.min.js",
function() {
head.js("js/script.js");
head.js("js/script1.js");
head.js("js/script2.js");
head.js("js/script3.js");
});
Hope it helps

Broad question, so I cant promise this will fix it.
But I think about a year ago I had a problem with IE8 and script tags which sounds just like yours.
I noticed that if the script tag did not have all the added extras:
type="text/javascript"
language="javascript"
and the server did not send
http header-> content type: text/javascript
It did not work.
Give it a check, but thats all I got

Dynamically loaded <script> tag not being used in WebKit browsers

It seems this is a known problem and has been asked several times before here in SO however I do not see anything specific to jQTouch so I thought I would give it a try.
jQT will dynamically load pages when a link is clicked. In this page I would like to include something like
<script>
$.include('javascriptfile.js', function() {alert('do something with results of this file to an already existing div element');};
</script>
The $.include is a jquery plugin I found that mimics the $.load with a few more smarts added to it. Tested to work on FF but not in Chrome or most importantly, Safari.
The alert is never displayed. FireBug never shows the javascript even being loaded. If I put an alert before the $.include I still do not see anything.
I have tried an onclick/ontap event that would then run this code that was included in the head tag, no luck.
Edit: I am using the r148 revision of jQT. This was working prior to moving to this version, i believe.

Did you try to add the javascript file using one of these two methods:
Static Way:
<script type="text/javascript">
function staticLoadScript(url){
document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}
staticLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
</script>
Dynamic way:
<script type="text/javascript">
function dhtmlLoadScript(url){
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function(){
dhtmlLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
}
</script>
After the include you can call a function that does the processing you want (that being processFnInFile()) which result will be passed to modifyDivFn (and modify the div you want.) You could do this in one function, just to illustrate the idea.
Source: Dynamically Loading Javascript Files

Well Geries, I appreciate your help but ultimately the answer required a drastic rethinking of how I was using JQTouch. The solution was to move everything to an onclick event and make all the hrefs link to #. This might be what you were talking about Geries.
In the onclick function I do the logic, preloading, loading of the page through my own GET through jquery, then use the public object jQT.goTo(div, transition). This seems to get around the WebKit bugs or whatever I was running into and this now owrks on FireFox, Chrome, Safari, iPhone, and the lot.
I do run into a few animation issues with JQT but I think these are known issues that I hope Stark and the gang at JQTouch are working on.