We Keep Coding

Blur exception based on clicked element

How it works
I am building a demo search box where the search results show up when the input field is not empty while focusing in. When you blur the search results container hides.
Problem
The problem appears when I click the search results container. The input field blurs with the result that the search results container hides.
How to make it work so that the search results container does not hide when clicking it (or an element inside it).
HTML
<div class="searchbox">
<input class="input">
<div class="search-results">
// Results
</div>
</div><!--End .searchbox-->
jQuery
$('.searchfield .input').focusin(function() {
// When value is not empty show search results
if ($(this).val() !== '') {
$('.searchbox .search-results').fadeIn(10);
}
// Other code
}).focusout(function() {
// Hide search results
$('.searchbox .search-results').fadeOut(10);
// Other code
});

I fixed my problem by adding a delay on the fadeout during the blur. This way I was able to click the button inside the container.
$('.searchfield .input').focusin(function() {
// When value is not empty show search results
if ($(this).val() !== '') {
$('.searchbox .search-results').fadeIn(10);
}
// Other code
}).focusout(function() {
// Hide search results
$('.searchbox .search-results').delay(300).fadeOut(10);
// Other code
});

You don't necessarily need JS / jQuery.
Try with required attribute and CSS's :valid to achieve the desired
.searchbox {
position: relative;
}
.searchbox .search-results {
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s;
background: #eee;
padding: 1rem;
}
.searchbox .input:valid + .search-results {
visibility: visible;
opacity: 1;
}
<div class="searchbox">
<input class="input" required>
<div class="search-results">
<p>Register to use this feature</p>
<button>JOIN NOW</button>
</div>
</div>
<p>Lorem ipsum...</p>
If you prefer jQuery instead:
$(".input").on({
"input focus": function() {
$(this).closest(".searchbox").toggleClass("showInfo", !!$.trim(this.value));
},
"blur": function() {
$(this).closest(".searchbox").removeClass("showInfo");
}
});
.searchbox {
position: relative;
}
.searchbox .search-results {
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s;
background: #eee;
padding: 1rem;
}
.search-results:hover,
.searchbox.showInfo .search-results {
visibility: visible;
opacity: 1;
}
<div class="searchbox">
<input class="input">
<div class="search-results">
<p>Register to use this feature</p>
<button>JOIN NOW</button>
</div>
</div>
<p>Lorem ipsum...</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Might not seem obvious at first, but the :hover helps to keep the element visible when interacting with it's content.

Switch Button - switching html

I'm looking for some assistance with a website I'm coding. I have an HTML and CSS switch button (or label):
HTML:
<label class="switch">
<input type="checkbox"></input>
<div class="slider round"></div>
</label>
CSS:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
Here is just what the button looks like: https://jsfiddle.net/pbxn2egc/
Essentially what I want or am trying to do is when the button is toggled, I would like for it to show the price of 5 items (that I hard-coded in, so like standard html) and then when you toggle the button it hides that text and shows the competitors price by showing that text.
So if the button is left, I want Walmart's prices. If the button gets toggled to the right, Walmart's prices hide, and Target's appear in the same location.
Can someone assist me with this? Thanks!

One approach is to listen for the onchange event on your <input> element.
Then, when the box is checked/unchecked, you can determine which element (price) is visible and display the other.
document.getElementById("mySwitch").onchange = function() {
var priceA = document.getElementById("priceA");
var priceB = document.getElementById("priceB");
if (priceA.classList.contains("hidden")) {
priceA.className = "shown";
priceB.className = "hidden";
} else if (priceB.classList.contains("hidden")) {
priceB.className = "shown";
priceA.className = "hidden";
}
}
.shown {
}
.hidden {
display: none;
}
<input type="checkbox" id="mySwitch"></input>
<div class="slider round"></div>
<div id="priceA" class="shown">Price A</div>
<div id="priceB" class="hidden">Price B</div>
If you're using jQuery, there's a toggleClass() method that will automatically toggle an element between two classes.

