Floating pane not obeying absolute position relative to parent - javascript

I want this floating pane to be initially positioned 40px from the top of the parents position. The current result (shown in the JSFiddle) is top:140px instead of the intended top:40px.
<body class="tundra">
<div style="height:100px;background-color:blue;"></div>
<div style="position:relative;">
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
</div>
</body>
require(["dojox/layout/FloatingPane", "dojo/domReady!"], function(FloatingPane) {
var floatingPane1 = new FloatingPane({
class: "paneClass"
}, document.getElementById("simplepane1"));
floatingPane1.startup();
});
.paneClass{
position:absolute;
top:40px;
left:40px;
width:200px;
height:300px;
}
http://jsfiddle.net/9qqtbe4y/4/
You can see how the red div positions correctly relative to the parent but the floatingPane does not.

Parents position of the floating pane is 100px down from top (this 100px is the height of first div inside class "tundra"). So when it gets instruction of adding 40px more, it moves total 140px from top.
rewriting the HTML code as below, will solve the issue. the change is to set 1st div's position to relative
<div style="height:100px;background-color:blue;position:relative;"></div>
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
require(["dojox/layout/FloatingPane", "dojo/domReady!"],
function(FloatingPane) {
var floatingPane1 = new FloatingPane({
class: "paneClass"
}, document.getElementById("simplepane1"));
floatingPane1.startup();
});
.paneClass{
position:absolute;
top:140px;
left:40px;
width:200px;
height:300px;
}

This happens because the floating pane is built as an absolutely positioned element and it's styles are also meant to match that. So when setting 40px from the top of the relative box, it actually adds 100 based on it's parent. Depending on what you're trying to do with this, I would recommend not putting the floating pane inside a div that has an inherent top value. If you don't want the floating pane to ever overlap with the top bar, you can look into constraining it inside a box. Here (not mine) is an example that does just that.
If you don't want care about that, then simply removing the position: relative from the containing div and changing the default style of the floating div to be top: 140px; will also work.

Related

Keep static HTML Element center on screen (under another scrollable div) by Javascript

I have three div a, b, c, all of them have "position: static" in there style (which is the default value for CSS position). They are all under the parent div, which is scrollable (CSS: "overflow-y: scroll").
<div id="parent-div">
<div id="div-a">...</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">...</div>
</div>
Div-a's height constantly change (for example, there are new children divs constantly appended under div-a). Normally, when div-a's height increase, div-b will be scrolled down.
I want to always keep the div-b at the center of the screen, no matter how div-a change in height
Is this possible in Javascript (or CSS, or both) ?
PS: I don't wanna use the CSS "position: fixed/sticky" because it's not possible in my project.
It's practically impossible to answer your question, because you haven't added enough detail to your question. How is div-b in the center of the screen at the minute, because what you've posted doesn't seem to illustrate how it would be positioned there. Anyway, I've somewhat guessed at your setup. If you don't want to use sticky or fixed, you are left with the only remaining potential solution, to set the parent to relative, and use position absolute to position the div.
#parent-div {
overflow-y: scroll;
position:relative;
}
#div-a {
height: 400px;
border:1px solid green;
}
#div-b {
position:absolute;
top:0;
}
#div-c {
position:static;
}
<div id="parent-div">
<div id="div-a">div a</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">div c</div>
</div>

Image not moving when style.top is changed

When I execute that style.top statement, the image doesn't want to change 600 px from the top.
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
From my understanding, that should work. I don't know what's going on.
In a nutshell, how can I change the position of an image with JavaScript?
There's the position absolute thing, but not sure.
The top, right, bottom, and left properties specify the position of positioned elements. -positionMDN
Your image element is not positioned, and as a result using top, right, bottom, or left will have no effect. In order to position an element without altering the flow of the document (which using fixed or absolute will do) you can use position: relative; and it will remain in the document flow while now being considered "positioned".
document.getElementById("testing").onclick = function(event){
document.getElementById("image").width=400;
document.getElementById("image").style.top = "600px";
}
#testing{
color:blue;
}
#image{
position: relative; /* <- positioning */
}
<p id="testing">
aewrfafffffffffffffffacvfav
</p>
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>
What Is Positioning?
By default, elements flow one after another in the same order as they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default flow model for HTML layout doesn't allow a high level of control over the placement of elements on the page. By applying a small set of CSS attributes to the elements that are defined for the page, CSS can control the precise position of elements by giving exact coordinates. -About Element PositioningMSDN
The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.
The top, right, bottom, and left properties specify the position of positioned elements.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position
An example where the image is positioned relative to the container and the top property is changed after clicking the paragraph:
document.getElementById("testing").onclick = function(event) {
document.getElementById("image").style.top = "100px";
}
.container {
position: relative;
}
img {
position: absolute;
width: 400px;
}
<div class="container">
<p id="testing">aewrfafffffffffffffffacvfav</p>
<img id="image" src="http://lorempixel.com/g/400/200/" />
</div>

background color disappears when overflow is visible

I have the following CSS code written;
#container {
width: 1300px;
background-color:green;
margin:0 auto;
overflow:hidden;
}
#menu {
float:left;
width:20%;
background-color: yellow;
}
After searching google for a long time I couldn't find an explaination why the container background color is disappearing when the container overflow attribute is visible.
Can someone help me understand why ?
Update:
Thanks alot for your answers.... :)
I don't mind using overflow:hidden, ijust want to understand its purpose and how to use it.
As i unserstand, the overflow property specifies what happens if content overflows an element's box, so i dont understand why would its visibilty make the container background color disappear or why would it change the container height.
Since the elements within the container are have float:left - the container had a height of 0 - which is also what is causing you not to see any background.
In order to fix this there are a few solutions out there:
One of them is called clearfix
<div id="container" class="clearfix">
<!-- floated elements here -->
</div>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Another is by setting overflow:hidden on the container element - this establishes a new block formatting context - which in effect clears the floats. (See this post)
From the spec:
Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible' (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box
itself may become narrower due to the floats).
This is because of the floating child element. If your container only contains floated elements, its height will be equal to zero.
You need to include a clear element, different possibilities exists:
The Empty Div Method: By adding a <div style="clear: both;"></div> as latest child element.
The Overflow Method: By setting an overflow: hidden on the container element
The Easy Clearing Method: By adding extra CSS and a class on the parent element (clearfix')
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
It is happening because you have not given any height to #menu.
As, #container has height of #menu, background is not visible.
Give some height to it.
#menu {
float:left;
width:20%;
background-color: yellow;
height:50px;
}
DEMO here.
You can set the height of the container div to be equal with the height of the menu. This way you don't need the overflow: hidden setting.
$("#container").height($("#menu").height());
Demo here: http://jsfiddle.net/er144/ZV6pb/

Placing a label on runtime

I am placing a label on run time after a div element. Placed it using z-index, but the position of the label is seemed to be fixed, even though i mention as absolute. It is getting moved when i scroll it.Could anyone suggest.
$("#button").after($('<span id=label> Testing </span>'))
CSS:
#label
{
position:absolute;
top:20px;
left:200px;
Z-index:1;
}
According to W3C:
The absolute position is "with respect to the box's containing block", meaning that it scrolls with its container. So if I have
<body>
...
<p style="position: absolute">STUFF!</p>
...
</body>
then it will scroll relative to body.
The fixed position scrolls "with respect to the viewport and does not move when scrolled." It scrolls relative to the viewport, or browser window. So if I have
<body>
...
<p style="position: fixed">STUFF!</p>
...
</body>
then when I scroll, the text will stay put, relative to my browser window.

Prevent scrollbar with MarginLeft style change?

I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?
The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}

Categories

Resources