fadeToggle is not a function
I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!
javascript jquery twitter-bootstrap navigation
|
show 3 more comments
I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!
javascript jquery twitter-bootstrap navigation
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
With the page fully loaded, if you open your console and typejQuery.fn.fadeToggle
what does it say?
– Taplar
Nov 20 '18 at 15:38
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42
|
show 3 more comments
I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!
javascript jquery twitter-bootstrap navigation
I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li><a href="https://facebook.com">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a></li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><a href="#">About</a>
<ul>
<li><a href="#">About Company</a></li>
<li><a href="#">Designers</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="https://www.google.hr/">Web Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Branding</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!
javascript jquery twitter-bootstrap navigation
javascript jquery twitter-bootstrap navigation
asked Nov 20 '18 at 15:30
Ricardo BuenoRicardo Bueno
11
11
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
With the page fully loaded, if you open your console and typejQuery.fn.fadeToggle
what does it say?
– Taplar
Nov 20 '18 at 15:38
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42
|
show 3 more comments
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
With the page fully loaded, if you open your console and typejQuery.fn.fadeToggle
what does it say?
– Taplar
Nov 20 '18 at 15:38
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
With the page fully loaded, if you open your console and type
jQuery.fn.fadeToggle
what does it say?– Taplar
Nov 20 '18 at 15:38
With the page fully loaded, if you open your console and type
jQuery.fn.fadeToggle
what does it say?– Taplar
Nov 20 '18 at 15:38
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396350%2ffadetoggle-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396350%2ffadetoggle-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What version of Jquery are you using, looking at this question it needs to be above v1.4.4
– George
Nov 20 '18 at 15:32
Hi George, i'm using jquery-3.3.1.min not the slim one. I'll take a look at the question right now.
– Ricardo Bueno
Nov 20 '18 at 15:37
With the page fully loaded, if you open your console and type
jQuery.fn.fadeToggle
what does it say?– Taplar
Nov 20 '18 at 15:38
It returned "ReferenceError: jQuery is not defined", well.. this is weird or i'm making something very stupid. I'm loading jQuery via CDN right before the closing body tag.
– Ricardo Bueno
Nov 20 '18 at 15:42
<script src="code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/…" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
– Ricardo Bueno
Nov 20 '18 at 15:42