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

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.

Related

background-color doesn't work on dynamically inserted element

I'am trying to set a floating div label to specific part of MathJax equation.
That's why I must insert HTML element describing label dynamically into the code, because elements in which I want to insert the code are generated in runtime.
I am able to find the part and add floating div as label, problem is that for some reason I am not able to change the background color.
I tried plenty of different ways ("Insert it in css file, have in style when element is inserted, add it later by js) and css tags ("background", "background-color"). The style appears in element
message html
but background color doesnt change
message appearence.
let els = document.getElementById("id").getElementsByClassName("mjx-mstyle")
for(let i = 0; i < els.length; i++){
if(window.getComputedStyle(els[i]).color.indexOf("rgb(206, 15, 33)") >= 0 ){
(els[i]).setAttribute("style", "color: rgb(206, 15, 33); background-color: navy; position: relative");
(els[i]).innerHTML +=
'<div id="message1" style="position: absolute; top: -10px; width: 100px; color: black; background-color: black">This is my text</div>' -;
(els[i]).setAttribute("onmouseover", "document.getElementById('message1').style.display = 'block'");
(els[i]).setAttribute("onmouseout", "document.getElementById('message1').style.display = 'none'");
}
UPDATE:
Fiddle can be found here https://jsfiddle.net/Lqn0afxm/37/ . Message is hidden under the "x". It will appear on mouseover.
Thank you for your help.
your code outer div has zero height, set height for div otherwise you can also set overflow to hidden
Solved:
The problem was, that div inherited height of 0px from some part of MathJax.
The text overflew so it was visible, but the rest of the div was invisible due to its zero volume.

Javascript height to impact content not just div

I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)

HTML / CSS inline textarea set width to same as input

I'm not sure if this is possible by CSS alone, but I'm attempting to create an inline textarea element where the text is selectable but still looks like part of a sentence. It looks fine when the number of characters are known (cols="11") by:
<p>To run nload for your device run <textarea readonly cols="11">nload p3p1</textarea> in your terminal.</p>
and the CSS:
textarea {
display: inline;
border:none;
resize: none;
}
Is there a way of doing this dynamically, without specifying the columns for each textarea in CSS? So each textarea is inline and looks unobtrusively part of a normal paragraph but selectable? Failing a CSS solution, is there a (pure) JavaScript one?
You will need to render the input text and calculate the width of the input submitted text based on that render.
A possible sollution is to copy the text into a hidden span and check it's width as illustrated:
jQuery('input').on('input', function()
{
var $this = jQuery(this);
// Create a widthSpan if we haven't already.
document.$widthSpan = document.$widthSpan || jQuery('<span style="display: none" />').appendTo(document.body);
document.$widthSpan.text($this.val());
$this.css('width', document.$widthSpan.width() + 5);
}).trigger('input');
A working fiddle: http://jsfiddle.net/687uew37/.
Do note this is an example which updates as soon as the input's content is changed. Depending on the implementation and usage if this you might need to implement changes accordingly.
You can use JavaScript to dynamically set the width of your textarea depending on the number of characters inside your textarea.
HTML:
<p>To run load for your device run <textarea class="tx" readonly>nload p3p1</textarea> in your terminal.</p>
<p>Here is another example which follows the same pattern <textarea class="tx" readonly>your textarea query you can add lots of text. </textarea>You can add a lot of other stuff after it and it will still look like part of your text.</p>
CSS:
p{
line-height:1.5em;
font-size:14px;
}
textarea {
margin-bottom:-0.3em;
border:none;
overflow:hidden;
height:14px;
display:inline;
white-space: nowrap;
}
Jquery:
$(document).ready(function(){
$('textarea').each(function(){
//Width of a character:
var chars = 8;
//Find out how many characters are in the text area:
var txLength = $(this).val().length;
//Calculate the width:
var txWidth = chars * txLength;
//Set the width:
$(this).css({'width':txWidth,'resize':'none'});
});
});
You start by taking each textarea one at the time. The idea is that you already have a font-family predefined and you know the average width of the characters in your font-family. You can find your font-family average character width online or you can estimate if you don't know it (I took a guess here).
In this case the variable chars holds the average width value of the character. You then compute the desired textarea width by multiplying the number of characters with the average character width and insert that in your CSS using jQuery's .css() function.
Working fiddle here: http://jsfiddle.net/ys2Lfrt8/5/
Drawbacks: Not responsive but can be fixed using #media-queries

"Opening"/Divinding an HTML paragraph

This question could be an interesting problem to solve…
On a web page that displays a text, I need a specific behavior : when the user clicks on some special words, an explanation of this word opens just below the clicked word. All the problem is : it should really open below the words, like "opening" the paragraph in two, without making the text that follows to jump to the next line.
I found a solution that works pretty well, using the CSS float property.
You can see it there (would speak more than the code below) : http://jsfiddle.net/3gwzx/3/
The main problem of this solution, is that it uses nested span. And, as span aren't block tags, the padding wouldn't work with them. So, inside the gray box, the text will never have any horizontal padding (vertical padding is ok) - otherwise it changes the size of the box itself - or did I missed something ? - And that's bad. Has anybody got a solution ? Should I rethink the problem in a whole other way ?
Thanks you very, very much !
Here is what the HTML looks like :
<body onload="putListeners()">
<p>This is the normal text here, you cannot click it. But some words needs long
explanations, like this one : <span class="note">click on me
<span class="noteTxt">The explanation begins here <a class="foo" href="bar.html"> and
could have link</a> that one should be able to click.
And the note can be loooong, long, long, very, very long.
</span>
</span>
And here, the text carry on. It could carry on for a long, long time.
And with all the other solutions I tried, this part of the text "jumps" after the note,
on a new line, when it appears. What I like here is that, when you open the note,
it really "open the paragraphs in two". But i cannot give a padding
to those nested span… I should have a div… but you cannot put a div
inside a span !</p>
</body>
Here is the JS
function putListeners() {
//just listens to the text…
var elements = document.getElementsByClassName("note");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", showNote, false);
}
};
function showNote()
{
//content to show
var currentTxt;
//finds the nested noteTxt
for (var i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].className == "noteTxt") {
currentTxt = this.childNodes[i];
break;
}
}
//displays it or hides it
if(currentTxt.style.display=="none" || currentTxt.style.display=="")
{
currentTxt.style.display="block";
}
else
{
currentTxt.style.display="none";
}
return true;
};
And, for information, the relevant part of the CSS (you probably figured out what it looks like - complete code in the Jfiddle) :
span.note {
position: static;
}
span.note span.noteTxt {
display: none;
float: left;
color: black;
width: 100%;
background-color: #eaeaea;
}
If you want to change the layout behavior of a tag, in your case <span> you can set css property display: block to change it to a div style layout.
span.asblock {
display: block;
}
this will give you a span that behaves like a div.

