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");
});
})();
Related
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");
});
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.
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
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);
I've got an overlay set over an image that I'd like to act as previous and next controls. The code below worked fine until I implemented the History.js plugin.. now things are a little funky and I'm not sure why. Chrome's console shows no errors, but the image isn't toggling appropriately.
Thanks for your help.
Test site: http://brantley.dhut.ch/
JavaScript:
$("#ol").click(function(e) {
e.preventDefault();
$('a.prev').click();
});
$("#or").click(function(e) {
e.preventDefault();
$('a.next').click();
});
Could try this:
$("#ol").click(function(e) {
e.preventDefault();
$('a.prev').click();
return false; //added
});
$("#or").click(function(e) {
e.preventDefault();
$('a.next').click();
return false; //added
});
Also, check in Firefox with Firebug console if you get any Javascript errors on page load, might be something not related causing your code to not work correctly