We Keep Coding

Restrict the size of contenteditable

I'm building a program where you can insert copied HTML from your Webbrowser into the program and then edit it by using a contenteditable div tag, but the copied HTML overflows the div and doesn't apply the style in relative to my div but to the whole screen, is there a way to prevent that?
document.getElementById("HTMLMD").contentEditable = html;
#container-HTMLMD {
overflow: auto;
background-color: white;
height: 100vh;
width: 50%;
}
#HTMLMD {
padding: 5px;
}
<div id="container-HTMLMD">
<div id="HTMLMD" spellcheck="false"></div>
</div>
Result (the top bar should only take half of the width as the other elements):

Solution:
I inspected the html contents and saw that the overflowing items were items with position: absolute and position: fixed, I fixed the problem by first setting #HTMLMD { position: relative } which fixed the problem for the items with position: absolute, then I wrote the JS script:
let children = inner.getElementsByTagName("*");
children.forEach((e) => {
if (e.style.position === "fixed") e.style.position = "absolute";
});
which sets all items with position: fixed to position: absolute, which is definitly not an optimal solution but it works in my case.

How to keep element in viewport?

I have a html element which is displayed when a button is clicked. It‘s kinda like a popup. I want to check if it’s in the ViewPort of the browser and then place it inside the ViewPort . Is there a right way to achieve that?
At the moment I’m checking the height of the ViewPort and compare it to the point where the element will be attached to. So I do something like this:
If(window.innerHeight > yPointWhereElementIsAttachedTo + heightOfElement) //attach element;
But what is the right way to do it?

This can be achieved by using position: fixed; on an element with positioning.
For example:
.fixed {
position: fixed;
width: 300px;
height: 100px;
background: red;
left: 10px;
top: 40px;
}
.wrapper {
min-height: 4000px;
}
<div class="wrapper">
<div class="fixed">
I am fixed in the viewport
</div>
</div>

You could use scrollIntoView() if a more dynamic approach is required.
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
https://www.w3schools.com/jsref/met_element_scrollintoview.asp

Change marginLeft to child div inside a scrolling parent div

I am trying to place a position: absolute div inside a scrolling div and make it stay on the left when scrolling left or right. This is because I want the div to move like one unit (when scrolling left, right, top, bottom). It's working great on screen that lower then 2K but on HD screens (ie. 2k, 3k, 4k...) the child div is jumping around and looks bad.
Is there a better way to do it? What change should I make to the CSS for HD screens?
#parent {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
}
#child {
overflow: hidden;
width: 20%;
height: 100%;
z-index:1;
position: absolute;
}
<div id="parent">
<div id="child"></div>
</div>
$("#parent").on('scroll', function (event) {
$("#child")[0].style.marginLeft = this.scrollLeft+"px";
});

You can use jQuery's css function to set the value. And use the parent element as jQuery object to use scrollLeft() function:
$("#parent").on("scroll", function() {
$("#child").css("margin-left", $(this).scrollLeft() + "px");
});
But I would not use jQuery for this at all. Why not use a fixed position in css for this? Like in this example. It should not flicker on any screen.

jQuery: actual div width

I have two <div>, one nested into the other defined like this:
<div class="wrapper">
<div class="content">
[..] Content [..]
</div>
</div>
The css:
#div.wrapper
{
width: 660px;
overflow: hidden;
float: left;
}
#div.content
{
white-space: nowrap;
}
The effect is what i want, the content lays down horizontally within the inner but is hidden when it exceeds, (i then scroll it with jQuery).
Since I don't know the content of .content (nor it is predictable), I need to know the real width of it (defined by the content), but both .width() and .innerWidth() give me the same result that is 660 when first called (like the container div) and 660 + x when I call it after having scrolled it by setting a negative margin-left (x is the left shift set with the margin).
How to get the real, content dependent width of the element? Thanks

Divs by default take full width in their parent, so width will always be the width of the parent.
If you don't want that, you would use
#div.content
{
white-space: nowrap;
display: inline-block;
}
or possibly
#div.content
{
white-space: nowrap;
float: left;
}
as to turn the #div.content element into an inline or float element respectively, which only takes up as much space as it needs (i.e. not necessarily all the space that the parent provides). So that should work!

