How to set relative 50% 50% position using JS?
I tried:
document.getElementById("id").style.position = "relative 50% 50%";
but it don't seems to work...
You have to set them individually.
I made a variable to point to the style object, because we are modifying more than one property and because with() { ... } is considered harmful.
Also, I set the 50% to both properties because of right to left assignment, and because assignment of this string to the two properties isn't a problem (make sure you understand how this works, e.g. var a = b = [] will set a and b to the same Array object, often not desired).
var elementStyle = document.getElementById("id").style;
elementStyle.position = "relative";
elementStyle.top = elementStyle.left = "50%";
jsFiddle.
I do the following to center an element in its parent - which could be the body or another division.
document.getElementById("elementId").style.marginLeft = "auto";
document.getElementById("elementId").style.marginRight= "auto";
The position property determines how the element is placed in relation to the other elements on the page.
I just did a search to see if the position property can take values like the 50% you show in your question - it can't.
I checked to make sure something new had been added to CSS that allowed setting position to something other than those I show below. I thought that maybe I was wrong about the values that position can take (and do anything -- you can always code any values for various properties, than they are intended to have, but they won't do anything). I see nothing that says position can have values like 50% and actually do something.
The possible values of the position property are:
relative
fixed
absolute
static
inherit
or you can leave it off the element. From what I've seen position: static behaves the same as if you had not coded the position property for the element or class.
Go read about position here
The position property can be confusing until you see the effects of the different values on the position of the element - and even then it is not always clear.
By the way - you can also change style.left and style.top but they will have no effect unless position is set to one of the possible values.
I know that sounds strange but it is how things currently work (and I doubt it will ever be changed) and we have to live with.
So, if you set the top and/or left and nothing happens, look at the position properties value,
You can "play" with property values with the "Inspect Element" facility of your browser. I think all of the major browsers have such a facility. Go read this page about "inspecting"
It allows you to change CSS properties, delete, and add new ones, to the elements as you look at the page in your browser. You can do such things as changing the margin-left to auto and the margin-right to auto and see how the element is positioned. You can change, add, or delete any CSS properties you want.
You can also change the position to one of it several values (static, relative, absolute, or fixed) to see how the element is display in relationship to the other elements on the page.
If you want to remove a property you can highlight its value and press delete and enter - that will remove the property from the element or class, if you are looking at class CSS.
This facility allows you to play "what if" with any element's properties without actually changing the HTML or CSS and reloading the page.
I strongly suggest that you have a pencil and pad of paper and make notes every time you change anything, If you don't you may wind up getting things the way you want them and not be able to remember everything that you changed.
Notes are very important!
To recap - to center an element within its parent, code the what follows - replaced elementid with the id of your element.
document.getElementById("elementId").style.marginLeft = "auto";
document.getElementById("elementId").style.marginRight= "auto";
As for the position value, try them all out with the element inspector in your browser. That is a quick way to begin to understand the effects of the possible values of the position property.
Related
How do I know which cursor style the browser sets for a particular element when using the "cursor: auto" CSS value?
I would like to know what "auto" evaluates to for a certain element when hovering that element.
element.style.cursor just returns "auto", while I would like to know the evaluated value ("text", "pointer"...) when hovering the element.
In a mouseover listener:
let cursorStyle = window.getComputedStyle(e.target, null).cursor;
console.log(cursorStyle); // outputs "auto", not "text" when hovering a div / p with text
I guess you have no chance at all. According to spec, the default CSS value for cursor is auto (see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) that means the browser takes it on his own.
Your script is working well and gives you the right answer (the value of cursor style property). In auto mode, the browser logically do not update the property (well, auto is staying auto, not changing every time).
Maybe there's some hacks to guess the cursor based on the hovered object but it will be quite painful to implement.
I'm retrieving text from ajax which feeds a tile whose content changes every 5 seconds. The tile's height is variable so I need to get the offset between the text and another element to set the correct height for the text. (let's say it's like a tile that feeds from Facebook statuses and I have to make sure it doesn't come on top of an absolute-positioned element at the bottom.
Here, the codepen example: http://codepen.io/anon/pen/kFsif (test in webkit, open the console)
What happens is that, as the element is being transformed, sometimes I get a different offset (should always be the same), ranging (in this example) from 62.1875 to even 47.24595642089844. 5 pixels are a lot in my case.
My question is: Is there a way to obtain the offset().top (or it could also be the position().top) of an element that is being transformed so that it gives me always a consistent result?
Thanks in advance.
Edit:
This is an example of how the final markup looks like: http://jsfiddle.net/n3KvJ/
Imagine what I'm trying to do is to set .medium height so that it doesn't touch .bottom. Problem is: .tile height is variable and the position I'm getting changes during a transform.
My first idea was to see if there's some sort of background-position-x property in CSS, but apparently not. See:
Is background-position-x (background-position-y) a standard W3C CSS property?
Is it possible with javascript to somehow change x position of a background, but leave the y as whatever it was before?
I have three elements, each one using sprites for backgrounds. The hover state will change for each of them, but I would like to know if I can use JS to change the clicked state by changing only the X background position. Each element's background inside the sprite has a corresponding state for clicked, and the new X value of the position will be the same for all three elements. However, their Y values are different, and I need to leave each Y value as whatever it currently is.
I could just create a line of jQuery for each element, and give the specific new X and Y coordinates, without too much work, but it's still extra code and a mere work around for my innitial idea.
Hopefully this is clear enough.
You can do background-position: Xpx Ypx, so you can adjust JUST the X value and leave the Y value alone.
You can also do this in pure CSS, just by using :hover and :active pseudo classes.
There actually IS a background-position-x and background-position-y, however it isn't supported in FireFox :/
How can I get the height at which an element was rendered, after I have changed it's height?
E.g. the text make a very long (high) div, then I shorten it to make it look neat and I use overflow:hidden to temporarily cut off excess text. Now, dynamically, I want to resize the div to be as high as it would have been if I never touched it.
How is this possible to do?
CSS & JQuery is welcome.
Thanks
Grab that value prior to the re-size.
You can then save it, and use it, in two different ways:
// grab it as a JS value and keep it stored somewhere
var originalHeight = element.height();
// grab and store the original value in the rel HTML attribute
el.attr("rel", el.height()
I am currently trying to modify a Javascript function that "slides in" a <div>. The script as it is requires you to define the height of the div, so it is mostly useless in dynamically filled <div>s. I found some text on the clientHeight property in javascript, but it would appear that it doesn't support <div>s with display set to none (which is the method used to slide the div in). That makes sense, as the height of that div in the client window is nothing.
Basically I was wondering what other methods you all know of, or if there's a way to get around the clientHeight = 0 when display: none.
Thanks!
Oh, and here's the function I'm using:
function getDivHeight(objName) {
return boxHeight = document.getElementById(objName).clientHeight;
}
A simple solution is to set it's visibility to "hidden" and it's display to "block" and measure it. However, some modern browsers will manage to update the page layout during this short time and you will get a nasty flicker. The easiest way to overcome this is to place the element in an absolutely positioned container with overflow set to "hidden".
I've had luck cloning the element, moving it offscreen, then displaying it to get the client height:
var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item); // item already hidden, so it won't show yet.
// you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;
EDIT: Looking through the jQuery code, they do exactly what Tsvetomir Tsonev suggests. jQuery temporarily sets the style to "display: block; position: absolute; visibility: none", and then measures the height, swapping the properties back after the measurement.
So, it looks like you're stuck with having to do something hackish, whether it's cloning the node or risking having it flicker in some browsers... I like Tsvetomir's suggestion better than my initial hack as it, at least, doesn't involve cloning a node into the DOM that you don't need. Either way, the element must not be set to "display: none" in order to measure it's height. Isn't the DOM wonderful? :-)
EDIT 2: Also worth noting that, after jQuery gathers the height, it adds allowances for padding, margin and border sizes, so you may need to as well.
Yes, an element that is not displayed on the page has no dimensions.
It kind of makes sense. Consider an element that has been created and filled with a bunch of text, but not yet added to the document tree. How high is it? Depends on font-size. How big is font-size? Depends where in the document that div is inserted; its parent font-size would inherit through.
Similarly for an element with “display: none”. It's not rendered, so it has no dimensions. Couldn't we ask “how high would this be if it were ‘display: block’”? Turns out no, because if it were displayed, that in itself could change the dimensions of its parent block, and then the dimension of displayed elements would be inconsistent with the dimensions of non-displayed elements!
The typical solution is to unset “display: none”, measure the height of the element, and then immediately re-set “display: none”. The browser won't redraw in the middle of a bit of JavaScript, so you won't see a flicker on the page.
I nkow you guys solved this a long time ago but I thought I should share this since it quite tricky to get the height of a hidden div tag.
heres what I did after reading your post,
I placed the div i want to slide inside a 1px height div with overflow set to hidden.
you dont even need to set the display of the inner div to none since it is already there and if you use offsetHeight it should return the proper height for all browsers and you can use that height to slide your div up an down.
PEACE!!!
In IE you could try scrollHeight, but I'm not sure if it will work or if it is cross browser.