Develop Reference

JQuery selector works perfect, except with Safari

I want to fetch an URL-Attribute from a div and my code works perfectly find, except on Safari, where this line:
var url = $('.image').css('background-image').split('url("')[1].split('")')[0];
throws an Error, because the .split-function cannot be executed on an undefined object. Can somebody explain me why Safari does not like this code?

So, I figured it out. When you call $('.image').css('background-color') on a browser that is not Safari, you get the following string:
url("http://www.image.com/image1.jpg")
When you call $('.image').css('background-color') using Safari, the following string is returned:
url(http://www.image.com/image1.jpg)

Cross Browser Flash Detection in Javascript - chrome on Android

I've tried out the solutions proposed here:
Cross Browser Flash Detection in Javascript
but they do not seem to work in Chrome v29.0.1547 on Android v4.1.2
I'm using the code in Drupal, hence I had to escape the ' , but I do not think there is an issue with that, however here is the complete code that I've tried:
$onloadjssndsetup3 = 'jQuery(document).ready(function($){
var isFlashExists = swfobject.getFlashPlayerVersion().major !== 0 ? true : false ;
if (isFlashExists == false) {
$("#main").before("aa");};
});
';
drupal_add_js($onloadjssndsetup3, 'inline');
This code adds the "aa" to the page.
I've also tried this other code:
$onloadjssndsetup3 = 'jQuery(document).ready(function($){
var isFlashExists = swfobject.hasFlashPlayerVersion(\'1\') ? true : false ;
if (isFlashExists) {
$("#main").before("aa");};
});
';
drupal_add_js($onloadjssndsetup3, 'inline');
but it doesn't work either, the "aa" is not added in this case.
the funny part is that it's an Samsung Galaxy SIII the smart phone that I'm trying on, and flash is working on it with no prolem, it's just that I can't make the swfobject report it properly, it reports that flash is not installed.
Am I doing something wrong?
On Win8 on IE , FF it detects it properly.

Most probably there is no solution to this issue, people answered on the previous thread, but obviously it doesn't work on all versions of Android, or maybe it's just the Android version v4.1.2 that is a bit wired...

JavaScript ActiveXObject

I have a queastion about ActiveXObject in javascript. I have tryed this code in Mozila FireFox 6.0.2
var AXobj = new ActiveXObject("WScript.Shell");
AXobj.SendKeys(key);
But the error console says that ActiveXObject is undefined. After that, I have tryed this:
var AXobj = new DOMParser("WScript.Shell");
AXobj.SendKeys(key);
But then, the error console says:
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///C:/Documents%20and%20Settings/Guest/Desktop/stuff/html/GML%20to%20JS.html Line: 335"]
By the way, i don't want to use ActiveXObject only for SendKeys. I need it for more stuff (like writing in file... ) AND, the reason i use FireFox instead of IE is that FireFox supports HTML5.

ActiveX is a proprietary technology only supported by Microsoft...
It will only work in IE (thank goodness).
It also has some serious security concerns which is a big reason it was never adopted by other browser providers.

For this you can check if it is IE then do this otherwise
do that.
Like:
Function exampleFunction()
{
if ($.browser.msie) { /* IE */
//Your code
else {
//Your code
}
}
just a suggestion.

scrollBy doesn't work in Firefox and Opera

This scrollBy function works in Internet Explorer, but ignores by Firefox and Opera. Can anyone help to solve this problem?
function scrollLeft(s){
document.frames['my_iframe'].scrollBy(-s,0);
window.frames['my_iframe'].scrollBy(-s,0);
}
function scrollRight(s){
document.frames['my_iframe'].scrollBy(s,0);
window.frames['my_iframe'].scrollBy(s,0);
}
Here is an example that works in Internet Explorer browser, but doesn't work in Firefox and Opera: http://igproject.ru/iframe-scrolling/index.htm

In Firefox, etc. you need to use scrollTo() instead of scrollBy().
See: http://jsfiddle.net/4CkML/
Example:
window.scrollTo(50,50);
You cannot use scrollTo/By if the domains don't match. You can see here that a javascript error is produced:
http://jsfiddle.net/3CbZc/
Permission denied to access property 'scrollTo'
Edit - Updating answer to incorporate answer from long comment chain:
var oIF = document.getElementById('my_iframe').contentWindow; oIF.scrollBy(s, 0);

What is the correct way to detect Opera using jQuery?

Amazon.com recently updated their javascript, and it's causing problems with some Opera browsers.
Their browser detection code looks like so, but it's faulty:
function sitbReaderIsCompatibleBrowser() {
if (typeof(jQuery) == 'undefined') {
return false;
} else {
var version = jQuery.browser.version || "0";
var splitVersion = version.split('.');
return (
(jQuery.browser.msie && splitVersion[0] >= 6) // IE 6 and higher
|| (jQuery.browser.mozilla && (
(splitVersion[0] == 1 && splitVersion[1] >= 8) // Firefox 2 and higher
|| (splitVersion[0] >= 2)
))
|| (jQuery.browser.safari && splitVersion[0] >= 500) // Safari 5 and higher
|| (jQuery.browser.opera && splitVersion[0] >= 9) // Opera 5 and higher
);
}
}
Nothing obviously wrong jumps out at me with this code, but I've never used jQuery before so I don't know.
Even though this code looks like it's attempting to let Opera users through, when I visit the page with Opera 9.64 I get an "unsupported browser" message. If I change Opera's settings to report itself as Firefox, the page works perfectly! With that in mind, I'm pretty sure it's a problem with the script and not the browser.
Any jQuery experts have a suggestion?
You can replicate the behavior by visiting any book on Amazon and clicking the "look inside this book" link.

Prior to jQuery 1.3, you could use jQuery.browser:
if( $.browser.opera ){
alert( "You're using Opera version "+$.browser.version+"!" );
}
From version 1.3, you should use jQuery.support instead.
Main reason for this is that should should avoid checking for browsers, as features may change from version to version, making your code obsolete in no time.
You should always try to use feature detection instead. This will allow you to see if current browser supports the feature you're trying to use, regardless the browser brand, version, etc.

There is a special window.opera object which is present in all Opera 5+ browsers. So something as simple as:
if (window.opera && window.opera.buildNumber) {
// we are in Opera
}
would be enough.

I check for Opera like this:
if (/Opera/.test (navigator.userAgent)) // do something
Why would you want jQuery?

It is much better to detect javascript capabilities rather than browser userAgent.
ie DOM, XmlHttpRequest, eventing model (event.target vs event.srcElement), ActiveX, Java etc
By focusing on the API functions that you will require, rather than a target browser you will create a more robust set of scripts, and inevitably less special casing.
This link here at opera will probably tell you more

A very simple way from Opera themselves:
if (window.opera) {
//this browser is Opera
}
Source: http://my.opera.com/community/openweb/idopera/

The main reason why Amazon fails on Opera is because the send different code from the server side already... If you visit the same page with Firefox and then save that page and reopen it in Opera it works fine...
But they promised to fix that sometime in January...

I think this way is the best
if ( window.opera.version() == 12) {
}
This example check if opera version is 12. Very useful when I have problems with font-face in Opera.

I don't know for sure ( i never really check for opera anyway) but if the built-in jQuery functionality doesn't detect opera, may be a bug with the jQuery which needs to be fixed. I would suspect if that's the case, it should get resolved fairly quickly.

In current HTML5 times, you can also check for browser features instead often.
if (!window.FormData) { alert("xmlhttprequest L2 FormData interface not available"); }