We Keep Coding

How to change text to invisible, but still show underline?

I made a studying tool using Javascript and PHP. There's a toggle that shows/hides keywords in a paragraph, so the user can mentally "fill in the blanks".
How I've done this so far is that the all the keywords are underlined, and I use a DOM selector to select all innerHTML in u tags.
<p>
Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
}
</script>
This works as intended - the "keywords" are blanked out and the flow of the document is unaffected, since the keywords still take up the same space that they would normally take.
One downside is that in paragraphs with particularly long "keywords", the paragraph's line structure is disrupted and it looks like text is just floating randomly in space. This would be fixable if I could somehow change visibility such that the words in the keywords are hidden and the text-decoration (underline) still shows. This retains the line structure.
I thought about using Javascript to replace every character in the keyword with underscores, but two more problems pop up. One thing is that even if the number of characters stay the same, the width might change.. For example, "apple" is not the same physical length as "______". This is not ideal as the document flow would change. A second problem is that I can't think of any way to get the keywords back after converting them into underscores.
One workaround is instead of changing the visibility to "hidden", I could change the background-color to the same color as the text. This blocks out the text, but the line structure and document flow are both preserved. However, I do hope to find a way to implement my original idea, so any suggestion is appreciated!
Update: I would prefer not to add any additional divs to the keywords. The user can add new entries using a rich text editor, so declaring a keyword is as easy as underlining it in the text editor.

You can do it with css adding a pseudo-element and instead of using visibility hidden, using color: transparent, like this:
u{
position:relative;
}
u::after{
content: ' ';
display:block;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:1px;
background-color:#000;
}
And in the script
<script>
function hideKeywords() {
var x = Array.from(document.getElementsByTagName('u'));
for (var i = 0; i < x.length; i++) {
x[i].style.color = "transparent";
}
}
</script>
https://codepen.io/anon/pen/ROoMaM

I would probably implement this using your second method. Set the text colour to the same as the background then add a bottom border to the element. Preserves the spacing and allows you to quickly check if you are right by just highlighting the line. Also, if you give the keyword wrapper element a class you can easily just toggle the color of the hidden text, and retain the underlines so you can see what has changed.
div {
color: black;
}
span {
color: white;
text-decoration: none;
border-bottom: 2px solid green;
}
<div>
This <span>is hidden</span> with an underline
</div>

You'd have to find some way to get the div positioned under the hidden text, but you can use the following code to create a div with the width of the text. I might come back later after answering and find a way to position the div.
In your HTML, let's say you have a phrase, foo bar, that you want hidden. You will assign an id to it with the code: <p id="foo">foo bar</p>
Here is the CSS:
#foo {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
Then in your Javascript, you can use the following code:
var fontSize = 20; //this defines a font size
var foo = document.getElementById("foo");
foo.style.fontSize = fontSize; //this sets the style as the font size
var width = (foo.clientWidth) + "px"
var div = document.createElement("div");
div.style.width = width;
div.style.height = 2px;
div.style.background = "red"; //makes the underline visible
document.getElementById("main").appendChild(div);
From here, you could probably just reposition the div how you want so it appears under the text. This way, the div is the exact length of the text.
An alternative solution would be to use a monospace font and then manually calculuate the width.

Get DOM element's in-flow position

alert("Wrong (red): " + document.getElementById("target").getBoundingClientRect().top);
alert("Correct (blue): " + document.getElementById("wrapper").getBoundingClientRect().top);
#target {
transform: translate(20px, -20px) rotateZ(20deg);
background: red;
width: 50px;
height: 50px;
}
#wrapper {
background: blue;
display: inline-block;
}
Text
<div id="wrapper">
<div id="target">
</div>
</div>
further text
In the example above, the blue square has the exact position, the red one would have, if it had no transform. It has also exactly the space and position that the red square consumes, as an in-flow element. The position I want to get in JavaScript is the position of the blue square. My only problem is, that in my original code, there is no #wrapper and I am not able to create one. So how do I get the in-flow position of an element that might or might not be on that position (due to transform, position: relative; or others - if there are)?
Plain JS or jQuery solutions are both welcome. But I search for a rather simple/short solution, not some 50+ lines monster.
My attempts:
jQuery('#target').offset(): Takes transform into account (returns some negative number in the above example).
document.getElementById('target').getBoundingClientRect(): Same as jQuery's offset
jQuery('#target').position() with traversing through offsetParent: Might currently work, but jQuery's behavior in this regard is considered a bug or at least subject to coming changes, according to this site (if I interpret that site correctly).

