javascript toggleclass not working in chrome - javascript

Below script was working fine until yesterday 9/4/2019
I found in many search result toggleClass isn't functioning properly after certain version of chrome.
Would anyone have any suggestion on how it should be changed?
I've tried related findings but it didn't work
$(".special_list > li").unbind("mouseover")
.unbind("mouseout")
.bind("mouseover", function() {
$(this).find(".ov_layer").toggleClass("on");
}).bind("mouseout", function() {
$(this).find(".ov_layer").toggleClass("on");
});
toggleClass should bring up intended CSS page

Try this:
$(".special_list > li").unbind("mouseover")
.unbind("mouseout")
.bind("mouseover", function() {
$(this).find(".ov_layer").addClass("on");
}).bind("mouseout", function() {
$(this).find(".ov_layer").removeClass("on");
});

Related

onClick event in jQuery mobile do not work

I am new to jQuery and have made a page with some buttons i want to do some actions when they are clicked.
I have made a jsFiddle with my code.
When I execute the code on my laptop with chrome, it works fine. But when I execute it from my mobile phone (also with chrome) it do not activate the function.
I have tried to google for hours to find a solution and have tried something like:
$(document).on('pagebeforeshow', '#front', function(){
$(document).on('click', '#ssStart', function(){
alert('Alerted!');
});
});
but I cannot get it to work.
Can anyone please help me?
Through a mobile browser, a tap is registered differently than a click so for your buttons you have to change their pointers to cursors through CSS
#start, #prev, #next{
cursor: pointer;
}
I have changed your code just a little bit in this:
https://jsfiddle.net/1uuduxtL/
$(function() {
$("#start").click(function() {
alert("start");
});
$("#prev").click(function() {
alert("prev");
});
$("#next").click(function() {
alert("next");
});
})();

how can you change remove a class on one li and move it to another

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL
This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});
Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle
jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle
I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.

Jquery Mobile on() function does not work as a replace to my live function

Its probabaly a very old problem I am trying to replace a pop up which is written in jquery mobile 1.0.1 , and jquery 1.6.4. I am currently trying to use jquery mobile 1.3.2 and jquery 1.9.1.
The piece of code I am struggling with changing is as follows
$("select[id='action_menu']").live("change",actionHandler);
to this
$(document).on('click', "(select[id='action_menu'])", actionHandler );
or if anyone has a better suggestion also the look and feel of the pop has changed a lot from the older version.
link to Fiddle with all the js and css files
http://jsfiddle.net/hgafoor/85qy3/
You need to fix your quotes:
$(document).on('click', "(select[id='action_menu'])", actionHandler );
This is how it worked for me, fairly clean and simple credits to Omar for being such a great help.
$("select").on("change", function () {
if ($(this).val() == 'home') {
window.location.href = 'google.com';
} else {
window.location.href = 'mail.google.com';
}
});

document.ready() function not executed, works in dev console

I'm trying to simulate a click in a tabbed div when the page loads.
To do this I use:
$(document).ready(function() {
$("#tab_inbox").click();
});
However, this doesn't seem to work, but when I enter this in the dev console on Google chrome, it does work..
$("#tab_inbox").click();
To show the tabs, I use this code:
$("#tab_inbox").click(function() {
$("#othertab").hide();
$("#tab_inbox").show();
});
Anybody knows what's wrong?
Try this:
$(document).ready(function() {
setTimeout(function () {
$("#tab_inbox").trigger('click'); //do work here
}, 2500);
});
I read in your comment that you're using show/hide techniques and I assume you need the click for an initial display option? If so, hide (or show) your element(s) specifically in the code rather than saying click to hide/show. So
$(document).ready(function() {
$("#tab_inbox").hide();
}
Or try core JavaScript and use
window.onload = function() {
// code here
}
window.onload waits until everything is loaded on your page, while jQuery's .ready() may fire before images and other media are loaded.
you can try making your own function with pure JS:
document.getElementById('triggerElement').addEventListener('click', funtction(e) {
document.getElementById('hideElement').style.display = 'none';
document.getElementById('showElement').style.display = 'block';
}, false);

Mouseenter not working in chrome with YUI

YAHOO.util.Event.on("divName", "mouseenter", function (e) { }
This code is working in all browsers except chrome. Is there any issue with YUI 2.x for chrome.
As an alternative, it worked in all browsers when I used the following code.
document.getElementById("divName").onmouseover = function() {
// code to run when the user hovers over the div
};

Categories

Resources