We Keep Coding

onclick on search bar

I am trying to hide a container when the search bar is clicked but the page reloads and the container is shown again.
the code is below
<div class="search">
<form action="" method="GET">
<input type="text" name="search" value="" placeholder="search member..">
<button class="search_btn">
<i class="fas fa-search" style="font-size: 18px;"></i>
</button>
</form>
</div>
the javascript for adding the class of hide
const search_btn=document.querySelector(".search_btn");
const content=document.querySelector(".content");
search_btn.addEventListener("click", search);
let se=false;
function search(){
if(!se){
content.classList.add("hide");
se=true;
}else{
content.classList.remove("hide");
se=false;
}
}
and the css part of itis as below
.container .content.hide{
display:none;
}
.container .content{
display: block;
margin: 20px;
background: #f2f5f9;
}

The page is reloading becase your code contains form and when you are clicking on the search you are actually submit the form. You can use event.preventDefault() for prevent it.
function search(event){
if(!se){
content.classList.add("hide");
se=true;
}else{
content.classList.remove("hide");
se=false;
}
event.preventDefault()
}

My input file is opening when I click outside of "choose file", how can I make it only open if the actual "button" is clicked?

I am using the below code to set up a file upload. However on my page, the width of the input element is greater than the actual button that shows up. I can click anywhere in this invisible box and still open the file browser. I want to just be able to click the button and open it, not blank space. How can I achieve this?
<input type="file" action="/upload" id="selectFiles" name="myFile" enctype="multipart/form-data" />

You can hide the file button, and create a fake one to mimic it. Like this:
var fakeButton = document.getElementById('fake-file-btn');
var fileButton = document.getElementById('selectFiles');
fakeButton.addEventListener('click', function(e) {
// creates a event that triggers click on fileButton
var clickEvent = new MouseEvent('click', {bubbles: true});
fileButton.dispatchEvent(clickEvent);
});
#selectFiles {
display: none;
}
<button id="fake-file-btn">Choose File</button>
<input type="file" action="/upload" id="selectFiles" name="myFile" enctype="multipart/form-data" />

Did you mean that ?
<label>
<input type="file" />
<span class="file-button">Upload File</span>
</label>
label {
display: inline-block;
}
label input[type="file"] {
display: none;
}
.file-button {
padding: 13px 20px;
color: #fff;
display: block;
cursor: pointer;
font-weight: 500;
font-size: 0.8em;
background: #f00;
}

How to add an overlay to body when button clicked, and how to clear purplecoat content on pageload

I have two issues/questions...
Question #1:
I am using a label overlay plugin called purplecoat.js (http://ellekasai.github.io/purplecoat.js/) and I need to find a way to add an overlay backdrop to the entire body when the "toggle hints" button is clicked. Right now, when the toggle hints button is clicked, it displays the labeled overlays over the identified content, but I also want a complete background overlay added to the body to help bring focus to the labeled overlays.
My 2nd issue is, my actual website is a multi-page site and I need to use this purplecoat overlay plugin on each page so users can click to see the labeled hints. My problem is when the user clicks on the Toggle Hints button to view the labeled hints on one page, it will work fine, but when they open a new page of the site and click on the same toggle hints button, it shows the labeled hints from the previous page. If I refresh the page, then it shows the correct updated hints.
I need to find a way to clear the purplecoat.js content when a new page loads, so it does not show the wrong label overlays - or somehow discretely refresh the page when someone opens a new page so it clears the purplecoat.js.
I have a jsfiddle of my login page where the purplecoat.js label overlay is working when clicking on the Toggle Hints link. I just need to add the backdrop overlay, then clear the purplecoat.js when a new page/or modal is loaded. My site has several pages and modals, and the pages and modals are all opened with a button - so if there is a way to clear the purplecoat.js cache when any button is clicked, may work. I am open to suggestions.
JSFiddle link: https://jsfiddle.net/txptbf15/
I am new to learning jQuery/js, so please be kind! :-)
HTML (of my login page):
<div id="hints"><button data-purplecoat-toggle="foo" class="btn-loginHint">Toggle Hints!</button></div>
<div id="Login" class="loginTemplate panel panel-primary">
<div class="panel-heading clearfix">
<h2 class="pull-left">Log On</h2>
<div id="LangWrapper" class="pull-right">
<button id="LangButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-purplecoat="foo" data-purplecoat-label="Select Language" data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<span id="chooseLanguage">Language</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="_.utils.ChangeLanguage('en')">(English)</li>
<li onclick="_.utils.ChangeLanguage('jp')">(日本語)</li>
</ul>
</div>
</div>
<div class="panel-body">
<p>Please enter your username and password</p>
<form class="">
<fieldset class="">
<legend>Account Info</legend>
<div class="form-group">
<label for="accountType">Account Type</label>
<select class="form-control" id="accountType" name="accountType" data-purplecoat="foo" data-purplecoat-label="Select Account from menu that you want to access." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<option value="customer">Option 1</option>
<option value="reseller">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="email">EMail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Email" data-purplecoat="foo" data-purplecoat-label="Input email address you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<label for="email">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" data-purplecoat="foo" data-purplecoat-label="Input password you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" name="RememberMe" value="1" /> Keem me logged in
</label>
</div>
</div>
<p class="actions">
<button type="button" id="btnSubmit" class="btn btn-primary" data-purplecoat="foo" data-purplecoat-label="Select button to Login" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-sign-in"></i> Log In</button>
<i class="fa fa-puzzle-piece"></i> Forgot Password
<a id="loginRegister" href="#"
class="pull-right" data-purplecoat="foo" data-purplecoat-label="Select to Register" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-key"></i> Register</a>
</p>
</fieldset>
</form>
</div>
</div>
CSS:
.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}
.purplecoat {
padding: 0 !important;
font-size: 12px !important;
line-height: 1.2em !important;
}
.btn-loginHint {
background-color: transparent;
color: #fff;
border: none;
float: left;
padding-top: 5px;
}

