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.
Related
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>
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.
I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
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;
}