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?
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?
Share Improve this question edited May 2, 2016 at 18:16 marc_s 756k184 gold badges1.4k silver badges1.5k bronze badges asked Apr 5, 2014 at 5:57 user3500457user3500457 11 gold badge1 silver badge1 bronze badge 3-
Don't use
$downloador$about_us... This is not PHP... It should only bevar downloadandvar about_us– prateekkathal Commented Apr 5, 2014 at 6:01 -
7
@kakashihatake2 - A mon naming convention is
$variablewhen the variable references an element that is a jquery object. For instance,$body = $('body'); $body.css('color', 'red'). – Jack Commented Apr 5, 2014 at 6:07 - 1 Duplicate of only on chrome i got this error: Uncaught TypeError: Illegal constructor – dsgriffin Commented Apr 5, 2014 at 6:21
3 Answers
Reset to default 2JavaScript 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.
I can reproduce the OP's bug and fix it just by changing Document to document:
http://jsfiddle/rn5v7/4/ will work on Firefox but not Chrome.
http://jsfiddle/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
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:
- Solve the conflict of using
$, let it bejQuerywithout any ambiguity
Firstly, you can put this code snippet
var jq = document.createElement('script');
jq.src = "https://code.jquery./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./run-jquery-in-chrome-console/
- Using
.jsfile instead in Chrome, then debug the JavaScript file.
Refer: Chrome DevTools Snippets