function togglePrices() {
Array.from(document.querySelectorAll('.price')).forEach(function (f) {
f.classList.toggle('hidden');
});
}
.hidden {
display: none;
}
<input type="checkbox" onchange="togglePrices()"> Competitors Price
<div class="price">
<h3>Our Price</h3>
water $10.00<br/>
beer $12.00<br/>
wine $20.00
</div>
<div class="price hidden">
<h3>Competitors Price</h3>
water $12.00<br/>
beer $15.00<br/>
wine $24.00
</div>

In comparison with the answer from #rphv, this is how I would do it...
I have a div for pricing; within that is a div for our prices and another for their prices. The pricing container is unique on the page, and I give it an ID to signify its purpose.
I give the two price divs two classes each; they both get the class "price" and then either "ours" or "theirs", again to describe what they are (not how they look)
The HTML is now a descriptive structure of the data it contains, without bothering with appearance (because appearance is the job of CSS, not HTML)
We start off displaying our prices, so things with class "ours" are displayed when they are within the pricing div #pricing .price.ours; things with class "theirs" are not displayed #pricing .price.theirs.
Later, when the pricing div has class theirs we will show their prices, not ours — so let's hook up our toggle.
One should prefer attaching event handlers over using inline "onevent" javascript handlers, so I gave the checkbox an ID to easily select it, then use addEventListener so the change event will call togglePrices
The togglePrices could have been a one-liner, I only assigned the var because you often want to do several things with the selected element. Here I simply toggle the class "theirs" on and off.
What happens when that class is toggled is that it just makes a different set of CSS rules apply to the inner price divs. An "ours" within a "theirs" does not display frp, the #pricing.theirs .price.ours rule. A .theirs within a .theirs does display.
I wish the stack snippet showed in reverse the order used — I think this demonstration makes more sense reading the HTML first, then the CSS, and the JS third.
function togglePrices() {
var pricing = document.getElementById('pricing');
pricing.classList.toggle('theirs');
}
document.getElementById('competition')
.addEventListener('change', togglePrices);
#pricing {
margin-top: 1em;
}
#pricing .price.ours,
#pricing.theirs .price.theirs
{
display: block;
}
#pricing .price.theirs,
#pricing.theirs .price.ours
{
display: none;
}
<input type="checkbox" id="competition">
<label for="competition">Competitor's Price</label>
<div id="pricing">
<div class="price ours">
<strong>Our Price</strong><br>
water $1.00<br>
beer $3.00<br>
wine $4.50
</div>
<div class="price theirs">
<strong>Competitors Price</strong><br>
water $1.25<br>
beer $4.00<br>
wine $5.50
</div>
</div>

HTML Button not Clicking

