CSS absolute positioning elements inside a div - javascript

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.

Related

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.

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.

Clipping a site display with an overlay div in a given viewport

I am querying how it is possible to have a site, for arguments sake StackOverflow, where an overlay div can hide all of the content apart from what is inside the div. I suppose like a camera, you can only see whats in the viewfinder, not outside of it. I want for the moment for the viewfinder to be fixed.
I found: Fiddle
which is close, but not quite. I have tried to google and ask friend devs but no luck in the resource department. Anyone got any ideas to get me started?
<html>
<div class="content">
<h1>All the page content divs</h1>
</div>
<div id="viewport-window"></div>
</html>
You can do this by applying a clip-path style to the main element you want the overlay to be over (for instance body if you want the whole page). You could possibly also use clip for more browser support, but do keep in mind it is being deprecated.
Demo
Has a static clip-path, but when moving mouse around it will change to a 200x200 viewport that follows the mouse
jQuery(document).mousemove(function(e){
var width = jQuery(document).width();
var height = jQuery(document.body).height();
var viewW = 200;
var viewH = 200;
var top = e.pageY - (viewH/2);
var right = (width-e.pageX) - (viewW/2);
var bottom = (height-e.pageY) - (viewH/2);
var left = e.pageX - (viewW/2);
var style = "inset("+top+"px "+right+"px "+bottom+"px "+left+"px)";
jQuery(document.body).css({
"-webkit-clip-path":style,
"-moz-clip-path":style,
"clip-path":style
});
});
body {
-webkit-clip-path:inset(20px 200px 200px 40px);
-moz-clip-path:inset(20px 200px 200px 40px);
clip-path:inset(20px 200px 200px 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://placekitten.com/g/500/500" />
Actually, you can do this without an "overlay" element.
Just use a giant box-shadow and a high z-index.
In this example I've used a :hover and the 'overlay` is slightly transparent.
.wrapper {
width: 80%;
margin: auto;
text-align: center;
}
.box {
width: 100px;
height: 100px;
margin: 1em;
display: inline-block;
vertical-align: top;
background: plum;
position: relative;
}
.box:hover {
box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.75);
z-index: 9999;
}
<div class="wrapper">
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
</div>
Of course, this effect is purely visual the other elements are still accessible.
You can also do that in 2 steps for example:
First, create a div to overlay entire page and hide everything.
Second, create a clone of your div(to be shown) with absolute position which has the same coordinates of the original location, and increase its z-index.
So, the logic is to hide everyting and show what you want over it. You could also visualize it with css or jquery animations.

Fully cover an overflow div with another div

This is a hard one to explain so bear with me (or just skip straight to the jsfiddle)
I have a Div with a max-height defined and overlow-x set to scroll. Within this Div there are a bunch of list items (in this instance, addresses). Naturally there can be many of these and they can overflow, which works fine. What I want is a 'cover' div that indicates that this panel is disabled. I have done this by putting an absolutely positioned div within the main div, like so.
<div style="max-height:150px;overflow:auto;position:relative">
<ul>
<li>Church Walk, Access To Foxholes Farm, DT2 9HG
</li>
<li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
</li>
<li>Little Bride, Access To Foxholes Farm, DT2 9HG
</li>
...etc
</ul>
<div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
This then appears when the user does something, overlaying the content and making it appear disabled. Great! The problem occurs when my list items overflow. When the overlay div appears it only covers the current visible portion of the parent div, meaning that if I scroll down the div it appears 'uncovered' as the cover div only spans the height of the parent, not including its overflow.
This is really hard to explain so please go to my jsfiddle and click one of the addresses. You'll see that the div gets covered. If you then scroll down that div you will see that the items at the bottom of the list are uncovered.
This also works in reverse so if you click the 'Hide the overlay div' button to get rid of the cover and then click one of the addresses at the bottom of the list, you'll see that the 'cover' still only covers the top part of the div.
Any ideas on how you go about making that cover div extend the entire height of its parent, including the overflow? Other alternative solutions are welcomed and encouraged. Bear in mind that I don't necessarily need the 'Searching' text that gets overlaid on top, just the 'cover' would be enough.
3 divs instead of 2 works well:
http://jsfiddle.net/JhGCn/2/
html:
<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
<div id="insideDiv">
<ul ...
</ul>
<div id="overlayDiv" style="display:none;">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
</div>
css:
#insideDiv {
width: 100%;
height: 100%;
position: relative;
}
#overlayDiv {
background-color: white;
position: absolute;
top: 0px;
opacity: 0.8;
height: 100%;
width: 100%;
}
this works fine too:
http://jsfiddle.net/JhGCn/3/
var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
height += $(this).height();
$('#overlayDiv').css("height", height + "px");
etc..
I would take the overlay out of the parent, set a z-index and position it over the address picker with negative margin.
http://jsfiddle.net/JhGCn/1/
#overlayDiv{
background-color: white;
opacity: 0.8;
height: 100%;
width:100%;
position:absolute;
z-index:9999;
margin-top:-150px;
height:150px;
}
This a pattern I've seen before as well: http://jsfiddle.net/6oa6grn9/
#overlayDiv {
background-color: white;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}

Centering a label

I have a div with some text inside and absolute position. I can set the left or the right, but is there a way to set the center, so Div's text would expand in both directions.
So far I could only think about creating exstremly long div and centering text inside.
If your div is positioned absolutely, you can simply set it's left property so that it's centered.
Example:
HTML:
<div class="outer">
<div class="inner">Some text...</div>
</div>
CSS:
.outer {
position: relative;
width: 900px;
}
.inner {
position: absolute;
width: 500px;
top: 0;
left: 200px;
}
If you don't know the width of the inner element, you'll have to rely on javascript.
Here's an example using jQuery:
var $el = $('.inner');
$el.css('left',
( $el.parent().width() - $el.width() ) / 2
);
and here's the fiddle: http://jsfiddle.net/aa93G/ . Play around with the text inside .inner, and you'll see that the text stays centered.
to centralize inner text and inline elements use text-align: center in the parent element.
If you're dealing with block elements, you should use margin: auto in the element itself. but you must first set a width for the element, otherwise it will just occupy the whole width of the parent.

Categories