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; }

Button Background Color change

I have 4 buttons(B1,B2,B3,B4) in HEADER section,Each button redirects to different page in the same tab.
Button background color is WHITE.
Whenever I clicked on specific button, entire page will reload and redirects to specific button page.
NOTE: Header section is included in all 4 button pages.
Now my requirement is :
Whenever I click on specific button, that specific button back ground color only should change to another color(say ex: RED) rest showld be WHITE color only.
EX: If i click B1 button, page should reload, then back ground color of B1 button should change to RED rest should be WHITE.
How to do this in Jquery or Java script or CSS?
Pls. assist me.
.HeaderButtons {
width: 15%;
background-color: WHITE;
}
<div id="Header">
<input type="button" name="B1" id="B1" value="B1" class="HeaderButtons">
<input type="button" name="B2" id="B2" value="B2" class="HeaderButtons">
<input type="button" name="B3" id="B3" value="B3" class="HeaderButtons">
<input type="button" name="B4" id="B4" value="B4" class="HeaderButtons">
</div>

It sounds like your trying to set an active state on button based on the URL, using a slight change on this article to use buttons rather than links https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/
<div id="Header">
<input data-href="/" type="button" name="B1" id="B1" value="B1" class="HeaderButtons">
<input data-href="/page1/" type="button" name="B2" id="B2" value="B2" class="HeaderButtons">
<input data-href="/page2/" type="button" name="B3" id="B3" value="B3" class="HeaderButtons">
<input data-href="/page3/" type="button" name="B4" id="B4" value="B4" class="HeaderButtons">
</div>
<script>
//jQuery code that adds active class to the button that has the URL path as its data-href attribute
$(function() {
$('input[data-href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>
.HeaderButtons.active {
background-color: RED; //CSS to change the button color
}

Best approach is to use AJAX. Otherwise if you are reloading the entire page, the clicked button you may have to store it into somewhere like session or db(Which is not a good practice) or pass through the url like page.php?id=b1.
CSS:
.HeaderButtons
{
width:15%;
background-color:WHITE;
}
.HeaderButtonsRed {
background-color:red !important;
}
JS:
$(document).ready(function(){
$(".HeaderButtons").click(function () {
if ($(this).hasClass('HeaderButtonsRed')) {
$(this).removeClass('HeaderButtonsRed');
} else {
$(".HeaderButtons").removeClass('HeaderButtonsRed');
$(this).addClass('HeaderButtonsRed');
}
});
});

I think if the page redirects/refresh than U cant achive using pure css nither you can do it without adding parameters to URL as discribed in other comments
But you can give a try on cookies, I havent tried applying it but you can try it using jQuery cookie plugin.
$('.b1').click(function(){
var clicks = $(this).data('clicks');
if(clicks && $.cookie("yourcookiename")=='')
{
$.cookie("yourcookiename","yourcookieval");
// $('.b1').css('background-color','red'); then redirect page code
}
else
{
// $.removeCookie("yourcookiename"); & then $('.b1').css('background-color','white');
}
$(this).data("clicks", !clicks);
});

There are many ways to achieve this and the best method is ultimately going to depend on your application, personal taste and a wide array of other factors. Things to consider:
cookies
html localStorage
html sessionStorage
http url paramters
php sessions
Here's a method using HTML localStorage to store the button id on a click event like below. You can then fetch the value on subsequent page load/reload anywhere on the same domain indefinitely.
DEMO: http://buttons.demo.zuma-design.com/button-demo-a.html
<!DOCTYPE html>
<html>
<head>
<style>
.HeaderButtons {
width: 15%;
background-color: WHITE;
}
</style>
</head>
<body>
<div id="Header">
<input type="button" name="B1" id="B1" value="B1" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
<input type="button" name="B2" id="B2" value="B2" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
<input type="button" name="B3" id="B3" value="B3" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
<input type="button" name="B4" id="B4" value="B4" class="HeaderButtons" onclick="setButton(this.id); window.location.href=window.location.href">
</div>
<script type="text/javascript">
function setButton(value) {
localStorage.setItem("buttonID", value);
}
if (localStorage.buttonID) {
document.getElementById(localStorage.buttonID).style.backgroundColor = "RED";
}
</script>
</body>
</html>

Thanks for your suggestions and answers, but the point is , I dont want script code on button click since Page will reload on click of button, hence unable to keep back ground color at that event.
I got solution ,it is a bit old, but it works for me exactly. But I need to do hard coded. If any other solutions provided will be appreciated.
Here is my Jquery/Javascript code :
$(document).ready(function ()
{
var pageURl=window.location.href;
if(pageURl.indexOf("Page1.aspx") >-1)
{
$('#B1').addClass('ButtonBackColorred');
}
if(pageURl.indexOf("{Page2.aspx") >-1)
{
$('#B2').addClass('ButtonBackColorred');
}
if(pageURl.indexOf("Page3.aspx") >-1)
{
$('#B3').addClass('ButtonBackColorred');
}
if(pageURl.indexOf("Page4") >-1)
{
$('#B4').addClass('ButtonBackColorred');
}
$('#B1').click(function()
{
window.location=".../Page1.aspx";
});
$('#B2').click(function()
{
window.location=".../Page2.aspx";
});
$('#B3').click(function()
{
window.location=".../Page3.aspx";
});
$('#B4').click(function()
{
window.location=".../Page4.aspx";
});
});

Well, this is a relatively simple piece of jquery. Here's how:
$('#*button id*').css('background-color', '#ff0000');
This is just the code for the button color change.

jquery search box and button

I've got a button and text box, when you hover over the button the search box will appear using this piece of JavaScript/jquery:
$('#search-button').hover(function () {
$('#search-text').show();
}, function () {
$('#search-text').hide();
});
However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.
Here is a Fiddle to describe the problem

you don't need Jquery for this. A Css styling will do this for you!
By wrapping your content within an element, you can show/hide any (/all) elements within the wrapper. I've made a basic demo below:
please note the padding/background on the .search class are purely for demonstration, and can be edited/removed and still keep its functionality.
button {
display: none;
}
.search:hover button {
display: inline-block;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
}
<div class="search">
<input type="text" placeholder="type here" />
<button>SEARCH</button>
</div>
If, however, you are forced to use Javascript/jquery, then I won't duplicate it here, but refer to chipChocolate.py's answer

A javascript solution to your problem. Check this jsfiddle link:
http://jsfiddle.net/ea45h80n/
$('.search').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
$('#search-text').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<button>SEARCH</button>
<input type="text" placeholder="type here" id='search-text' />
</div>

Attach the hover event to #search-button and #search-text.
$('#search-text').hide();
$('#search-button, #search-text').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />

remove second function. which is onhoverout. use following:
$('#search-button').hover(function () {
$('#search-text').show();
});

This might Work
$('#search-text').hide(); //on DOM Load hide the element
$('#search-button').mouseover(function()
{
$('#search-text').show(); //When mouse enters the element, then show the textbox input
});

$('#search-button').hover(function () {
$('#search-text').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="search-button" value="search"/>
<input type="text" id="search-text" style="display:none;"/>

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.

When div is clicked, check corresponding radio input jquery

Here's my problem, I want an entire div to be click able, when clicked I need the radio button contained in the div to be checked, so the div acts as a radio itself. Here's what I thought I could use;
$('#content').click(function(e) {
$('input:radio[name="id_"]').prop('checked', true);
});
But this is not selecting the relative radio inside the div. I think I can use a this selector, am I right?

You don't give any code, so I guess:
DEMO
See my demo on CodePen
HTML
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
CSS (for example)
.content {
float: left;
width: 100px;
padding-top: 100px;
background-color: #eee;
margin-left: 10px;
}
JS (JQUERY)
$('.content').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
})

Yes you can use the this selector. I have made a quick jsfiddle to show you an example.

This should do it.
$('input:radio[name*="id_"]'), assuming the name starts with id_
And yes you can use this. Use it to filter down its children like:
$(this).children('input:radio[name*=id_]').prop("checked", true)
The key is using name*=id_
This means select element whose name starts with id_. Isn't that what you wanted ?

$('#content').click(function(){
$(this).children('radio').attr('checked','checked')
})

building on Deif's solution this will toggle the checked status when clicking on the div
fiddle
<div id="content">
Some content
<input type="radio" id="radio1" value="test" />
</div>
<script type="text/javascript">
$('#content').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
</script>

Try with this:
$('div').click(function(){
if( $('div').find('input:checkbox').prop("checked") == true){
$('div').find('input:checkbox').prop("checked", false);
}
else{
$('div').find('input:checkbox').prop("checked", true);
}
});
LIVE DEMO