We Keep Coding

Javascript on click not working in iOS 14

I know the title is familiar, but the answers weren't !
The answers here :
Button onclick event not working in iOS unless you go away from app and back, then it works
OnClick not Working on Ios11
Safari on iOS 9 does not trigger click event on hidden input file
onclick event doesn't work on iphone
Click events not firing on iOS
How do I use jQuery for click event in iPhone web application
jQuery click events not working in iOS
JavaScript OnClick not working on iOS
Make onclick work on iphone
https://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
didn't work for me, so before marking this question as duplicate, check my code :
THIS IS HTML :
<script>
function showalert() {
alert("I am an alert");
}
</script>
<div id="replace1" >
<br><br><br>
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
<!-- <button value="HI" onclick = "showalert();">-->
<br><br><br>
</div>
THIS IS THE CSS :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,300,300i,4 00,400i,700,700i,900,900i');
* {
font-family: Montserrat;
font-size: 14px;
}
.U3Gxm-butn {
border: 1px solid #E77817;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #E77817;
cursor: pointer;
background:white;
margin:0 auto 10px;
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each */
float: left;
}
.U3Gxm-butn:focus, .U3Gxm-butn:hover {
background: #E77817;
outline: 0;
color: #fff;
}
.actn-disabled{
cursor: not-allowed !important;
background: #dddddd !important;
color: black !important;
pointer-events: none;
}
.actn-selected{
background: #fba250 !important;
color: black !important;
}
#loading
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image
{
position: absolute;
top:30%;
left: 40%;
z-index: 100;
}
td {
word-wrap: break-word;
}
/* Below class use for op position */
.xspace{
position: relative;
top: 20px;
}
.xspace:first-letter{
position: relative;
top: 20px;
text-transform: capitalize;
}
.xspacedown:first-letter{
padding-bottom: 0%;
text-transform: capitalize;
}
.xspaceop{
position: relative;
top: 50px;
style:overflow-x:auto;
}
.xyspace:first-letter {
text-transform: capitalize;
}
#replace1 > .xyspace{
display:inline-block;
}
#replace1 > .xyspace:first-letter{
text-transform: capitalize;
}
.ntfnbkpjob1{
cursor:pointer;
}
I have created separate HTML and CSS files in my xCode project and this is how i am loading my html file in swift :
let url = Bundle.main.url(forResource: "webview", withExtension: "html")
webView.loadFileURL(url!, allowingReadAccessTo: url!)
Have tried everything possible, changed CSS to cursor:pointer, did everything mentioned in these solutions, nothing seems to work.
These solutions might be relating to their problem.
Every problem has different answer !
Can anyone suggest anything that works in this scenario ?

<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
Shouldn't your on click look like this onClick="alert('sometext')" ?
I'm guessing you are talking about this one as button is commented out.

How to make accept button for cookies?

I want to create accept button to allow cookies and close popup dialog
I also want close button if users don't want cookies.
But don't know how.
I used different codes from durgi sites to pair it with my but nothing happens. I do not have much Javascript experience, so I'll ask for help.
I tried different methods, but all were unsuccessful.
Please help me.
function openPopup() {
window.location.hash = 'popup1';
}
window.onload = openPopup;
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
top:120px;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<div id="popup1" class="overlay" >
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
<button class="btn btn-primary btn-lg center-block" > OK. Let's go! </button>
</div>
</div>

From my understanding, I think you are trying to create "Accept Cookie Policy" Popup.
So here is my solution with comment Inline, I have used jQuery for this solution.
// Check if localstorage is present or not in the browser
// If localstorage is not present you can use cookies as well to achieve this
// or you can send a call to the server to manage this
if (window.localStorage) {
// Check if the user is already accepted the cookie policy
if (!localStorage.getItem("userAgreed")) {
jQuery("#popup1").show();
} else {
jQuery("#popup1").hide();
}
}
// Handle Ok button click, and set a localstorage key-value pair the user is accepted the cookie popup
// So that from the next time onwards popup is not visible to returning user
jQuery("#popup1 button").on("click", function(event) {
event.preventDefault();
// Make a server call if you want to handle it in server side here
localStorage.setItem("userAgreed", true);
jQuery("#popup1").hide();
});
// On click of close button
jQuery("#popup1 a.close").on("click", function(event) {
event.preventDefault();
jQuery("#popup1").hide();
});
Let me know if it's helping or not

Closing the modal by clicking anywhere else outside of it

I'd like to close the modal by clicking anywhere else outside of it but don't really know how to put the functionality together. Ideally I'd like to have a pure JS or AngularJS solution. Any help on this matter is greatly appreciated.
Fiddle
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #fff;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>

You can do this in angular by adding click handlers to both the inner modal content and the outer div. In the inner div, you will need to stop event propagation by using $event.stopPropagation, otherwise the outer click handler will be called too. Then, when the outerDiv click handler is called, you can use angular's $location service to close the modal. See the attached plunker:
https://plnkr.co/edit/a3b5fU9G6wuXLLhiyI2D

The way I'd do it would be like this:
$('.wrapper').on('click', function(e) {
var modal = $(this).find('.modal');
if (!modal.is(e.target) && modal.has(e.target).length == 0) {
modal.removeClass('opened');
}
});
By the way it's better to set the visibility property to "hidden" when the modal is closed instead of disabling pointer-events. That way the user won't be able to click it either.

Issues with responsive mobile menu

How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">&#9776</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}

Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">&#9776</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.

IJavaScript not working/linking properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I recently started learning HTML,CSS and Javascript and i am still getting the hang of it.
I want the hidden menu to be shown (menu) when the div class (mainLeft) is clicked. but, my javascript query to hide/show it doesn't work.
HTML Code
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<script type="text/javascript" src="C:\Users\mbashir\Documents\HTML\satmap.js"></script>
<title>SATMAP Home</title>
</head>
<body>
<div id="main">
<h1> XYZ</h1>
</div>
<div id="mainLeft">
<h1> Current Stats </h1>
</div>
<div id="SME">
<h4> my Explorer </h4>
</div>
<div id="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div id="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
<div class="menu">
<div class="icon-close">
<h4> Disappear </h4>
</div>
<ul>
<li>Gain Table</li>
<li> Remember Me</li>
</ul>
</div>
</body>
CSS Code
body {
background-color: white;
}
h1{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
h4{
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
#main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
#SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
background-color:#13b5ea;
}
#DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
background-color:#13b5ea;
}
#ProdMonitor {
display: table;
background-color:#13b5ea;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
}
#mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
cursor: pointer;
}
.menu {
background-color:#13b5ea;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
Javascript Code
var main = function(){
$('#mainLeft').click(function(){
$('.menu').animate({
left:'0px'
},200);
$('body').animate({
left: '285px'
}, 200);
});
};
$(document).ready(main);

Have you verified that your javascript is firing at all? Such as adding console.log('test') or alert('test')? If it is firing, then you can move on to look at other things.
I think your problem might be because you're animating a left value that doesn't mean anything yet because the elements haven't been given a CSS position value that uses it. Try giving the #mainLeft element a position: absolute and see what happens.

You have said the JS file is in the same folder as the page, so you would link it like:
<script src="satmap.js"></script>
Also noted, is in the HTML provided, you did not have JQuery Library included, and since the coding you were using is dependent on JQuery, that would be a problem! :)
You can download the JQuery library from JQuery.com, or link to the CDN host like:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>