I am working on a project about the Miracle Worker play for my english class. I'm coding a game for it, but I cannot continue because my button won't click and I can't type into my text input. Does anyone know why?
body {
animation-name: example;
animation-duration: 10s;
animation-iteration count: 1000000000000000000000000000000000000000000000000000000000000;
}
#keyframes example {
0% {
background-color: turquoise;
}
25% {
background-color: lightblue;
}
50% {
background-color: blue;
}
75% {
background-color: teal;
}
100% {
background-color: cyan;
}
}
h1 {
font-family: marker felt;
position: relative;
bottom: 90px;
}
.one {
background-color: lime;
}
.two {
background-color: green;
}
div {
height: 67px;
width: 67px;
position: relative;
left: 450px;
bottom: 935px;
font-family: marker felt;
}
#u {
position: relative;
left: 385px;
top: 5px;
}
button {
background: black;
color: white;
height: 50px;
width: 100px;
font-family: marker felt;
position: relative;
bottom: 75px;
}
p {
font-family: marker felt;
text-align: right;
position: relative;
bottom: 475px;
}
input {
position: relative;
bottom: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>
The Miracle Worker Game
</title>
<script>
var pos = 0;
var ans = document.getElementById("answer").value;
var sco = 0;
function myTurn() {
if (pos == 0) {
if (ans == 2) {
sco++;
document.getElementById("zescore").innerHTML = sco;
}
}
}
</script>
</head>
<body>
<div id="u">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="smile" height=50 width=50 />
</div>
<h1>The Miracle Worker Game<br>By: Jude Farley</h1>
<h1>Score:</h1>
<h1>id="zescore">0</h1>
<h1><br><input id="answer" name="Text1" type="text" value="Ans: (True=1/False=2)"/><br><button onclick="myTurn">Submit and Move</button></h1>
<p>
Questions:
<br>
<br>1. Helen had meningitis as a baby and went blind and deaf (false)
<br>
<br>2. Kate wants to Help Helen and
<br>contacts the Perkins Institute in New York (false)
<br>
<br>3. The principal, Anagnos, sends Annie Sullivan to Helen (true)
<br>
<br>4. When Annie comes, Helen has been disciplined but needs to learn (false)
<br>
<br>5. Annie starts attempting to teach Helen sign language (true)
<br>
<br>6. Helen does not understand things have names (true)
<br>
<br>7. Annie then tries to teach Helen manners (true)
<br>
<br>8. The Kellers agree with Annie's teaching methods and
<br>let her teach Helen any way she wants (false)
<br>
<br>9. Annie takes Helen to the garden house to teach her for 2 weeks (true)
<br>
<br>10. Annie runs water over Helen's hand and Helen
<br>understands language (true)</p>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>
<div class="two">4</div>
<div class="one">5</div>
<div class="two">6</div>
<div class="one">7</div>
<div class="two">8</div>
<div class="one">9</div>
<div class="two">10</div>
</body>
</html>

If you place a z-index on the button element, you can then click successfully.
button, input{
z-index:10;
}
You can debug this using the 'Inspect Element' in any modern browser, and as you can see the <p> element is overlapping a lot of the content here. By allowing for stacking (via using z-index), you will be able to stack the desired element above and below each other.
To test this then, you can use button:hover{background:tomato}, for example, and can hence hover and click on the item.

First of all, you have a wrong ID here:
<h1>id="zescore">0</h1>
should be:
<h1 id="zescore">0</h1>
Also, you have your button in the background so you will have to put a z-index property in your button, for example, z-index: 2 to your button:
button{
z-index: 2;
}

Dude Your script should run once the document is ready
Put your script code inside document ready of jquery or javascript function
you can not acces any html element until the dom is loaded

Automatically resizing div

This is another of the infinite questions about how to get div sizing to behave, but conversely I haven't been able to find a sufficiently similar question to get my particular case working.
function update() {
$('#container .body-text').bigText({verticalAlign:'top',whiteSpace:'pre'});
}
function doresize(form) {
var container = $('#container')[0];
container.style.height = form.height.value + 'px';
setTimeout(500, update);
}
function dotext(form) {
$('#container .body-text').text(form.text.value);
update();
}
update();
.container {
float: left;
border: solid 1px black;
position: relative;
margin-left: 5px;
width: 20%;
height: 200px;
padding: 2px;
}
.header {
width: 100%;
height: 64px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
max-height: calc(100% - 64px);
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>
<form name="setup">
<label>Set height: <input type="number" name="height" value="200" /></label>
<button type="button" onclick="doresize(this.form)">Resize</button><br />
<label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
<button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />
<div id="container" class="container" onload="update()">
<div class="header"></div>
<div class="body"><div class="body-text">Multi-Line
Text</div></div>
</div>
The above snippet shows a fairly basic layout with a container div with a width and height that are controlled by outside forces. (In the real code this is controlled by the browser window resizing, but I've put in a basic form height adjustment here for demonstration purposes.)
What I'm trying to achieve with this is the following:
Both internal divs fill to 100% width of their parent.
The top (blue) div has a fixed height.
The bottom (green) div will use the remaining space in the parent by default.
However, after a bit of existing JS code resizes the font size of the text to best-fit this space (both width and height)...
If the container is tall enough and the text is short enough that there's extra space below, then the green div should vertically shrink to fit its text and both the blue and green divs should then appear vertically centred in the container div.
If the container size or the text changes, repeat the process of fitting the text and recentering.
I know how to do most of the pieces individually, I'm just not sure how to put it all together, and whether step 5 is possible with CSS or whether it requires JS. (I've tried adding the vertical centering with CSS via the absolute-translate-50% trick, which works great at tall container sizes or text that is wider than it is tall, but not the other way around -- the text overflows the green div because the height is not fixed so can't be taken into account by the font sizing script.)
I'm ok with rearranging or inserting additional divs if this is required.
EDIT: the following snippet inspired by Shadi's answer seems to do the trick:
function update() {
var text = $('#container .body-text');
text.parent().parent().css('height', '100%');
text.parent().css('height', '100%');
text.bigText({verticalAlign:'top',whiteSpace:'pre'});
text.parent().css('height', text.height());
text.parent().parent().css('height', text.height() + 64);
}
function doresize(form) {
$('#container').css('height', form.height.value);
update();
}
function dotext(form) {
$('#container .body-text').text(form.text.value);
update();
}
update();
.container {
float: left;
border: solid 1px black;
margin-left: 5px;
width: 20%;
height: 200px;
padding: 2px;
}
.subcontainer {
position: relative;
width: 100%;
height: 100%;
top: 50%;
transform: translateY(-50%);
}
.header {
width: 100%;
height: 64px;
background-color: blue;
}
.body {
width: 100%;
height: 100%;
max-height: calc(100% - 64px);
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>
<form name="setup">
<label>Set height: <input type="number" name="height" value="200" /></label>
<button type="button" onclick="doresize(this.form)">Resize</button><br />
<label>Set text: <textarea name="text">Multi-Line
Text</textarea></label>
<button type="button" onclick="dotext(this.form)">Change</button><br />
</form>
<br />
<div id="container" class="container">
<div class="subcontainer">
<div class="header"></div>
<div class="body"><div class="body-text">Multi-Line
Text</div></div>
</div>
</div>
Try values between 80 and 300 to see it in action.

I have tried this in a code, please would you try it and see if it fits your need, the following code will make the green div fullfil the remining container height, and then after calcuating the text size and width it shrinks to fit the new text height
function update() {
$('#container').css('height', '200px' /*this would be dynamic based on the container height*/);
$('#container .body-text').bigText({ verticalAlign: 'top', whiteSpace: 'pre' });
$('#container').css('height', $('#bodytxt').height() + 64 /*this is the header height - blue div*/);
}
You need also to add an id for your bodytext div:
<div id="bodytxt" class="body-text">Multi-Line Text</div>

Hitting 'Cancel' during file upload in Chrome clears value

I'm working with a simple html type="file" input, and I'm having an issue in Chrome. Specifically, when you browse to and choose a file, it saves the value. However, if you re-browse, then press cancel it will clear out the value.
The html is simple:
<input type="file">
Here is a simple fiddle- http://jsfiddle.net/78ghn/.
This doesn't happen in other browsers -- is there a way to force Chrome to retain the value??

function f()
{
document.getElementById("b").appendChild(document.getElementById("a"));
document.getElementById("d").innerHTML = document.getElementById("c").innerHTML
document.getElementById("alert").innerHTML = 'Your last file was '.concat(document.getElementById("b").lastChild.value.slice(12))
}
function g()
{
if(document.getElementById("b").lastChild.value)
{
document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12)));
}
else
{
document.write("You have submitted nothing.");
}
}
#a
{
opacity: 0;
width: 100%;
height: 100%;
}
#c
{
display: none;
}
#d
{
width: 100%;
height: 100%;
}
#e
{
background-color: green;
border: 2px solid black;
color: white;
font-size: 16pt;
width: 180px;
height: 90px;
}
#f
{
position: relative;
left: 25%;
bottom: 70%;
}
<form>
<div id='e'>
<span id='d'>
<input type="file" onchange='f();' id='a'>
</span>
<span id='f'>Select File</span>
</div>
<input type='button' value='Submit' onclick='g();'>
</form>
<span id='alert'>You have chosen no files.</span>
<ul id='b'>
</ul>
<form id='c'>
<input type="file" onchange='f();' id='a'>
</form>
I was unable to find a native implementation for this, so I tried my own workaround. It takes input from a custom CSS button overlay, then adds the actual input element to a list and replaces it with an empty one. The value is read and displayed, as it would be with a normal input. It is not included, but submitting it would involve moving the original input (last element of ul with id='b') to a form and submitting it via JavaScript. It is not optimal, but it does work.