I have some Bootstrap-based HTML pages with some javascript and internal CSS, served in Flask, using Jinjja templates. It works perfectly fine on Windows and Android, using Chrome. But when I try to click certain buttons while on an iPhone (Chrome) or on Safari, they don't work. There's no error message in Chrome either.
Here's a sample of the button I used:
<div class="container mt-4">
<form action="/skill" method="get">
<div class="btn-group-vertical mt-10" style="width:100%">
<button id="Health" onClick="selection(this.id)" type="button" class="btn btn-secondary mb-3" style="background-color: #4a8bae;white-space: normal;">
<h4 class="display-5 pt-2">Health</h4>
<p class="mb-2 font-weight-normal">The centre of human happiness and well-being.</p>
</button>
</div>
</form>
</div>
After clicking the button, it's supposed to sessionstorage the id chosen.
Please advise on what I can do to fix this! Let me know if I should post any other information. Thank you!
I had the same situation, but at least in my case I just turned of the safari's pop-up blocker (at the iphone settings) and everything works fine...
Related
I am writing a simple browser extension to my web app.
I have a list with cards <ul id="cards-in-progress"> on my website and I want to use the extension to add an attribute to that ul tag hiding or showing it.
On my extension I have the following buttons on the popup.html:
<h3 class="lead">Hide Cards</h3>
<div class="input-group mb-3 has-success">
<div class="input-group-append">
<button id="hideAllCards" class="btn btn-success" type="button" data-toggle="popover" data-placement="top" data-content="Hide all cards">
Hide
</button>
</div>
</div>
</p>
<p>
<h3 class="lead">Show Cards</h3>
<div class="input-group mb-3 has-success">
<div class="input-group-append">
<button id="showAllCardsButton" class="btn btn-success" type="button" data-toggle="popover" data-placement="top" data-content="Show all cards">
Show
</button>
</div>
</div>
</p>
On my extension, I have the popup.js:
$("#hideAllCards").click(function() {
$('#cards-in-progress').attr("style", "display: none !important");
});
$("#showAllCardsButton").click(function() {
$('#cards-in-progress').attr("style", "display: block !important");
});
PS.: I am using it on firefox
PS.: I have a JS folder with jquery.js and popup.js
What am I actually doing wrong?
UPDATE
When I try to use alert(), usually the alert box should appear on the website and not on my HTML extension. What is happening at the moment is that alert() is being executed on my extension.
It means that the code I am trying to execute is not being sent to my website but it remains on my extension. I can't figure why.
To manipulate the tab I had to change my function as it follows:
const hideCards = `#cards-in-progress {
display: none;
}`;
$("#hideAllCards").on('click',function() { browser.tabs.insertCSS({code: hideCards}) });
$("#showAllCardsButton").on('click',function() { browser.tabs.removeCSS({code: hideCards}) });
I'm trying to use Affectiva's Web SDK (Javascript) to detect emotions via a Camera Stream. I tried using it in JS Fiddle. It works fine but when I got the code from JSFiddle and used in on my Java Web Project in Eclipse, the Web Camera prompt isn't showing up. Nor can it access the Web Cam. Here's the code:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
<div class="col-md-4">
<div style="height:25em;">
<strong>EMOTION TRACKING RESULTS</strong>
<div id="results" style="word-wrap:break-word;"></div>
</div>
<div>
<strong>DETECTOR LOG MSGS</strong>
</div>
<div id="logs"></div>
</div>
</div>
<div>
<button id="start" onclick="onStart()">Start</button>
<button id="stop" onclick="onStop()">Stop</button>
<button id="reset" onclick="onReset()">Reset</button>
<h3>Affectiva JS SDK CameraDetector to track different emotions.</h3>
<p>
<strong>Instructions</strong>
</br>
Press the start button to start the detector.
<br/> When a face is detected, the probabilities of the different emotions are written to the DOM.
<br/> Press the stop button to end the detector.
</p>
</div>
</div>
</body>
The Javascript file is similar to the contents in https://jsfiddle.net/affectiva/opyh5e8d/show/
I copied the code but the camera doesn't work on my end when I used it on Eclipse. I'm using Chrome as my browser.
I'm not using any JS code, but the console gives me the error
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is my html code
<div id="navbar">
<div class="width2">
<div class="navbarchild right">
<div class="NBsearch right">
<input type="text" placeholder="search" />
</div>
<div class="NBuser right">
<div class="NBpicture left">
</div>
<div class="NBreputation left">
</div>
<div class="NBbadge left">
</div>
</div>
</div>
<div class="navbarchild left">
</div>
</div>
</div>
*I tried to see where the problem come from,and it seems that it comes from
<input type="text" placeholder="search" />
because when I delete this line the error don't appear.
Disable your extensions one by one from chrome://extensions (i'm supposing you're using chrome, for FF check this link) and see which one causes the problem there's no point in disabling all of them.
And as an answer to you're question about how a can an extension do that the simple answer is that it's just javascript, html and css injected into you page(not really experienced in this field).
For more information about chrome extensions check here
To know which Extension was loaded on your page you can go (when extensions are activated) in the Dev Tool (F12) -> Source -> Content scripts.
This is for Chrome.
I've discovered that my iPad (iOS 7) doesn't disable <button> elements even when they have the disabled attribute on them. They are disabled on every other browser I've tried on my OS (Windows 7): FF, Chrome, Safari.
If I take the same html and simply replace the <button> and with an <input type="button">, the input becomes disabled as you'd expect. The reason I want to keep it as a <button> is because I want to put an img inside and that doesn't seem to work with an input. So how do you disable <button> on iOS Safari? Here is a jsfiddle that can reproduce this issue:
<div id="hero-1" class="hero">
<button disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</button>
</div>
<div id="hero-2" class="hero">
<input type="button" disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</input>
</div>
When I view this in my iPad, the first button is enabled and the second is disabled. I want them to both be disabled.
i have create a app. in phoneGap. it work fine on iphone but in android click event not work.
have any idea what is wrong in my code
this is my html:-
<div id="logInScreen">
<div class="logInScreen">
<a class="main_logo" href="#"><img src="logo.png" alt=""/></a>
<p class="main_text">Digital Discount Vouchers <br /> On Your Phone</p>
<div id ="divRegister" class="main_reg" onclick="GeneralTransit('#register')">Register</div>
<div id ="divNotNow" class="main_reg" onclick="GeneralTransit('#t_featured')">Not Now...</div>
<div id ="divLogin" class="main_reg" onclick="GeneralTransit('#login')">Login</div>
<div class="main_forgot" onclick="GeneralTransit('#login_fog')">FORGOT PASSWORD?</div>
<p class="main_text2">IN ORDER TO PURCHASE ADDITIONAL VOUCHERS <br /> YOU NEED TO BE REGISTERED</p>
<p class="main_text3">POWERED BY YALLAMOB.COM</p>
</div>
</div>
there is also some other div's that hide and show on conditions .
I thought it was the missing ';' (GeneralTransit('#register');)
But it works here with and without the';': http://jsfiddle.net/ZVFgW/11/
Your problem is likely somewhere else.
Did you debug it using Chrome or Firefox+Firebug?