Regarding Problem 1: the issue seems to be with z-index on all the purplecoat divs; it's set to 9999. As a result what you need is an overlay div with a higher z-index. See my sample below. I've also added a div with the id of overlay. Here is my working fiddle.
#overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
height:100%;
background-color:white;
z-index:10000;
}
Regarding Problem 2: I'm not sure how you're loading the pages, but this worked in my fiddle.
$('[data-purplecoat-for]').hide();
After looking at the source code it seems all those overlays have the same property data-purplecoat-for, simply calling hide on them will work. Again if this doesn't work for you I need a little more info. By the way, the github project says it's no longer being maintained.

How to use floating save button for large forms and hide that when actual save button is visible angularjs whose location is not just bottom of page

Hi I want to use a floating save button in my div
.fw_circle{
background-color: #53beb6;
position: fixed;
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
border-radius: 50%;
text-align: center;
font-size: 20px;
padding: 13px;
color: white;
z-index: 100;
}
<div class="div1">
<!-- Floating save button -->
<div class="fw_circle">
<i class="fa fa-floppy-o" aria-hidden="true"></i>
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" ng-model="Name" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name2:</label>
<input type="text" ng-model="Name2" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name3:</label>
<input type="text" ng-model="Name3" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name4:</label>
<input type="text" ng-model="Name4" class="form-control" maxlength="200" required/>
</div>
<!-- And so many other input fields-->
</div>
<div class="div2">
<!--Don't want that float button to be shown in this div as it has only a save button -->
<button class="btn">Save</button>
</div>
I want that the floating button should be visible in above div (i.e div1) with input fields
So that the user can save the form anytime in between and no need to scroll to the bottom to save the form.
But when he scrolled to the bottom and then he can see the save button in another div (i.e div2), in that case, the floating button should not be visible.
And the actual Save button is not exactly at the bottom of page
But the floating button is showing even if the save button is visible. Please suggest some method to achieve this.

You just need hide it with JavaScript:
var button = (find button)
$(div).css('display', 'none')
You can make that a function and trigger it on your convenience.
If it is as I understand in your code, you can select the button with: $('.fw_circle')
If you want to trigger it depending on whether the user has reached the bottom or the page, you can do so with the following piece of code from another answer here in SO:
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};

have to press twice the button to work

Hi guys I am developing an android app which is totally running using html,bootstrap and CSS. But for some cases i used native code android.Now the problem is that while i was clicking the text box in the html ,native keyboard is popping up and while I click any html button firstly the keyboard is removed and then i have to click again then the button is working .I have to press twice the button .Please help.It is working fine on Genymotion emulator but not working on real device .
I am using Motorola turbo edition
Buttons are below
<!--Approval Buttons Section-->
<div ng-show="!vc.isApprDtlsSuccessShown && !vc.isApprDtlsOTPShown"
class="t-approval-btn-block">
<div class="t-approval-btn-box"> <!--Removed ng-disabled="vc.disableButtons"-->
<button type="submit" class="btn btn-default pink-btn"
ng-click="vc.setStatus('APR', 'approvalDetails')">APPROVE
</button>
</div>
<div class="t-approval-btn-box m_top10">
<button type="submit" class="btn btn-default pink-btn"
ng-click="vc.setStatus('REJ', 'approvalDetails')">REJECT
</button>
</div>
<div class="t-approval-btn-box m_top10">
<button type="submit" class="btn btn-default pink-btn"
ng-click="vc.setStatus('APH', 'approvalDetails')">APPROVE AND HOLD
</button>
</div>
Css are below
.t-approval-btn-box {
text-align: center;
}
.pink-btn {
width: 281px;
height: 48px;
background-color: #fb637e;
text-transform: uppercase;
color: #fff;
border: none;
font-size: 16px;
}
.m_top10 {
margin-top: 10px;
}