We Keep Coding

Image tag inside a button makes the js stop working on chrome

I'm trying to make a button with an image that will toggle a div's class, however, when I use the tag image inside the button, the js won't work. This only happens on chrome, the same code works normally on firefox. Is there any solution to this?
codepen: https://codepen.io/luansergiomattos/pen/zydWyM
html:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
js:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
edit: this is what the code is supossed to do: when i press the button, the js will toggle a class, the class named "off" has width: 0px; display: none etc. So the element will be hidden when i press the button, and it will show up again when i press the button. Sorry for any english mistak

The reason this happens is the image becomes the target in your click function – try disable pointer events and it will work again :)
button img { pointer-events: none; }

Bootstrap Input File cursor

I am using this library to create a nice input file button with bootstrap theme.
I added a cursor pointer on the button, but
I can not see the cursor on the whole button.
<button style="cursor:pointer" />
DEMO

You can use code:
$fileButton.on('click', function(){
$(this).next('input').trigger('click');
});
After:
$fileButton = $('<button style="cursor:pointer" class="' + config.uploadButtonClass + '">' + config.uploadText + '</button>').insertBefore($self);
And add styles to:
.inputfile .btn{
position:relative;
z-index:2;
}

I have done this with different way using Javascript
You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
HTML:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button style="cursor:pointer" onclick="chooseFile();" class="btn btn-defualt"><span style="cursor:pointer" class="glyphicon glyphicon-upload"></span> Search for a file to add</button>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
javascript:
function chooseFile() {
document.getElementById("fileInput").click();
}
Here is Live Demo

If I understood it properly, your problem was in inability to style shadow-dom input tag, generated by browser
This css helped me in the same issue:
input[type="button"]::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button,
button::-webkit-file-upload-button {
cursor: pointer;
}

Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class

How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}

1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo

Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368

Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369

Hide/unhide div with button?

<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!

Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}

Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.

Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.

There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jquery toggle open all div s on one click

Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link.
jQuery
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().children('.uploadboy').slideToggle(200, 'swing');
});
});
HTML
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
<div style="overflow:auto;" class="links-box ">
<p style="float:left; width:250px;" id="links">
<input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none; color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
</p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
<p>content</p>
</div>
example in jsFiddle

Use the below script, .find method only searches for the descendants (http://api.jquery.com/find/).
$(document).ready(function () {
$("input:button[name='uploadboy']").click(function () {
$(this).parent().parent().next('.uploadboy').slideToggle(200, 'swing');
});
});

As I mentioned in my comment above, IDs must be unique. That said, try this:
$("input").click(function () {
$(this).slideToggle(200, 'swing');
});
jsFiddle example

What I initially see here that's an issue is that you have 2 input buttons with the same id. While this may not be the overall issue, you still can't have 2 elements with the same id. I also am not sure if this is just generic code you cleaned to ask a question, but your selectors seem pretty complicated. You attach the .click event to both input buttons, then you go to the buttons parent, which is the paragraph, then you go the child object which is the button. You are essentially going from point one spot, up a level, then back down a level. When the click handler is attached to the button, anytime you click a button, you can reference $(this) to refer to the button.
<input type="button" name="uploadboy" id="button1" />
<input type="button" name="uploadboy" id="button2" />
$(document).ready(function(){
$("input:button[name='uploadboy']").click(function () {
$(this).SlideToggle(200, 'swing');
});
});
If you look at the function that is ran when the input button is clicked, it simply refers to the $(this) object. This is a benefit of jquery and $(this) is the specific button that you clicked. Even if there are 20 buttons on the page, whatever button is clicked will be this. So in the above example, the button clicked will have the slide toggle occur. You could also navigate the dom off of this if you need to move around like before.