textarea immitation is not working well. any replacements?

I have this html and css: http://jsfiddle.net/b7rDL/6/
HTML:
<div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>
css:
.text-block {
resize: none;
font-size:40px;
border: none;
line-height: 1;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
min-width: 30px;
overflow: visible;
white-space: nowrap;
display: inline-block;
}
This code allows me to write text with no width limit or height limit. It displays no scroll bar and it grows with the text. Those are basically the features I need.
How can I convert this to regular textarea that will act the same? I want this to work on browser that doesn't implemented "contenteditable". Therefore I want to replace the div with textarea or other basiv element. How can I do it? (I don't mind using JavaScript).
How can I disable the spellchecker? spellcheck=false doesn't work. In the example, when I focus on the text box, I get that buggy red line. I am using Firefox.
How can I get rid of the border when I am focused? - SOLVED
I don't mind using JavaScript to solve those issues.
Any answer for those questions will help me.
Thanks
UPDATES:
#Oylex helped me with 3
#1
Working fiddle is here: http://jsfiddle.net/d9H9w/11/ (tested in IE8, Chrome and Firefox)
What you need is to set the width and height attributes as a user is typing within a text box.
Height
This is pretty straightforward:
Get the content of the textarea
Match for newline characters
Set the height to total number of newline characters(plus one for the first line and 1.5 for wiggle room) in em's.
Setting the height in em's makes this font-size agnostic, so it'll work with multiple font-sizes.
function getNewlines(){
// get the value(text) of the textarea
var content = textEl.value;
//use regex to find all the newline characters
var newLines = content.match(/\n/g);
// use the count of newlines(+1 for the first line + 1 for a buffer)
// to set the height of the textarea.
textEl.style.height = ((newLines && newLines.length || 0)+2.5)+'em';
};
Width
This is fairly easy, too, with one gotcha.
Get the content of the textarea
Split on newline characters to get an array consisting of lines of the textarea
Sort to get the longest line
Set the width to the length of the longest string in em's, multiplied by about .6(emRatio in my code), plus 2 ems for buffer space.
That last part is the kicker. The 'em' measurement is supposed to be a square representing the width and height that a single character takes up. This doesn't take kerning into account, so the height of a char is usually accurate, but the width is dependent on the chars around it. So, by guess and check, I figured that .6 em is about the average width of a character after kerning. .6 is pretty close, so I add 2 ems to the width for a bit of buffer space.
var emRatio = .6;
function longestLine(){
// get the value(text) of the textarea
var content = textEl.value;
// split on newline's. this creates an array, where each item in
// the array is the text of one line
var a = content.split('\n');
// use a sorting function to order the items in the array:
// longest string to shortest string
a.sort(function(a,b){return b.length - a.length});
// use the longest string * the emRatio to set the width
// Due to kerning, the letters aren't ever really 1em x 1em
// So I'm multiplying by an approximate ratio here (guess and check)
textEl.style.width = (a[0].length * emRatio + 2)+ 'em';
};
Existing problems with this implementation
To support resizing during long-held key presses, an onkeydown handler has to be included as well(this is not optimal for all cases that don't include long key presses)
All things considered, I think this fits what you need.
EDITS
Instead of having emRatio be .7, I changed it to .6 and added a buffer of 2 ems to the width. This addresses both issues #Naor mentioned in his comments.
I've updated the fiddle link and the Width section to reflect the changes.
EDIT 0
Request #1 Update
Working Solution: http://jsfiddle.net/7aeU2/
JQuery
$(function() {
// changes mouse cursor when highlighting loawer right of box
$("textarea").mousemove(function(e) {
var myPos = $(this).offset();
myPos.bottom = $(this).offset().top + $(this).outerHeight();
myPos.right = $(this).offset().left + $(this).outerWidth();
if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
$(this).css({ cursor: "nw-resize" });
}
else {
$(this).css({ cursor: "" });
}
})
// the following simple make the textbox "Auto-Expand" as it is typed in
.keyup(function(e) {
// the following will help the text expand as typing takes place
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
});​
Request #2 Update
Also, here's a good explanation of why you can't outright disable spell check.
This does not belong to the realm of CSS (which is optional
presentational suggestions). It is not about stylistic features of
rendering data but about processing data interactively.
On browsers that support “spell checking” (which may involve grammar
and style checks), the HTML attribute spellcheck or the corresponding
IDL (DOM) attribute, settable in JavaScript, is effective.
In practice, those browsers tend to have “spelling checking” enabled
by default for textareas only, and as textareas normally contain human
language texts, turning it off does not sound useful. It is in any
case user-controllable (the user can switch it off or select
language).
via https://stackoverflow.com/a/9209791/1085891
Request #1
Simple Solution is pretty straight forward.
Working example: http://jsfiddle.net/b7rDL/12/
JQuery
$("#Solution0").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight) {
$(this).width($(this).width()+50);
};
});
HTML
<textarea id="Solution0" rows="1" style="height: 1.2em;"></textarea>
Fancier solution that will require some updating if you want the
width, rather than the height, to expand. Still, it's pretty nice.
http://jsfiddle.net/edelman/HrnHb/
https://github.com/ultimatedelman/autogrow
Other solutions - I know these all expand height. Let me know if you need width implementation of one of the below solutions.
http://bgrins.github.com/ExpandingTextareas/
http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html
http://code.google.com/p/xautoresize-jquery/downloads/list
http://www.impressivewebs.com/textarea-auto-resize/
http://www.technoreply.com/autogrow-textarea-plugin-3-0/
Request #2
spellcheck="true" should work as described in the Mozilla docs: Controlling spell checking in HTML forms. It works for me in my first simple example running in Firefox 13.0.1. What version are you running?
for #3, the css option you are looking for is: outline: none;
I was having trouble figuring out the bounds of the textarea's content, so with this approach I'm copying the content of the textarea into a similarly styled p element, which is set to float: left; and then resizing the textarea based on the size of the p. This handles both width and height.
I've tested on Mac 10.8.1 FF 18.0, Safari 6.0, Chrome 25.0.1362.0 canary, iOS Safari 6.0.1 and iOS Simulator 5.1 (272.21). I don't have a PC or IE handy.
http://jsfiddle.net/b7rDL/34/
HTML
<textarea id="tx" class="text-block" spellcheck="false"></textarea>
<p id="dupe" class="text-block"></p>
CSS
.text-block {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
resize: none;
font-size:14px;
border: none;
line-height: 1;
min-width: 30px;
overflow: hidden;
white-space: pre;
display: block;
outline: none;
width: 30px;
height: auto;
border: 1px solid #ddd;
background-color: #f7f7f7;
}
#dupe {
float: left;
display: none;
width: auto;
height: auto;
}
I added a background and border so I could see what's going on.
JavaScript
// no `var` so they are global and easier to work
// with in the inspector when using jsFiddle
$tx = $('#tx');
$dupe = $('#dupe');
lineH = Number($tx.css('line-height').replace('px',''));
update();
$tx.on('keydown', function() {
setTimeout(update, 0);
});
$tx.on('propertychange input keyup change', update);
function update() {
$dupe.text($tx.val());
$tx.css({
width: $dupe.width() + 7,
height: $dupe.height() + lineH
});
}
// not sure if this is needed, leaving it because
// I don't have many browsers to test on
$tx.on('scroll', function() {
tx.scrollLeft = 0;
tx.scrollTop = 0;
});
I'm adding extra space on the right and at the bottom because it seems to perform more consistently that way. Also, in the HTML, the wrap="off" is necessary for the version of Firefox, I'm using.
I got some good tips from this blog post.
Request #2
Working Demo
<body spellcheck="false">
<div class="text-block" contenteditable="true">
Some Text SpellCheck</div>
Hi Naor, The only problem with this thing is it will disable the spellcheck for all the elements in the <body> tag. If it doesn't matter you then you can go with it.
Your question is really interesting and challenging really liked it. I hope this may help you..!!
Best efficient way which was worked for me while I did something very close in the past was creating hidden out of flow div with the same exactly styles as the textarea has. And than setting out the timeout to update its html source based on information from textarea. This sounds bit scary but yet, after some testing and playing around nothing was better, that was already suggested, so just my variant.
http://jsfiddle.net/f2gAD/16/
and jQuery based script:
var textarea = $('textarea'),
textBlock = $('div.text-block'),
interval, value, freq = 10,
doTextAreaAdjust = function(){
textarea.css({
height: textBlock.outerHeight(),
width: textBlock.outerWidth()
});
};
doTextAreaAdjust();
textarea
.focus(function(){
interval = window.setInterval(
function() {
value = textarea.val().replace(/(\r\n|\n|\r)/gm, '[rnnr]');
value = value.replace(/</gm, '||'); // break html tags
value = value.replace(/\[rnnr\]/gm, '<br>');
value = value + '|'; // or <span>|</span> for better pixel perfect
textBlock.html(value);
doTextAreaAdjust();
}, freq
);console.log(interval);
})
.blur(function(){
window.clearInterval(interval);
});
​
For performance wise did it as self starting/stopping timeout on focus/blur, though here is yet some workaround is required. While testing in Chrome noted that interval not properly stopped if you made blur by clicking on another tab. So probably replacement for self calling function into the setTimeout will be better.
It works more or less fine in IE 7-8 which suppose the main targets but still some text jumps time to time occur, while for others it is okay, but guess you will use editable feature for modern browsers. Would recommend use modernizer for its detection.
Working here
http://jsfiddle.net/H2GSx/
Code here:
HTML:
<div style="overflow: scroll; width: 200px; height: 100px;">
<div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>
</div>​
CSS:
.text-block {
resize: none;
font-size:40px;
border: none;
line-height: 1;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
min-width: 30px;
overflow: visible;
white-space: nowrap;
display: inline-block;
}
​

Categories