First of all this is very similiar to:
Workaround for file input label click (Firefox)
but the provided solution is not working in jQuery 1.9+
The $.browser variable dosn't exist anymore because now we have to do feature detection.
I would very much like to detect the feature that I need but there seems to be no such support in jQuery.
Browser detection is gone, feature detection seems not able to detect what I need, is there a good solution out there?
A Modernizr solution would be appreciated aswell and also plain-vanilla-js solution is accepted
Thanks for your help.
if ( window.mozIndexedDB !== undefined ) {
//do firefox things
}
This will only return true in Firefox, afaik.
Example test:
if ( window.mozIndexedDB !== undefined ) {
alert('You are using Firefox');
}
You can try looking at window.navigator.userAgent but I don't recommend it, a bunch of other browsers identify as Mozilla, see this question for some examples: Why Does “navigator.userAgent” in javaScript returns the String “Mozilla” when tried in a google chrome borwser?
Not the best practice, but why don't you try the jQuery Migrate plugin? It brings back $.browser, aswell some other removed features.
Related
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.
I'm working on a client's site which utilizes a Javascript autocomplete feature in the search form. The website is in Hebrew, but please don't let that scare you away - my issue is in code, not English. :)
Link: -removed by author-
Most of the autocompletion options are in Hebrew but I added "test" so that it will be easy to test in English as well.
Basically this autocomplete script generates a text input box, and when the user types in a letter (onkeyup), a list of common values are offered (e.g. "test").
This works fine in both Chrome and IE, but for some reason Firefox is behaving differently.
When you enter a letter in Firefox, according to the error console:
Error: searchResult1 is not defined
Source File:
Line: 1
Same goes for searchResult0 in the second input field (line ~460 in the source code).
If you look at -removed- the autocomplete script does work in Firefox, so I don't really know what it is I could have changed that broke its functionality.
Thank you for any help with this :)
The problem is onkeyup="searchResult1.style.visibility='visible';...", it should be document.getElementById('searchResult1').style.visibility - you are referring to an element by its ID. It's an old MSIE feature that elements with an ID turn into "global variables" but that's really not something you should use. Other browsers implemented support for this misfeature ("global scope pollution") to stay compatible with MSIE but it is merely a compatibility layer and only kicks in under certain conditions.
Why don't you try using jquery autocomplete plugin rather than writing something on your own. The javascript written is not proper.
Its best to use the jquery autocomplete plugin. I see in you code you are jquery1.5.2
Autocomplete Demo:
http://view.jquery.com/trunk/plugins/autocomplete/demo/
Download and documentation
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
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.
Does anyone know of a DOM inspector javascript library or plugin?
I want to use this code inside a website I am creating, I searched a lot but didn't find what I wanted except this one: http://slayeroffice.com/tools/modi/v2.0/modi_help.html
UPDATE:
Seems that no one understood my question :( I want to find an example or plug-in which let me implement DOM inspector. I don't want a tool to inspect DOMs with; I want to write my own.
I am also looking for the same thing, and in addition to http://slayeroffice.com/tools/modi/v2.0/modi_help.html i found: http://www.selectorgadget.com/ ( https://github.com/iterationlabs/selectorgadget/ )
Also came across this https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector
Unfortunately I haven't found anything based on jQuery. But "Javascript DOM Inspector" seems to be the right keywords to look for this kind of thing.
How about Firebug Lite - it's like Firebug but you insert it into your page and so you can debug your html, css, Javascript and the DOM on most browsers (including non-FF ones)
Aardvark is a firefox extension officially but you can use that as a javascript library, too. The inline demo in the said website is implemented using javascript. digg into the code & you'll find loader.js which is bootstrapping the Aardvark modules.
I found this one:
http://userscripts.org/scripts/review/3006
And this one also is fine:
DOM Mouse-Over Element Selection and Isolation
Which is very simple with few lines of code and give me something good to edit a little and get exactly what i wanted.
Very recently, I needed to develop an application using JavaScript : when any user click on an image of this site, it will send image URL to a specific location. Here is the article that helped me achieve that : AspBoss - Javascript Library for Dom Inspector
And this is the code :
// DOM Inspector
// version 0.1
// 2006-01-25
// Copyright (c) 2006, Onur Mat
//
// --------------------------------------------------------------------
//
// This user script allows you to interact with elements of a web page
// by moving mouse pointer on a web page and clicking on selected elements.
//
// To install for Firefox, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To install for Internet Explorer, you need Turnabout:
// http://www.reifysoft.com/turnabout.php
// See instructions for using Turnabout here:
// http://www.reifysoft.com/turnabout.php
//
// --------------------------------------------------------------------
//
// ==UserScript==
// #name DOM Inspector
// #namespace http://www.dominspector.com/
// #description Inspect DHTML DOM elements interactively
// #include *
// ==/UserScript==
function DIOnMouseOver(evt)
{
element = evt.target; // not IE
// set the border around the element
element.style.borderWidth = '2px';
element.style.borderStyle = 'solid';
element.style.borderColor = '#f00';
}
function DIOnMouseOut(evt)
{
evt.target.style.borderStyle = 'none';
}
function DIOnClick(evt)
{
var selection = evt.target.innerHTML;
alert('Element is: ' + evt.target.toString() + '\n\nSelection is:\n\n' + selection);
return false;
}
document.addEventListener("mouseover", DIOnMouseOver, true);
document.addEventListener("mouseout", DIOnMouseOut, true);
document.addEventListener("click", DIOnClick, true);
Firebug is a good solution for Firefox. You can browse a page's HTML, JavaScript, DOM, network activity, etc. Safari also has fairly good tools built-in (I'm using the Safari 4 beta at present), though I find it's easier to navigate around Firebug.
Yes, there are plenty. For example, Firefox has DOM Inspector, Firebug, and X-Ray. I think Firebug is the best of the three, personally.
Developer Tools on IE8
Try Backbase Debugger Application. It also has an I/O inspector.
I used to use Firebug, and Firefox all the time, now thanks to IE8, which has really cool tool called Developer tools --- that allows to see all the Javascript, CSS and also allows to really cool debugging feature. MICROSOFT is getting there !
A coworker recommended me this one: Web X-Ray Goggles https://secure.toolness.com/webxray/
With valid HTML the following finds the object as expected in all browsers but gets NULL in IE (6 & 7).
$(document).ready(function() {
alert( '$(.rollover):\n' + $('.rollover'));
});
I've tried by switching it to something simpler like $('a') but I always get NULL in IE.
Update:
After running the page through the W3C validator (and ignoring what my Firefox validator plugin was telling me) it appears there are actually quite a lot of validation errors (even with HTML 4 Transitional defined), which I can't easily fix, so my guess is that is the cause of my issues. As trying on a very simple document works as expected in IE.
If you're having $ conflicts there are many way to avoid this as documented here.
It seems that it is AjaxCFC's JavaScript includes that are causing a problem, more specifically the ajaxCFC util.js which seems to define it's own $.
Moving those includes before that of the JQuery lib fixed the above issues I was having.
I think we'd have to see the HTML. I've never had a problem with class selection in jQuery/IE. You should get [object Object] for the jQuery object in the alert. Also, are you using an old version of jQuery?