jQuery misbehaving in Safari - javascript

I'm having a problem where certain bit of code is working perfectly across all browsers until I come to Safari where it's giving me issues. I inherited this code, and I'm not a jQuery expert so needless to say I'm a bit baffled:
var xt_begin=$('#begin')[0];
xt_begin.currentTime = 0;
xt_begin.play();
"#begin" is an audio element that was set in the HTML that's using this code and the .play() function is in a jQuery plugin that's being used (Link to plugin).
In all browsers except for Safari, play is being defined as if xt_begin were an object of that timer class. In safari, however, it remains undefined and the code stops working. I have no idea how this happens or how to fix it. I can post more code if need be, any help would be appreciated.
**Update
Upon further investigation it turns out it is a DOM element, and I'm a bit thick. However, Safari seems to have a problem recognizing audio elements for some reason. It's identifying it as an "object HTMLelement" whereas Firefox shows it as "object HTMLAudioElement". I'm still stumped on this one.
**SOLVED
Apparently Safari needs quicktime installed on your desktop for it to use audio elements. That's gonna make this app I'm fixing completely useless, but at least I know now. Thanks for the help folks.

Really just a comment. The statement:
var xt_begin = $('#begin')[0];
is effectively the same as:
var xt_begin = document.getElementById('begin');
so xt_begin is either a DOM element or undefined (jQuery) or null (plain JS). Which is it?
In any case, you should probably follow with:
if (xt_begin) {
/* do stuff with xt_begin */
}
to avoid errors.

Try:
var xt_begin = document.getElementById('begin');
Instead of the jQuery line. That works across all browsers and will at least tell you if you have a jQuery problem or a Safari/web page problem.

Related

Hammer JS v2.0.4 not recognizing 'panstart' or 'panmove' in Chrome 37.0 only

I wanted to learn Hammer JS by building a simple program to drag an element around the screen, pretty much just like the same on the Hammer homepage.
I used the code posted on the Hammer github page, which seems to be the same code used on the homepage. I was testing the work in Chrome (37.0 / OSX). After working with it for a while and being unable to get the element to move, I opened the same page in Safari and FF. It worked perfectly in both of those browsers.
To pare things down, I added just the required to code to see an event trigger:
var mover = document.getElementById("mover");
var mc = new Hammer.Manager(mover);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.on("panstart panmove", function(ev) {
console.log(ev);
});
Nothing gets logged in Chrome, but I get proper logging as expected in Safari and FF. I extended the event listener to include 'pan, panend, pancancel, panleft, panright, panup, pandown'. These events WOULD log in Chrome, so it seems like only panstart and panmove were being ignored.
So this code will run on the hammer.js page in Chrome, so clearly Chrome does see the panstart and panmove events in that browser, it's just not happening in my code. Which means somehow I am missing something, despite copying the code over from their site. I checked we were on the same Hammer version, but I am not sure sure what else from here I need to check.
Has anyone else encountered and solved this problem? Or perhaps knows what I am doing wrong to create this issue?
Thanks.
In the Hammer site say clearly "for better performance on slower devices your should try to keep you callbacks as simple as possible." I think that's the same with Browsers!
Maybe your problem is
var mover = document.getElementById("#mover");
Why do you type "#mover" instead of "mover"? The "#" sign it's for JQuery and you are using plain javascript. It confuses me that in some browsers this works, so I imagine your ElementID start in fact with the "#"...
Let me know if it helped, please!

.text update issue in IE

