I am trying JQuery Mobile for the first time and have not been able to trigger a response to a button being pressed on my iphone 4S which runs iOS 7.1. The click event is triggered in the browser on my computer but not on the device. I can see that this is a common issue and have tried the various proposed solutions but they dont seem to work for me. My code is very simple. The markup is
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="javascript/idtest.js"></script>
</head>
<body>
<div data-role="page">
<div id='login'>
<center>
<a href="#" data-role="button" id='pincodebtn'>Identify</a>
</center>
</div>
</div><!-- /page -->
</body>
</html>
And the javascript, idtest.js, is
$(document).ready(function() {
$('#pincodebtn').css('cursor','pointer');
$(document).on('click','#pincodebtn',function(){
alert('clicked');
})
});
As you can see, I have tried the trick of setting the cursor to pointer. I have also tried catching the 'vclick', 'touchstart', 'touchend' and 'tap' events. None of which trigger the alert on the iOS device. Help would be appreciated.
Did you try this?
$('#pincodebtn').on('click',function(){
alert('clicked');
});
Try the below code
$('#pincodebtn').on('click touchstart',function(){
alert('clicked');
});
Related
I am struggling to use toast message on my website which may be visible on the click of a button. here is the code below.
<html>
<head>
<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar / Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
Even adding event listener calling in function script did not work for me.
I am using the below library which suggested me to use external scripts and style as have been used in the code above.
https://codeseven.github.io/toastr/
I am a novice, please help me out with this.
Also, if you can help me out figuring out how can I directly get it done on WordPress, it would be highly appreciable.
Try This code... There are some small mistakes.. I fixed... Check this..
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
I have the following code, and it seems clear that JQuery is working, but some JQuery Mobile events are not firing at all:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Mobile Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.custom.complete.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.custom.complete.theme.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.custom.complete.structure.min.css"/>
<script>
$(function(){
$(document).on("touchstart", function(e){
$('#touchstart').html("touchstart");
});
$(document).on("touchend", function(e){
$('#touchend').html("touchend");
});
$(document).on("touchmove", function(e){
$('#touchmove').html("touchmove");
});
$(document).on("touchcancel", function(e){
$('#touchcancel').html("touchcancel");
});
$(document).on("tap", function(e){
$('#tap').html("tap");
});
$(document).on("taphold", function(e){
$('#taphold').html("taphold");
});
$(document).on("swipe", function(e){
$('#swipe').html("swipe");
});
});
</script>
<style>
</style>
</head>
<body>
<div id="touchstart">-</div>
<div id="touchend">-</div>
<div id="touchmove">-</div>
<div id="touchcancel">-</div>
<div id="tap">-</div>
<div id="taphold">-</div>
<div id="swipe">-</div>
</body>
</html>
I'm trying it out on Chrome on an Android. Of the above events, these don't work: tap, taphold and swipe. I have triple checked the file URLs.
The versions of JQuery above: JQuery: compressed, production 3.1.1, and the latest JQuery Mobile: 1.4.5, custom with all options, minified.
Annoyingly it works as expected when I replace the link and script tags with a (random) earlier version, hosted by JQuery:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
And it doesn't work when I use the latest JQuery-hosted versions:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
But I need to host the files myself and I would like to have the latest versions. What am I doing wrong? Are there differences in the API? Or is it a JQuery bug?
To expand on Omar's comment above...
jQuery Mobile isn't compatible right now with the latest version of jQuery. If you look at the jquerymobile homepage, you will see under the download buttons (top-right) what versions of jQuery you can use. Currently for jQM v.1.4.5 you need:
jQuery 1.8 - 1.11 / 2.1
I am trying to animate a picture when the mouse cursor hovers over it. I am using jQuery to accomplish this. I cannot figure out why it does not work for the current state of my code. Apologies in advance, I just started my endeavour into web development.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
jQuery
$(document).mousemove(function() {
if($('#me-pic').is(':hover')
{
alert("Hello");
}
});
UPDATE
The source of my problem came from setting the z-index of my image div to -1. Changing this solved my problem, as well as changing the script.
Well, I'm not sure if your method should work or not, but there's a better way to handle this, designed for the original purpose:
$(document).ready(function() {
$('#me-pic').hover(function() {
alert("Hello");
});
});
With jQuery you can attach the hover event directly onto the selector, try this:
$(document).ready(function() {
$('#me-pic').hover(function(){
alert("Hello");
})
});
The solution is to use hover jquery method.
$('#me-pic').hover(function(){
alert("Hello");
})
View reference here.
Further more,I recommend you remove $(document).mousemove() event.In this situation, it is inefficient method.
I am running XAMPP on a Windows box. Below is my test file:
<html>
<head>
<title>very nice file</title>
</head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<a class="expander" href="#">click me</a>
<div class="content">
I WANT TO HIDE THISSSS.
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://raw.githubusercontent.com/redhotsly/simple-expand/master/src/simple-expand.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.expander').simpleexpand();
});
</script>
When I surf to that file in Internet Explorer, I see 'click me' and 'I WANT TO HIDE THISSSS'. When I surf to it in other browsers, I see 'click me', and clicking it will un-hide the 'I WANT TO HIDE THISSSS' text.
Searched all night and still have nothing! Any thoughts? Thanks!
Do you really need that expander? If you are just to hide/show a content. You can create one with few lines of code since you are using jquery
You can try this simple fiddle here https://jsfiddle.net/yzdthzhL/
you can play the code you want.
and by the way. I'm not sure if this is helpful or not but. It would nice to add your script inside your html document.
<html>
<head>
<script src="somelibrarieshere"></script>
</head>
<body>
<script src="somelibrarieshere"></script>
</body>
</html>
and not outside html block. It's better that way. :) Have a great day pal.
<body onload="javascript function"> is working well on desktop browser, but is not working on iPhone. My iPhone seems like it can read external CSS files and JS files, since when I click button from page, it fires JS functions. But oddly, only onload event is not working. I am so clueless now. Can anybody tell me why can't I fire onload event on iPhone? Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 연습</title>
<meta name="viewport" content="width=480, user-scalable=1"/>
<link rel="stylesheet" href="../styles/test1.css" />
<script type="text/javascript" src="../scripts/fbsdk.js"></script>
<script type="text/javascript" src="../scripts/initcss.js"></script>
<script>
//document.addEventListener('DOMContentLoaded', checkLoginCase, false);
</script>
</head>
<body onload="checkLoginCase()">
<div id="wrap">
<header id="top">
<img src="../fbimg/logo.png" alt="상단이미지" title="상단이미지">
</header>
</div>
<button onclick="checkLoginCase()"> check fxn1</button>
<button onclick="checkAlert()"> check fxn2</button>
</body>
</html>
It should be working, but try to avoid inline JavaScripts.
Try this:
window.onload = (function(){
checkLoginCase();
});
//-or-
window.onload = checkLoginCase;