We Keep Coding

Show/hide div in JS

I'm pretty fresh to JS.
For n amount of bar divs I have n amount foo divs. By clicking on bar[1], I want foo[1] to show or hide. The same goes for bar[2]/foo[2], bar[5]/foo[5], bar[3]/foo[3],...bar[n]/foo[n] in no exact order.
With this code I am able to show and hide, but only all of the divs at the same time. What should I change, so that I am able to hide or show only one of the divs?
function getContent() {
var x = document.getElementsByClassName("foo");
for (var i = 0; i < x.length; i++) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}
document.querySelector(".bar").addEventListener("click", getContent);
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div>
<div class="bar" onclick="getContent()">bar</div>
</div>
<div class="foo">foo</div>

No need to use JS here, HTML is more powerful than you think: if you want to show-or-hide information, the <details> element's got you covered.
.all-or-nothing summary {
display: inline-block;
cursor: pointer;
}
<details class="all-or-nothing">
<summary>Toggle all divs</summary>
<div>
The first div
</div>
<div>
The second div
</div>
<div>
The third div
</div>
</details>

Use a variable to hold the index of the current DIV to show, rather than looping over all the DIVs.
let fooIndex = 0;
let allFoo = document.querySelectorAll(".foo");
function getContent() {
if (fooIndex < allFoo.length) {
allFoo[fooIndex].classList.toggle("foo");
allFoo[fooIndex].classList.toggle("bar");
fooIndex++;
}
}
document.querySelector(".bar").addEventListener("click", getContent);
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div>
<div class="bar">bar</div>
</div>
<div class="foo">foo1</div>
<div class="foo">foo2</div>
<div class="foo">foo3</div>
<div class="foo">foo4</div>

//let fooIndex = 0;
function getContent() {
var x = $(".card");
x.append('<div class="foo" onclick="hideContent(this)">foo1</div>');
//$(this).addClass('bar');
}
function hideContent(a) {
$(a).removeClass('foo');
$(a).addClass('bar');
}
.foo {
display: none;
}
.bar {
padding: 5px;
display: block;
}
<div class="card">
<div onclick="getContent();" class="bar">bar</div>
</div>

Changing display after animation

I'm trying to change an element's display to none after a CSS transition. This is because I want elements below the removed to move up (or down) to take the removed element's place. The transition is working, but it doesn't change the display.
.glossary-item {
margin: 20px 0;
padding: 20px;
box-sizing: border-box;
border: 1px solid;
opacity: 1;
}
.hidden {
display: none;
}
.transition.hidden {
display: block;
opacity: 0;
}
.transition {
transition: opacity 1s ease;
}
<input type="text" id="glossaryFilter" onkeyup="myFunction()" placeholder="Search..">
<div id="glossary-container">
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Title</h5>
<p>Content</p>
</div>
</div>
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Other</h5>
<p>Stuff</p>
</div>
</div>
</div>
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("glossaryFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("glossary-container");
cards = cardContainer.getElementsByClassName("glossary-item");
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".glossary-body h5.glossary-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].classList.add('transition');
cards[i].classList.remove('hidden');
} else {
cards[i].classList.add('transition');
cards[i].classList.add('hidden');
}
}
}

the class:
displayNone{
display: none;
}
some js:
const afterAnimate = (()=>{
setTimeout(()=>{
//change "elem" to the fitting element
elem.classList.add("displayNone");
}, 1000);
})
//add the function-call to your event which triggers the animation
afterAnimate();

Dropdown List in Gridview using only HTML, CSS or Javascript

I made a dropdown list out of a select tag, but the content of the dropdown is way too many, so the dropdown box is very long, making it messy to look at. How do I organize the dropdown contents into grid view without using ASP.NET?
I've surfed the internet about related problems, but they seem to all use ASP.NET
Here's the HTML:
<div id = "textarea-container">
<textarea id="message" placeholder="Write your message here..." required autofocus readonly></textarea>
<input name="idValue" id="idValue" type="hidden">
<select id = "emoji-button" style = 'background: url(icons/smiley-icon.png);width:35px;height:35px;' onchange="document.getElementById('message').value=document.getElementById('message').value + this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;"></select>
</div>
JavaScript:
//Emoji messages
var selectEmoji = document.getElementById('emoji-button')
var emojiOption;
var emojRange = [128513, 128591]; //Array of emojis
for (var x = emojRange[0]; x < emojRange[1]; x++) {
emojiOption = document.createElement('option');
emojiOption.value = x;
emojiOption.innerHTML = "&#" + x + ";";
selectEmoji.appendChild(emojiOption);
}
CSS:
/** Emoji Button **/
#emoji-button {
position: absolute;
bottom: 40px;
right: 20px;
font-size: 0;
}
/** Dropdown for emoji button **/
select {
padding:3px;
margin: 0;
background: transparent;
color:#888;
border: none !important;;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}

Links not working inside div element that appears on mouse over

