We Keep Coding

2 Newline Characters if There is an Empty Line in Textarea

I'm trying to get the number of lines that a textarea has for a line counter (for a text editor), but if there is an emtpy line in the textarea, there are two new lines added. Here is the output:
["// Hello World!","","","The line above was empty","","","Same here!","The line on the bottom of this one is empty!","",""]
My code:
function getLines() {
var textValue = document.querySelector('#editor').value;
var lines = textValue.split("\n");
console.log(lines);
}
At someone's request, here is the HTML:
<div id="visible" contenteditable="true"
onkeyup="updateLineCount()">// Hello World!</div>
<textarea id="code-editor">
Basically I plan on adding syntax highlighting, so the div is content editable, and the JS sends the stuff in the div to the textarea, just to calculate the lines of code. Here is the JS that does this:
textarea.value = document.querySelector("#code-editor").innerText;

The issue you are running into has to do with pulling the innerText value of your contenteditable div and placing it into a <textarea>. This is where the extra newline characters \n are coming from.
Unless you are required to use the <textarea> I would just get the line count from the contenteditable div directly. The only weird quirk here is that there is an extra newline character \n added to the very end of the innerText, but this can just be removed using .split(0, -1).
const updateLineCount = () => {
document.querySelector(".lines").innerHTML = [...Array(document.querySelector("#code-editor").innerText.slice(0, -1).split("\n").length).keys()].map(v => v+1).join("<br>")
}
document.querySelector("#code-editor").addEventListener("keyup", updateLineCount)
.code {
padding: .2em .4em;
border: 1px solid #CCC;
box-sizing: border-box;
display: inline-block;
}
.lines {
color: #555;
font-family: monospace;
width: 2em;
vertical-align: top;
border-right: 1px solid #CCC;
display: inline-block;
}
#code-editor {
font-family: monospace;
width: 40em;
vertical-align: top;
display: inline-block;
}
#code-editor:focus { outline: none; }
<div class="code">
<div class="lines">1</div>
<div id="code-editor" contenteditable="true">// Hello World!</div>
</div>

Click on input field triggers window resize

I have a header with logo, menu and search. When I'm on desktop I have all elements shown in that order, but if my window width is less than 980px, the menu hides (get's a toggle), and the logo is detached from the nav and attached after the logo. If the width is greater the logo is again detached and attached to the old place in the DOM.
$(window).on('resize', function() {
if ($(window).width() < 980) {
$('#search-container').detach().insertAfter('#logo');
} else {
$('#search-container').detach().insertAfter('#main_menu');
}
});
#logo {
display: block;
margin: 10px auto 15px;
text-align: center;
}
#search-container {
display: inline-block;
vertical-align: top;
margin-top: 8px;
background: #fff;
border-radius: 5px;
padding: 1px 10px;
}
#search-container .header_search {
display: inline-block;
line-height: 6px;
}
#search-container input {
border: 0;
background-color: transparent;
font-style: italic;
color: rgb(114, 114, 114);
color: rgba(114, 114, 114, 0.5);
font-size: 14px;
line-height: 25px;
font-weight: 400;
text-align: left;
display: inline-block;
vertical-align: top;
width: auto;
}
#search-container input:active,
#search-container input:focus {
outline: none;
border: 0;
}
#search-container .submit {
display: inline-block;
margin-left: 10px;
cursor: pointer;
z-index: 10;
}
#search-container .submit i {
color: #d3031c;
font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>
<div class="menu_wrapper">
<nav>
<ul id="main_menu" class="">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<div id="search-container" class="search-box-wrapper hide">
<div class="header_search">
<form name="search" id="search" method="get" action="#">
<input name="s" type="text" placeholder="Search" value="Search">
<a class="submit"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</nav>
</div>
Now the issue happens on mobile phones (and from the feedback, only on Android), when you tap on the input field to enter the search query, resize is being activated, and the search container detaches and attaches itself in the same space. And I have no idea why this happens. When I comment the part of the jquery code with the resize, I can type in the input field without the problem.
Why is resize being triggered on click? I checked the media queries, and I am not expanding the element in any way.

I still have no idea why this happens (the resize), but I found a solution:
I am turning off the window resize on $('#search-container') click event:
$('#search-container').on('click', function(){
$(window).off('resize');
});
Stops the window from resizing (which was causing the issue), and you can type on android with ease now :)

