We Keep Coding

How to overlay divs on the right of each line in a textarea

I want to right-align text to each line in a textarea that a user is typing like this:
It should also support scrolling like this (see how the top is cut off when it's out of view?):
How might I go about doing that?
EDIT:
Also, any div on the right should animate on hover and when clicked, the contents should be copied to clipboard. Like so:

Just make two different text areas and put one at left and second to right. Then make them look visually like one: for left make border-right: 0; for right - border-left: 0;
For your task you could use texterea and div like that:
* {
margin: 0;
padding: 0;
}
.textarea-block {
box-sizing: border-box;
display: inline-block;
border: 1px solid #eee;
padding: 10px;
width: 400px; /* Here you could use % or wh to make it looks better in your app */
}
/* Don't forget to make a clearfix after floats */
.textarea-block:after {
content: '';
clear: both;
}
.left {
font-family: Arial;
font-size: 16px;
border: 0;
width: 50%;
}
.right {
font-family: Arial;
font-size: 16px;
display: inline-block;
text-align: right;
width: 50%;
float: right;
}
<div class="textarea-block">
<textarea name="" cols="30" rows="10" class="left">First line
Second line</textarea>
<div class="right">
First line <br>Second line
</div>
</div>
Just be sure to make the same font-size and font-family to textarea and div to make text looks same.

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!

You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>

WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.

You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ

You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.

Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}

If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Hidden div appearing and backgrounditems dissapear/unvisable

My project is a content based Website for my mother and her Children-daycare.
You can see the project on the domain: Diekleinenfreun.de
Now, as you see on the Website I have the navbar on the left.
And what I did is I used a simple javasyriptcode to make a div set to display:block; on mouseOver and none when mouseOut again.
I want to fill the div with content later. as a preview or an image or so.
My problem with this div is the alignment. As you can already see on the Page login, the div in making problems with any other content in the middle.
I first had the div set to relativ, wich solves the problem if the browserwindow's size is changed, but it pushes all other items in the middle down obviosly.
So what I need is this div not changing any other item in the middle, but rather blurring them out and laying over them if you understand what i mean.
The code I use:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<center><input onMouseOver="toggle_visibility('login');" onMouseOut="toggle_visibility('login');" type="button" class="nav_login" value="Login" /></center>
<div id='login' class='login_middle'>a</div>
.login_middle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 760px;
height: 70%;
top:243px;
position: absolute;
bottom: 0;
overflow: hidden;
border: none;
font: normal 16px/1 Georgia, serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(18,50,145,0.85);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
display:none;
}
Or the original CSS class, which messes with the items in the middle, but is resized automaticly:
.login_middle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 760px;
height: 100%;
position: relativ;
bottom: 0;
overflow: hidden;
border: none;
font: normal 16px/1 Georgia, serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(18,50,145,0.85);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
display:none;
}

If I understood your question, you are having an issue with the middle container (it's located inside a TD in your website) when it's resized.
To stop that just remove width: 760px; from the .login_middle{...} and other css classes such as .home_middle{ ...}, etc. or you could set width: 100%;.
To fix the issue of content pushing to the bottom, change/add css as below.
.table_mid{
....
position: relative;
}
and every css class you use for middle content for example, kontakt_middle
(according to your .kontakt_middle class at the time of writing, just set the position attribute)
.kontakt_middle{
.....
position: absolute;
}
Also, I noticed in other css classes you used; for example, .links_middle{} - remove top attribute and set height to 100% as you have already done to .kontakt_middle{}.
I hope this helps.

In my opinion, it would be much better if you stuck to conventional web design practice, and used a separate .html page for each page of content, instead of doing this Javascript mouseover as you are.
You could easily transform this layout into a responsive three column design template, which you could use for each page of your site. Doing it this way, your site can be displayed nicely on mobile, which is now important. As it is, display on mobile is not looking good.
Rgds

Vertical centring images with known height in div with variable height, allowing images to overflow div above and below

I am trying to find a method of vertical centring images in a div of uncertain height, allowing the images to overflow the div when their heigh is larger than the containing div's. The div contains a randomly selected slogan which can be of various different lengths (and of course if the browser window width is small it may make even a short slogan run over two lines).
I have shown the problem in a jsfiddle. I have tried every method of pure css that I can think of (including negative margins, pseudo elements and transforms), but they only seem to work when the height of the containing div can be guessed or known. That suggests that the only way to achieve what I want is using javascript (jquery?) to establish the height of the div and then use that to give the images either a negative or a positive margin, but I don't know how to achieve that.
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left"> <img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right">SLOGAN OF VARIOUS LENGTHS, SOME ONE LINE, SOME THREE OR FOUR</div>
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align:center;
display:block;
width:80%;
position:relative;
float:none;
padding:2em;
margin:0.5em auto 1em auto;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border-radius: 0.8em;
z-index:6;
}
.tsimg-left, .tsimg-right, .tsimg-centre {
display:inline-block;
padding:0 1em;
height:150px;
border-radius:50%;
}
.tsimg-left {
float: left;
}
.tsimg-right {
float: right;
}

Weirdly there is a way to achieve this.
This is probably what you need:
HTML:
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left" />
<span>SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths</span>
<img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right" />
</div>
CSS:
body {
padding-top:2em;
}
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align: center;
width: 80%;
position: relative;
margin: 2.5em auto 1em auto;
z-index: 6;
line-height: 100%;
}
.slogan img,
.slogan span {
display:inline-block;
vertical-align:middle;
}
.slogan span {
width:250px;
}
.tsimg-left, .tsimg-right {
height: 150px;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.tsimg-left {
left:5%;
}
.tsimg-right {
right:5%;
}
and Fiddle is here
I've changed markup order, and made all children of slogan to be displayed as inline-block elements. Another thing to do is to restrict width of your text inside the div, which I wrapped in span tag (I think this is valid html now). And finally used a vertical aligning method, utilizing absolute positioning, transforms and top property.
Let me know if this is what you are after.
PS. No JavaScript needed

EDIT: (Previous method didn't seem to work)
Use this:
.slogan {
display: flex;
background-color: silver;
text-align: center;
}
.slogan > p {
align-self: center;
color: red;
font-size: 22px;
font-weight: bold;
}
#pic1 {
display: inline-block;
align-self: center;
right: 0;
height: 100px;
border-radius: 50px;
margin: auto;
}
#pic2 {
align-self: center;
height: 150px;
border-radius: 750px;
margin: auto;
}
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" id="pic1"></img><p>Here goes some text!</p>
<img src="http://www.placebear.com/150/150" alt="pic 2" id="pic2"></img>
</div>