I'm creating a JavaScript function which will parse data (which will be retrieved from a database, but its just static here for testing) and format it into links and place it into a div element (popup) that will show up when the mouse is hovered onto the icon. However, I cannot figure out why the links are not clickable. I can right click it and open it in a new tab, but I cannot directly click and open them. Also, it works on Firefox, but not Chrome, or Safari!
EDITED:
Here is the code in JSFiddle:
https://jsfiddle.net/kvdju2ju/2/
HTML
<table>
<tr>
<td>
<div id="p1" class="parent">
<img src="http://www.free-icons-download.net/images/blue-square-icon-47147.png" style="border-width:0px;"/>
<div id="p1data" class="data" style="display:none">
Website1#http://www.google.com#Website2#http://www.Link2.com#Website3#http://www.Link3.com"
</div>
<div id="p1popup" class="popup" style="display: none">
</div>
</div>
</td>
</tr>
</table>
CSS
.parent {
position: relative;
}
.parent .popup {
display: block;
position:absolute;
top: 0px;
left:20px;
background-color: #FFFFFF;
padding: 5px;
outline: black solid 1px;
}
.parent:hover .popup {
display: block;
position:absolute;
top: 0px;
left:20px;
background-color: #FFFFFF;
z-index: 100;
outline: black solid 1px;
}
.popup a:link { color: #003300; text-decoration: none;}
.popup a:visited { color: #003300; }
.popup a:hover { color: #006600; }
.popup a:active { color: #006600; }

You can add the nodes like this (It works on Chrome):
function parseWebsites() {
var text = document.getElementById('p1data').innerHTML;
var lines = text.split("#");
var string = "";
var myNode = document.getElementById("p1data");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var i = 0; i < lines.length - 1; i = i + 2) {
var webtitle = lines[i];
var website = lines[i + 1];
//string = string + "<a href='" + website + "' target='_blank'>" + webtitle + "</a> <br> ";
var node = document.createElement("a"); // Create a <a> node
var textnode = document.createTextNode(webtitle); // Create a text node
node.appendChild(textnode); // Append the text to <a>
node.href = website;
node.target = "_blank";
document.getElementById("p1popup").appendChild(node); // Append <a> to <div> with id="p1popup"
var br = document.createElement("br"); // Create a <br> node
document.getElementById("p1popup").appendChild(br);
}
//document.getElementById("p1popup").innerHTML = string;
}
https://jsfiddle.net/s8st79w0/1/

Does this only have to work on desktop if so, you're fine but I don't know if it would work on mobile.
If you want some cleaner code and cut out the JS which I think is adding some complexity and requires some extra loading on the browser part, I would try a CSS only approach with :hover. You can achieve the same affect. An example is below. Also, I think linkedin uses this approach for there nav. I think bettycrocker.com and pillsbury.com uses this as well.
http://www.w3schools.com/howto/howto_css_dropdown.asp

You don't have an anchor and you don't have href
you have missing href
try adding one
<a id="p1" class="parent" href='https://www.google.com'>
<div>
<img src="http://www.free-icons-download.net/images/blue-square-icon-47147.png" style="border-width:0px;" />
<div id="p1data" class="data" style="display:none">
website1#http://www.google.com#Website2#http://www.Link2.com#Website3#http://www.Link3.com"
</div>
</div>
</a>

What are the CSS secrets to a flexible/fluid HTML form?

The below HTML/CSS/Javascript (jQuery) code displays the #makes select box. Selecting an option displays the #models select box with relevant options. The #makes select box sits off-center and the #models select box fills the empty space when it is displayed.
How do you style the form so that the #makes select box is centered when it is the only form element displayed, but when both select boxes are displayed, they are both centered within the container?
var cars = [
{
"makes" : "Honda",
"models" : ['Accord','CRV','Pilot']
},
{
"makes" :"Toyota",
"models" : ['Prius','Camry','Corolla']
}
];
$(function() {
vehicles = [] ;
for(var i = 0; i < cars.length; i++) {
vehicles[cars[i].makes] = cars[i].models ;
}
var options = '';
for (var i = 0; i < cars.length; i++) {
options += '<option value="' + cars[i].makes + '">' + cars[i].makes + '</option>';
}
$("#make").html(options); // populate select box with array
$("#make").bind("click", function() {
$("#model").children().remove() ; // clear select box
var options = '';
for (var i = 0; i < vehicles[this.value].length; i++) {
options += '<option value="' + vehicles[this.value][i] + '">' +
vehicles[this.value][i] +
'</option>';
}
$("#model").html(options); // populate select box with array
$("#models").addClass("show");
}); // bind end
});
.hide {
display: none;
}
.show {
display: inline;
}
fieldset {
border: #206ba4 1px solid;
}
fieldset legend {
margin-top: -.4em;
font-size: 20px;
font-weight: bold;
color: #206ba4;
}
fieldset fieldset {
position: relative;
margin-top: 25px;
padding-top: .75em;
background-color: #ebf4fa;
}
body {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
text-align: center;
}
#wrapper {
margin: 40px auto 0;
}
#myFieldset {
width: 213px;
}
#area {
margin: 20px;
}
#area select {
width: 75px;
float: left;
}
#area label {
display: block;
font-size: 1.1em;
font-weight: bold;
color: #000;
}
#area #selection {
display: block;
}
#makes {
margin: 5px;
}
#models {
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="wrapper">
<fieldset id="myFieldset">
<legend>Cars</legend>
<fieldset id="area">
<label>Select Make:</label>
<div id="selection">
<div id="makes">
<select id="make"size="2"></select>
</div>
<div class="hide" id="models">
<select id="model" size="3"></select>
</div>
</div>
</fieldset>
</fieldset>
</div>

It's not entirely clear from your question what layout you're trying to achieve, but judging by that fact that you have applied "float:left" to the select elements, it looks like you want the select elements to appear side by side. If this is the case, you can achieve this by doing the following:
To centrally align elements you need to add "text-align:center" to the containing block level element, in this case #selection.
The position of elements that are floating is not affected by "text-align" declarations, so remove the "float:left" declaration from the select elements.
In order for the #make and #model divs to sit side by side with out the use of floats they must be displayed as inline elements, so add "display:inline" to both #make and #model (note that this will lose the vertical margin on those elements, so you might need to make some other changes to get the exact layout you want).
As select elements are displayed inline by default, an alternative to the last step is to remove the #make and #model divs and and apply the "show" and "hide" classes to the model select element directly.

Floating the select boxes changes their display properties to "block". If you have no reason to float them, simply remove the "float: left" declaration, and add "text-align: center" to #makes and #models.