Having a bit of an issue in IE (aren't we all).
I've tracked down an problem I'm having to a recursive script that updates a tweets timestamp.
The script works fine, discovering all the date/time stamps to be updated, converts them fine but when it comes to updating the 'time' div it fails. IE doesn't have an issue with $('#id').text('value') but I'm obviously doing somehthing wrong.
Any ideas?
function parseTwitterDate() {
var timeToAdjust
$('a[data-scribe="element:full_timestamp"]').each(function() {
timeToAdjust = $(this).find('time')
var b = timeToAdjust.attr('datetime').split(/[-t:+]/ig);
//funky stuff here to generate strTime
timeToAdjust.text(strTime)
});
}
This works fine in every other browser however in at least IE8 (and 6 but not worried about that) it gets to timeToAdjust.text(strTime) and fails.
Note, doesn't have an issue grabbing the 'datetime' attribute timeToAdjust.attr('datetime').
Have tried .html() and $(this).find('time').text(strTime)
Many thanks for taking a look hopfully someone can point me in the right direction.
Justin
IE8 and earlier require special steps to ensure that they properly understand that the new HTML5 element types are actually elements. There are tiny scripts out there (like this one) which do that work for you.
Without doing that work, lots of aspects of those elements won't work even as just normal elements in IE8 and earlier.
This JSBin of your code (jsFiddle doesn't work with IE8) fails, but this one with a shim works.

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

JavaScript code in iframes in IE9 not working

I've a very complete site in ASP.NET which uses iframes. I'm working to change an old control we'd been using to show dialogs to use jQuery UI dialogs. I'm also making sure everything works well in IE9.
The fact is: the script I've in the pages shown in iframes is not working in IE9. Why? Because Object, Array and String are undefined. There may be some others issues, I've seen only this ones.
There is no chance (because a lot of reasons) to stop using iframes on some dialogs. And I'd rather not to use the meta tag to force IE8 Compatibility. Does anyone know any way to fix this ugly bug in IE9?
jQuery code for the iframe in a plugin I've made to config jQuery UI dialog:
options.content = $("<iframe>")
.attr("src", options.intSrcIframe)
.attr("frameborder", 0)
.attr("scrolling", options.intIframeScrolling)
.css("background-color", options.intBgColorIframe)
.attr("height", "100%")
.attr("width", "100%");
_this.html(options.content);
Note: here there is some documentation from IE9 that may help to understand. Thanks to #Ben Amada for sharing it.
After almost a week of going crazy day after day I found it out.
The problem with IE9 is no specifically with the javascript code in the iframes. Not even with the javascript in iframes added by javascript or any library (I have lots of js libraries and plugins that could be screwing IE9).
The problem is when you move the iframe or one ancestor through the DOM. IE9 will excecute the code in the page loaded in the iframe as many times as moves you make. Each time (but the last one) will have Object, String, Array and others undefined (and other bugs too).
Example:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("body");
$("#myIframe").appendTo("form:eq(0)");
The javascript code in "www.example.com" will be executed once with the error described above and then once with no errors.
With the following code the code will be excecuted just once and correctly:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("form:eq(0)");
I hope this helps someone to avoid this pain in the ass,
Diego
There is a similar way of achieving this using an existing iframe if you aren't creating a new element.
$(function () {
var iframeSrc = $("#iframeid").attr("src"); // capture target URI
$("#iframeid").attr("src", "about:blank"); // delay loading until we reposition in the DOM
$("#iframeid").appendTo("#newparent").attr("src", iframeSrc); // reposition, load iframe by setting src
});
IE9 or jquery framework needs to fix this issue.
I'm having a similar issue, however the iframe is added to the page rather than removed from it. It still appears to have the same problems.

IE8 Crash on getStyle background-position

I've found a strange bug in Internet Explorer 8. Maybe someone can help me move around it.
When I try to grab the background position of an element, using background-position-x all versions of Internet Explorer work as excepted except for IE8 that crashes.
When I run el.getStyle('background-position') all browsers give me the correct values except from IE (6, 7 and 8) that return undefined.
I therefore use el.getStyle('background-position-x') for all IE versions.
IE8, however, crashes on the above code.
Anyone had similar problems?
Thanks for the help everyone. This really is a bug and works only on the following scenario.
css must be loaded on an external stylesheet
element has no inline styling
The way to fix it, even tough dirty, is to add inline styling to the element. Makes IE8 happy and all other browsers work.
I did not test but, according to this ticket, FF2 also suffers from the same behavior.
Side notes:
#marcgg - I was going to downvote your answer as it really is not helpful (and bound to start a flame war) but, all truth said, jQuery does not manifest this problem. Even though, as you probably already knew, it is NOT an option! ;)
#Fabien - IE does support background-position-x and lacks support for background-position the W3C approved construction.
Why not use jquery's css function that works fine crossbrowser ?
Try using:
el.getStyle('backgroundPositionX')
and
el.getStyle('backgroundPositionX')
yes, older thread, but figured I'd post another solution that I bumped into # mootools lighthouse....
if (Browser.Engine.trident){
var xy = el.getStyle('background-position-x')+" "+el.getStyle('background-position-y');
} else {
var xy = el.getStyle("backgroundPosition");
}
works well for me so far.

Categories

Resources