I wasn't sure why you used #div.* since that would mean you have an element with id div. If you mean to specify a div with a certain class, use div.class-name. Since a div resides as a child inside another div, it takes its parent's width. Setting the float to left allows it to expand outside this limit.
div.wrapper {
width: 660px;
overflow: hidden;
float: left;
}
div.content {
white-space: nowrap;
float: left;
}
Scrolling example: http://jsfiddle.net/9E8G7/6/
Here's a quick jQuery example I wrote, can be improved I'm sure. It scrolls until it reaches the end of the content.
$(document).ready(function(){
var content = $('.content');
var margin = 0;
var scrollFunc = function() {
margin--;
content.css('margin-left', margin);
var diff = content.width() - $('.wrapper').width();
if (margin > -diff) {
var scroll = setTimeout(scrollFunc, 10);
}
};
scrollFunc();
});

Did you try: jQuery.outerWidth(), I mean $(yourelement).outerWidth()?

Have you tried element.offsetWidth?

CSS absolute positioning elements inside a div

I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall. float:left property has done it for me nicely.
Now the problem is I want to add position:absolute for the toy divs to make it draggable later. How can I do this either via Javascript or via CSS?
Applying position:absolute, all toys will come to the top left corner of the wall overlying and hiding each other.
The width and height of the wall is constant but the width and height of the toys is variable, also the number of toy divs is dynamic and as the number increases toys need to arrange as rows.
Any suggessions will be helpful, please note the I can not avoid the use of position:absolute for dragging.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
body{
text-align:center;
}
.clearfix{
clear:both;
}
.wall {
border: 5px solid #cde;
margin:auto;
width:200px;
padding:10px;
}
.toy{
background-color: #BBCCEE;
border:1px solid #8899BB;
margin:5px;
width: auto;
padding:5px;
float:left;
}
.tall{
padding-top:10px;
}
</style>
<script>
$(document).ready(function() {
$('.toy').each(function(index) {
var position = $(this).offset();
var prevPosition = $(this).prev().offset();
$(this).css({
//top: position.top,
//left:position.left,
//position:'absolute',
});
});
});
</script>
<div class='wall'>
<div class='toy'>T1</div>
<div class='toy'>T2</div>
<div class='toy'>T3333333</div>
<div class='toy'>T4</div>
<div class='toy'>T5</div>
<div class='toy tall'>T6</div>
<div class='toy'>T7</div>
<div class='toy'>T8</div>
<div class='clearfix'></div>
</div>
Here is the code at JSBin.

Add
position:relative
To the wall div

I am working on a website that does exactly that (sorry for the non-english stuff):
http://moveit.canassa.com/cartao/4/
The link is now broken but here is a jsFiddle that shows what I am talking about:
http://jsfiddle.net/canassa/Z9N3L/
The "toy" div is using a position absolute:
.toy{
width: 100px;
height: 25px;
position: absolute;
z-index: 0;
}
The problem with the position absolute is that the toy will be relative to page and not the "wall" container, in order to fix that you must make the wall container relative:
#wall{
position: relative;
overflow: hidden;
}
The overflow:hidden is also a nice trick that I found. It makes the draggable objects go "under" the wall container.
There is no big secret to make it draggable, using jQuery:
// Creates a toy div inside the wall
$(MV.wallId).append('<div class="toy" id="' + this.getId() + '"></div>');
box = this.getBox(); // return the "toy" that I've just created.
$('#' + this.getId()).draggable(); // make it draggable

This would be a lot easier if you just used the jQueryUI .draggable(). It doesn't require the elements to be positioned.
If you're dead set on using this plugin, then you have the right idea. Let the elements flow into place and then calculate their position and set position: absolute and whatever the left and top end up being at runtime.
Set the .wall to be position: relative. Then:
var tPos;
$('.toy').each(function(index) {
tPos = $(this).position();
$(this).css({
left: tPos.left,
top: tPos.top
});
};
$('.toy').css({
position: absolute
});
The height of the .wall and the width of each .toy collapse when the toys are absolutely positioned but you can just add a few more lines to get/set their width and height in the above .each loops.
This obviously doesn't work if new toys can be added dynamically without a page reload as you suggest. To handle that you could switch them back to position: relative, add the new one, get the position of the new one in the flow, then set the position and switch back to position: absolute. Any elements that had been dragged out of place would be gaps in the flow, but I don't see any easy way around that.

the element in that the absolute should be positioned, must have the style position:relative.
(must be a parent of the target element)

The container div for every .toy must have position:relative set. That way, the position 0 for its children elements becomes its top left corner. Like this:
<div class="parent">
<div class="child">Blah.</div>
<div class="child">Blah.</div>
</div>
And:
.parent {
position: relative;
}
.child {
position: absolute;
left: 10px; /* This is 10 pixels from the parents left side */
top: 10px; /* This is 10 pixels from the parents top side */
}
Good luck.