Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}
It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc
Related
I looked at other threads, and their mistakes had to do with typos, I'm not sure where I'm going wrong.
I don't see the scroll button at all. It works when I call the function showScroll() from the body of my html using <body onscroll="showScrol()"> but that doesn't work in IE so I'm trying to use this function but it's not working:
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll());
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
});
$(window).scroll(showScroll()); means you're executing the function instantly and the return value is being passed into the scroll event.
Instead make it $(window).scroll(showScroll); so it's the function that is passed in.
I created an example for you to illustrate. I guessed the html a bit but you get the point. Start scrolling the below example and see the div appear and disappear.
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll); // <-- this was changed
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
const button = document.querySelector('button'); // <-- added this for completeness
button.addEventListener('click', scrollToTop);
});
main {
height: 600px;
}
#top-btn {
position: fixed;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<button id="top-btn">Show me</button>
</main>
I'm trying to disable the mouse over highlight in the statues bar. I have written this piece of JS code. It work fine. But the problem is with Bootstrap 3 Modals they are broken and not working how should i modify the code ? any ideas ?
$(document).ready(function () {
setTimeout(function () {
$('a[href]').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.location.href = href;
}
});
});
}, 500);
});
Thanks you,
Add this to your CSS:
a[href] {
cursor: auto !important;
}
Please see https://jsfiddle.net/cot33dxa/
setInterval(function() {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
}, 0);
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
#one {
width: 200px;
height: 200px;
background-color: yellow;
}
#two {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?
I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).
JS fiddle for that: https://jsfiddle.net/q8dfLc6s/
In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.
The problem with your fiddle is that your second check is outside of your interval function. Try this:
setInterval(function(){
if($("#one").is(":hover")) {
$("#one").css("background-color","red");
}
else {
$("#one").css("background-color","");
}
if($("#two").is(":hover")) {
$("#two").css("background-color","blue");
}
else {
$("#two").css("background-color","");
}
},0);
The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore
Change to
setInterval(function () {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
}, 0);
I have no idea why you need this and don't just use hover events or hover css
DEMO
Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.
This behavior should generally be avoided and instead replaced by an actual event.
in jQuery this would look like:
$('#element').on( 'hover', function (this, event) {
$element = this;
/*handle event*/
});
More here: https://api.jquery.com/on/
Edit: The code you are running would be best done in CSS using the :hover selector as such:
#element {
background-color: blue
}
#element:hover {
background-color: red
}
Instead of moving your code inside setInterval:
the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.
However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:
$(function() {
$("#two").hover(function() {
$("#two").css("background-color","blue");
}, function() {
$("#two").css("background-color","");
});
});
jsfiddle
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
I have a little problem with this jquery code:
If I call the openMenu function, directly, it works, but inside the if it does not.
$(document).ready(function() {
function checkMenu() {
if($(this).find('ul').css('display') == 'none') {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(this).find('ul').css({display: "block"});
}
function closeMenu() {
$(this).find('ul').css({display: "none"});
}
$('ul li:has(ul)').click(checkMenu);
});
You could make it easy on yourself and use toggle()
$('ul li:has(ul)').click(function(){
$(this).find('ul').toggle();
});
http://api.jquery.com/toggle/
why don't you use .toggle() ? such as:
$(this).find('ul').toggle();
Also you can set the toggle speed either using slow, normal, fast:
$(this).find('ul').toggle('fast');
openMenu doesn't know what "this" is referring to. This should work...
$(document).ready(function() {
function checkMenu() {
var me = $(this);
if(me.find('ul').css('display') == 'none') {
openMenu(me);
} else {
closeMenu(me);
}
}
function openMenu(me) {
//this isn't defined..
me.find('ul').css({
display: "block"
});
}
function closeMenu(me) {
me.find('ul').css({
display: "none"
});
}
$('ul li:has(ul)').click(checkMenu);
});
But the others are right. The toggle function would work really well for something like this.