Javascript DOM - aligning a text element to the center? - javascript

I have a text node attached to a div that I want to position in the middle of the page. These elements are attached to a mainDiv which is like the whole page. Here's the code I'm trying:
title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem
mainDiv.appendChild(title);
Unfortunately the title stays on the top left of the page; I want it top centered.
EDIT - just to clarify, I would like to do this within Javascript if possible.
Thanks for any help.

Just from what you've posted, we can't give you a definitive answer.
We need to take into consideration what's defined in your CSS and also the parents of the DIV you're inserting.
Setting the left and right margins to auto, for instance, won't work for a div that doesn't have a defined width, and setting text-align to be center won't work as expected for a div whose width has been constrained.
Here's some example code that definitely works, anyway:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem
document.getElementById("div1").appendChild(title);
}
</script>
</head>
<body>
<div id="div1">This is some text.</div>
<br />
<button type="button" onclick="displayResult()">Align text</button>
</body>
</html>

try setting the left and right margins to 'auto'

Related

What's the right way to run a javascript function without getting the object to "jump" right after the page loads

I have simple page with an object that gets a "top" property from the javascript.
How do I run the function without getting things on my page to "jump" ?
<script type="text/javascript">
function changeHeight () {
//Gets height
var h = window.innerHeight;
//alert(h);
console.log(h);
var categories = document.getElementById("cat").offsetHeight;
//alert(categories);
var x = 0.32 * categories;
var catTop = h - x;
//Gets cats
document.getElementById("cat").style.top = catTop+"px";
}
</script>
</head>
<body onload="changeHeight()" onresize="changeHeight()">
<div class="main">
<div class="cat" id="cat"></div>
</div>
</body>
</html>
I used "onload" on the tag to run the function. Which I know that's not so good.
The object jumps because you move it after the DOM has been rendered. That's what onload does: Make sure the DOM is complete and all loading/rendering has happened.
There are two solutions:
Put the script element after the node.
Use CSS to position the element
The first solution looks like this:
<div class="main">
<div class="cat" id="cat"></div>
<script>...</script>
</div>
At the time when the script is executed, the necessary DOM nodes are there. Unless your layout is complex, the offsets should be correct at this time. Note that many browsers start rendering while the page is loading. So there still might be a jump but less often, depending on the complexity of the page, browser optimizations, etc.
The second solution is to wrap your element in a container where you set the margin/padding until the cat element is naturally positioned correctly. The 0.32 would be translated to 32%. You need another element around it which has the correct height but which isn't visible.
To final solution should give body height: 100%, then add two containers inside. One for the content and the other to position the cat element. You will need to play with position style. Then
#cat { top: 32% }
should do the trick.

Div width Javascript

Is there a way to get the entire width of a div including margins without using JQuery?
div.outerWidth
doesn't seem to work and clientWidth excludes margins.
As far as I recall, there is no single property value to get this.
Basically you need to get the margin width (left and right) and add them to your existing dimensions. Additionally, unless you are using box-sizing (By default you are not) you will need to add padding left and right as well.
You can use getComputedStyle to get the actual values you require. For example:
window.getComputedStyle(element, null).getPropertyValue("margin-left");
Edit:
I forgot border :P.... left and right border width as well...
Please have a look below code, there is being alert total width of div 220 including margin.
<style>
#myDiv{
width:200px;
height:200px;
margin:10px;
}
</style>
<div id='myDiv'>
</div>
<script>
var div = document.getElementById('myDiv');
var style = window.getComputedStyle(div);
var leftMargin = parseInt(style.marginLeft.match(/\d+/));
var rightMargin = parseInt(style.marginRight.match(/\d+/));
alert(div.clientWidth + leftMargin + rightMargin);
</script>

dynamically adjusting div height to keep footer at bottom if content doesn't fill window

I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:
<div class="header></div>
<script>
var h = window.innerHeight-205;
document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
....content of container....
</div>
<div class="footer"></div>
but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}
and
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}
I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...
Any help will be appreciated!
Try using a css aproach, like the one outlined here: http://www.cssstickyfooter.com/

Relation between div position and DOCTYPE's effects

I have a div element that I'm trying, basically, to move wherever the user clicks on a canvas element.
I have a CSS style for the div setting the position to absolute, with an initial position (top,left).
I have javascript that captures the user's click event, and sets the div element's left and top to the location of the click, and set the text of the div.
My problem is that this worked fine before I set a DOCTYPE on the html file. Now the div stays in the same place, while displaying the new text, and I'm assuming the position issue is something to do with how I'm using CSS.
What's the right way to set the position of a div element? The html goes more or less like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#myDiv{
position:absolute;
top:100px;
left:835px;
}
</style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>
Here's what the javascript looks like, which locates the div for me:
var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position
Before setting a DOCTYPE, this worked beautifully on Chrome, Firefox, Safari mobile, and Opera. With it set, I can render to the canvas in IE9, but then the positioning of the div in all the browser stops working - just stays in the initial position.
I figured out my problem. My javascript for setting the new position went like this:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)
This worked fine before I was using the doctype, because apparently the browser was fine with me just giving a number, but I had to change the code to this, and it works:
var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px';
theDiv.style.top = selShp.piny.toString() + 'px';
Stupid, rookie mistake, I guess. My understanding of the solution is, standard HTML requires you to set the left and top as strings, with units specified.
The real problem begins with not using a doctype. A doctype is required of all modern web pages to keep the browser out of 'quirks mode'. In that case, the box model is different than it should be using current web standards. You should read about quirks on Wikipedia or Google for it.

Put the bar of the scroll bar on the bottom

I want a css attribute or sort of thing that puts the bar of a scroll bar on the bottom, euh, a div with fix height and width, shows a text, but the text is too big and wrapped into this div, so a scroll bar appears but the bar is in the top, I want it to appears on the bottom, did you understand me? if so, please just say how.
Regards.
If you can use Javascript, I found this handy little snippet: http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html So, you'd have a div object somewhere on your page and have it call your scroll to bottom function onload:
<html>
<head>
...
<script>
function scroll_to_bottom(){
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
...
</head>
<body>
...
<div id="divExample" onload="scroll_to_bottom();"></div>
...
</body>
</html>
Now, I'm not sure if that is browser specific or not, but give it a shot and see what happens. Let me know if it works or if you have problems.
UPDATE: It looks like all browsers support scrollTop, and all but the earlier versions of IE support scrollHeight. http://www.quirksmode.org/dom/w3c_cssom.html#elementview

Categories