Use WebKitCSSMatrix
var node = document.getElementById("target");
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
console.log(node.offsetLeft + curTransform.m41); //real offset left
console.log(node.offsetTop + curTransform.m42); //real offset top
Browser Compatibility :
Check this answer to know how to handle browsers that isn't support WebKitCSSMatrix

IE 10 does not re-apply padding on text-inputs

I have an IE 10 specific issue concerning text-inputs and padding that gives me a lot of headache. Here's a textual description of the setup and of what is happening but there is also a running example here:
https://jsfiddle.net/41nq3pt1/5/
I've omitted the CSS below, because it's a bit larger, please look at the JSFiddle. Help is really appreciated and I'm not only looking for a solution but also for an explanation why IE 10 is behaving weird.
Description
This is the HTML structure of my input element:
<div class="input">
<label class="input__label" for="input">Floating label</label>
<input class="input__input" type="text" id="input">
</div>
Initial State: In the initial state of the input field, there is an absolutely positioned label centered in the vertical middle of the input. This is done by giving it a padding-top. The padding of the input itself is adjusted so that the blinking cursor appears on the same height as the label.
Input has content: When typing something in the field, the label is moved upwards by reducing its padding-top while simultaneously increasing the input's padding-top to move it downward a little. Alternating the padding is done by adding a class via Javascript:
// jQuery 1.12.4
$('.input__input').on('keyup input', function() {
if (!$(this).val() || $(this).val() == "") {
$(this).closest('.input').removeClass('input--has-content');
} else {
$(this).closest('.input').addClass('input--has-content');
}
});
After deleting content: When the input is found to be empty, the class that alters the padding is removed and the input should be in its initial state. Now, despite working in all current browsers even down to IE 8 (I didn't test older versions), IE 10 apparently does not change the padding of the input element back, see this screenshot: IE 10 vs. other browsers after step 4.
Steps to reproduce
Click into the input field, see the cursor blinking on the same line as the label
Type something, the label should move upwards, the cursor moves slightly downwards
Remove every input by hitting backspace
The label moves down again and the cursor should blink on the same line as in step 1.
Thanks for any help!

Thanks to Marks comment, I experimented a bit with line-heights and eventually came to a solution that doesn't rely on line-heights but solves the problem by using a transparent border.
Solution: https://jsfiddle.net/41nq3pt1/16/
Instead of increasing the padding-top of the input when it has content, I set the height from 5rem to 4rem and give it a transparent border-top. This seems to work in all major browsers (tested in IE 9, 10, 11, Edge and the current Chrome, Firefox, Safari). Here is the important code block with annotations:
.input__input {
width: 15rem;
height: 5rem; // set a fixed height
padding-left: 1rem; // removed padding-top
font-size: 1rem;
font-family: inherit;
border: 0;
outline: 1px solid #ccc;
}
.input--has-content .input__input {
border-top: 1rem solid transparent; // replaced padding-top
height: 4rem; // keep total height at 5rem
}
I would still like to know why the original version didn't work in IE 10 but – oh well – I'm happy that I've found a fix that isn't too hacky.

Unexpected behavior when trying to center element of dynamic width horizontally using outerWidth() and $(window).resize()

Edit 1 (reduced the problem to a jsfiddle):
I removed some unnecessary detail of the original problem.
I am trying to center a popup in the window. Because of how it will be used in the original context, the popup's width will be dynamic. Its only contents will be text, but it won't be known how long that text will be. In most cases it will fit on one line, but if the text is longer and the user has a lower screen resolution, it may need to occupy 2 lines, and I would like to keep all the text on the screen. The text is static in the jsfiddle, so that is obviously not what is causing the issue. I'm just clarifying in case anyone is wondering why I haven't tried setting a width for the popup. I'm using jquery to get the width using outerWidth() and $(window).resize() to trigger the centering function when the browser window is resized.
It works fine as long as the popup's width is smaller than the element containing it. I would like for the popup to just take the full width of its container if it is made small enough that the text has to go to two lines. As you will see in the video below, if you make a large adjustment in the browser window size, the width isn't always being reported correctly, which is causing the element to have a space on the left side instead of being centered. In other words, outerWidth() is reporting a width different than what is being rendered by the browser.
See this video for a demonstration of the problem: http://youtu.be/Tnq6nrrDKvw
This is happening for me in Firefox, Chrome, IE, Opera, and Safari. Perhaps it is a problem with jquery's outerWidth function. Or perhaps I don't understand something about how it is supposed to work. Is there another method to accomplish what I'm trying to do?
Here is the javascript, nothing too complicated:
function center_horizontally(id)
{
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $(id).outerWidth();
var new_left = Math.max(0, windowWidth/2 - popupWidth / 2);
...
$(id).css('left', new_left + 'px');
}
$(function(){
$(window).resize(function() {
center_horizontally('#popup');
});
center_horizontally('#popup');
});
The only important css is that the popup has position: fixed and no set width or height. If I set the width of the popup, it sticks along the left side like it should, but the text extends beyond the right boundary. I would like to keep all the text on the screen and have it take the full width and jump some text down to the next line if needed. When the width gets low enough for that to happen, I just want the notice to occupy the entire width of the viewing area.
http://jsfiddle.net/dnag/qHjVG/5/
Edit 2 (the solution):
This is the solution I ended up using thanks to the help I got.
http://jsfiddle.net/dnag/qHjVG/44/
Instead of repositioning the popups, the popups are left with an auto width and display: inline-block. They are contained inside a div with fixed positioning. When the window is resized, the containing div is resized and repositioned. You can specify how much horiziontal space you want outside of the popups when the windows is reduced by changing the number in the function. There might be a way to do this with css only, but I'm just happy to have something functional at the moment.

So I might be misunderstanding but you don't need JS at all for this effect. This seems like a case of beating the sh!t out of something with a JS-hammer instead of using some CSS-fu. I've included two examples in my HTML below one with just a single line of text, one with more than that (3 lines when I plugged it into the fiddle)
I don't have a damn fiddle account so here is the pertinent pieces from your fiddle:
1) no JS needed. (especially not things like outerwidth et al which can cause unnecessary reflows/repaints.
2) HTML
<div id="popup">
This is some sample text, just a little bit of sample text.
</div>
<div id="popup" style="top:120px;">
This is some sample text, just a little bit of sample text.
This is some sample This is some sample text, just a little bit of sample text.
This is some sample This is some sample text, just a little bit of sample text.
This is some sample
</div>
3) CSS
#popup {
background: #FFF;
position: fixed;
top: 50px;
left: 0;
border: 1px solid #000;
box-shadow: 0 0 3px #CCC;
padding: 10px;
width:auto;
max-width:100%;
}
--EDIT-- ALT version centered like the top of the question implies:
HTML
<div id="popupWrapper">
<div id="popup">
This is some sample text, just a little bit of sample text. little bit
</div>
<div id="popup">
This is some sample text, just a little bit of sample text. little bit of s little bit of s little bit of s
</div>
<div id="popup" style="top:120px;">
This is some sample text, just a little bit of sample text.
This is some sample This is some sample text, just a little bit of sample text.
This is some sample This is some sample text, just a little bit of sample text.
This is some sample
</div>
</div>
CSS
#popupWrapper {
width: 100%;
text-align:center;
position:absolute;
}
#popup {
background: #FFF;
top: 50px;
border: 1px solid #000;
box-shadow: 0 0 3px #CCC;
padding: 10px;
max-width:100%;
display: inline-block;
}

Making a DOS-style window in ASP.net

I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?

Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)

I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });

I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}