This is happening because the soft keyboard opens when the input element is clicked. Apparently resize triggers on a multitude of events, as described here: https://www.quirksmode.org/dom/events/resize_mobile.html.
Your solution works, but you could also use this approach, i.e.
$(window).on('resize', function(){
// If the current active element is a text input, we can assume the soft keyboard is visible.
if( $(document.activeElement).prop('type') !== 'text') {
if ($(window).width() < 980) {
$('#search-container').detach().insertAfter('#logo');
} else {
$('#search-container').detach().insertAfter('#main_menu');
}
}
}

It took me a while to realize that the mobile keyboard was triggering a resize event. I found out just by commenting out the resize functionality. I have two search inputs on the page and funny enough this problem happens to only one input, the one that I was moving in to a side menu on resize.
So what worked for me was to create a global boolean that would be true if my input was clicked. Then in my resize function i check if my boolean is true and if it is I force focus the input, if it is not then I execute the resize logic.
var isClicked = false;
function resize(){
if(isClicked){
$('#search-input').focus().select();
}else{
//resize logic
}
}
document.addEventListener("DOMContentLoaded", function(event) {
$('#search-input').click(function(){
isClicked = true;
});
resize();
});

On iphones, if the font-size of input-field is less than 16px, the 'ios' auto zooms the page. Set the font-size of input-field to 16px to tackle this problem.

Why does the javascript css style works for first condition but not for second?

I have a progress bar that should react to input if the input is blank or equals 0 the inner progress div should have no background. For all other inputs it should be fill. It does work for the condition that the input is blank however after the input is entered there is no change reflected.
var first = document.getElementById("first");
if (a.innerHTML == '') {
first.style.background = "none";
} else {
first.style.background = "#e91b23";
}
.progress_bars_vertical_holder {
display: inline-block;
width: 100%;
position: relative;
}
.progress_bars_vertical {
display: inline-block;
position: relative;
float: left;
margin: 0px 2% 0px 0px;
}
.progress_bars_vertical:last-child {
margin: 0px;
}
.progress_bars_vertical .progress_content_outer {
height: 200px;
position: relative;
}
<input id="a" onkeypress="return tisNumberKey(event)" type="text" style="height: 250px; margin-top: 10px; width: 75%; text-align: center; font-size: 100px;" type="text" data-in="" />
<div class="progress_bars_vertical_holder vertical">
<div class="progress_bars_vertical background_color" style="width: 99.7%;">
<div class="progress_content_outer">
<div data-percentage="30" id="first" class="progress_content" style="height: 50%; background-color: rgb(22, 146, 159);"></div>
</div>
</div>
</div>
http://codepen.io/georgiemathews/pen/mJGBOV

It should be:
first.style.background = "#e91b23";
^---
The # marks that string as a hex value. Otherwise it's just seen as some random garbage.

You had a few typos. I grabbed a copy of your CodePen demo and here is a working version you can play with.
HTML
I got it working and the red progress bar is added when you type into the box. But, when you clear the input range, the indicator stayed red because it was simply looking for a keypress. I changed it to oninput to get the desired behavior.
You also had a typo in your function - it said tisNumberKey - changed to isNumberKey.
<input id="a" oninput="return isNumberKey(event)" type="text" style="height: 250px; margin-top: 10px; width: 75%; text-align: center; font-size: 100px;" type="text" data-in="" />
JavaScript
You weren't calling the function with anything. The HTML was trying to call the script, but there was no named function. Adding function isNumberKey(event) to the script allows it to run when you type in the input range.
Finally, I changed the logic for adding the class. If the field is not empty, make it red. Ran more consistently with the other changes. Working script is below:
function isNumberKey(){
var first = document.getElementById("first");
var a = document.getElementById("a");
if (a.value !== '') {
first.setAttribute("class", "red-bg");
} else {
first.setAttribute("class", "no-bg");
}
}

Show element based on URL

I am working on one task where I need to hide an element and redirect it to another URL when user click on a div.
If user directly go to that URL then it should not hide element as it has not clicked yet.
I have manage to do FIRST point.
Element will be on both pages.
My logic is here but it is not working:
flag = false;
$(document).ready(function() {
$("div.main").click(function() {
flag==true;
$(".notired").hide();
});
if ((document.location.href.indexOf("xyz") > 0) && (flag==true))
$(".notired").hide();
});
HTML:
<div class="main">
<a href="xyz.com" title="Click here">
<img src="../images/notif.png">
</a>
<span class="notired">';
echo $count;
echo '
</span>
</div>
CSS:
.notired
{
display: inline-block;
background: #E43C03;
text-align: center;
color: #FFF;
font-size: 12px;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
width: 14px;
z-index: 1;
margin-left:-9px;
}
.main
{
width:50px;
}
Looking for the solution.

Make sure your element is hidden by default, then:
check if the current URL matches the one you need
if it does, then do nothing as you want to keep it hidden
if it doesn't then show it
and if i understood correctly you need always to hide on the click function, then simply put the .hide() inside the event handler
$(document).ready(function() {
if(window.location.hash) {
// The URL contains the hash sent when clicked on button
$(".notired").hide();
}
});
and here
<a href="xyz.com#clicked" title="Click here">

How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?

I am looking for a way to have a div appear after the user clicks a hyperlink, and then have that same div disappear when the user clicks it again. Currently, the user is only able to have the div appear when the hyperlink is pressed, but when you click the hyperlink again, the div remains in it's "display: block;" state. Here is what I mean:
HTML
<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>
<div id="About">
</div>
CSS
#ShowAboutButton {
text-align: center;
margin-top: 40px;
background-color: white;
border: none;
cursor: pointer;
font-family: "Lato Light";
font-size: 22px;
}
#About {
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: gray;
display: none;
transition: height 2s;
}
Javascript
function showDiv() {
document.getElementById('About').style.display = "block";
}
If it is at all possible, can someone please show me how to give the user the ability to click the hyperlink and have the div slide in with a transition effect, and then when the hyperlink is clicked again have it slide back out with a transition effect? Any help would be much appreciated! Thank you in advance!

You can do this very easily with jquery slideToggle:
$("#ShowAboutButton").click(function(){
$("#About").slideToggle();
});
JSFIDDLE

$('#ShowAboutButton').click(function() {
$('#About').toggle();
});

Vanilla JavaScript :
var about = document.getElementById('About');
about.style.display='none';
document.getElementById('ShowAboutButton').addEventListener('click', function() {
//Toggling
if(about.style.display != 'block') {
return about.style.display='block';
}
about.style.display = 'none';
});

OOPS. Missed top of your code.
<a onclick="showDiv(document.getElementById('About'))" id="ShowAboutButton">What's This?
<div id="About">
</div>
function showDiv(obj) {
if(obj.style.display == "block"){
obj.style.display='none'
}
else(obj.style.display == "none"){
obj.style.display='block'
}
}