Reputation: 1
jQuery code
$(Document).ready(function() {
var $download = $('#navbar li:nth-child(1)');
var $about_us = $('#navbar li:nth-child(2)');
$download.mouseenter(function() {
$download.fadeTo('fast', 0.5);
});
$about_us.mouseenter(function() {
$about_us.fadeTo('fast', 0.5);
});
$('#navbar li').mouseleave(function() {
$('#navbar li').fadeTo('fast',1);
});
});
With this code I am trying to make parts of a list darker when you hover. it works in Firefox but not on chrome, what am I doing wrong?
Upvotes: 0
Views: 15513
Reputation: 9888
Firstly, $(Document)
should be changed to low class $(document)
. Then more facts are below.
For Chrome, do not expect $ is always
jQuery
.
You can put $
into console to check if it returns default ƒ $(selector, [startNode]) { [Command Line API] }
, if yes means $ is not defined for jQuery
.
Luckily that we have below ways to try:
$
, let it be jQuery
without any ambiguityFirstly, you can put this code snippet
var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.3.1.min.js"; /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);
into the Console,
then put $.noConflict
into console, if it not returns undefined
, but returns ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}
, it means $
is not defined for JQuery
now.
Next you can continue to input your regional code, then you will find it works well now.
Refer: https://blog.wplauncher.com/run-jquery-in-chrome-console/
.js
file instead in Chrome, then debug the JavaScript file.Refer: Chrome DevTools Snippets
Upvotes: 1
Reputation: 151264
I can reproduce the OP's bug and fix it just by changing Document
to document
:
http://jsfiddle.net/rn5v7/4/ will work on Firefox but not Chrome.
http://jsfiddle.net/rn5v7/5/ will work on both Firefox and Chrome.
The standard way to use DOM ready handler is, as on jQuery's doc:
$(document).ready(function() { ... })
or the shorthand:
$(function() { ... });
Note that as seen on Chrome, Document
is a constructor function. It is the base class of HTMLDocument
, which is the class for the object document
.
document.__proto__ === HTMLDocument.prototype // => true
HTMLDocument.prototype.__proto__ === Document.prototype // => true
Upvotes: 2
Reputation: 9784
JavaScript is case-sensitive, so you'll need to use document
instead of Document
; they are two separate things in Chrome.
Document
appears to be a constructor for something in Chrome, but I'm not sure about its usage.
Upvotes: 2