Center div inside a parent div using JavaScript - javascript

I want to center a div inside a parent div. The only way I can do it is by using margin-left property. The formula is:
margin-left = (parent.width/2) - (child.width/2)
but I can't get it done via JavaScript because of two things:
The width isn't defined in the style thus cannot be accessed via document.getElementById("child").style.width
document.getElementById("child").offsetWidth doesn't give the proper and the correct width for unknown reasons
I am using this code, but as said above, it doesn't work
<script type="text/javascript">
document.getElementById("fb_share").style.marginLeft = parseInt((document.getElementById("vss_border").offsetWidth / 2) - (document.getElementById("fb_share").offsetWidth / 2)) + "px";
</script>
If there is any other solution via CSS (but it must be margin-left and no width change) please tell.

Since you said JavaScript, I can't avoid mentioning jQuery's position function:
$("#myDiv").position({
my: "center",
at: "center",
of: $('#parent')
});

I found your problem. The child width is set to 691px, so once it tries to center the fb_share div it only sets it by a few pixels.
All you have to do is set the style, e.g:
<div id="fb_share" style="width:150px;">
Breakdown
Nothing wrong with your javascript.
The child is almost the same width as the parent, causing a minimum center.
Set the child width correct and all should be working fine

This is actually a quite common question. The problem is exacerbated by the fact that different browsers understand the stuff differently. The easiest thing is actually non-CSS:
<div id="parent" style="width:100%">
<div align="center">
your own stuff
</div>
</div>
However if you need to do this in pure CSS, then the answer will be something like this:
In your CSS:
div.parent {
text-align: center;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
text-align: left;
}
div.child {
text-align: left;
}
Then, in your HTML, you'd have something like this:
<div class="parent">
<div id="wrapper">
<div class="child">
Your stuff here
</div>
</div>
</div>
I used this (second) approach to centre the entire page content within the browser window (in my case, instead of the first div, I had <body>. If you want to see where I used this, have a look at http://www.ooklnet.com/

Related

Javascript attempt to keep sidebar at 100vh at all times

Working on a project requiring old-school CSS support and want to keep <aside> filling up the page by remaining the same height as the <article> element's box (It may be between a header and footer, in which case it would not extend past them.)
<article id="article">
...
<aside id="sidebar">
Here's my attempt at dynamically setting the height. It doesn't seem to work.
<script>
function sidebarHeight() {
sidebar=window.document.getElementById('sidebar')
article=window.document.getElementById('article')
sidebar.style.height=article.style.height;
console.log('article.style.height: ' + article.style.height);
}
window.onresize=sidebarHeight;
</script>
This doesn't work because article.style.height always has the value "" instead of the current height. How can I keep the sidebar stretched vertically in sync with the article height?
By the way, can someone explain why the only way to get at properties like height, or at least color, which I know works, requires a call to getElementById()? If I use the more logical-sounding getElementsByTagName('article') I get access to a much more limited set of properties.
To get the calculated height onresize you need to use .offsetHeight and you need to add a unit to the returned value.
sidebar.style.height = `${article.offsetHeight}px`;
also, your DOM queries should just be called on document
sidebar = document.getElementById('sidebar')
article = document.getElementById('article')
article {
float: left;
height: 40vh;
width: 75vw;
background-color: gray;
}
aside {
float: right;
width: 20vw;
background-color: tomato;
}
<article id="article"></article>
<aside id="sidebar"></aside>
<script>
function sidebarHeight() {
sidebar= document.getElementById('sidebar')
article= document.getElementById('article')
sidebar.style.height= `${article.offsetHeight}px`;
}
window.onresize=sidebarHeight;
</script>

z-index of Bootstrap3 Tooltip in columns is Browser specific

Using bootstrap 3 I've got two columns (sm-3 and sm-9). The left column is position: fixed and contains a link with a tooltip. The z-index of the tooltip (without being specified) seems to be browser specific.
What is (in general) the best way to define the z-index of the tooltip? I'm looking for a clean solution that works in all common browsers.
FIDDLE
Internet Explorer 11 (left) Chrome 48 / Edge 25 (right)
HTML:
<div class="container">
<div class="col-sm-3" id="left">
<a id="tooltipButton" href="#" data-toggle="tooltip" title='Long Text'>Show Tooltip</a>
</div>
<div class="col-sm-9 col-sm-offset-3" id="right">
Content
</div>
</div>
CSS:
#left { position: fixed; }
#right { background-color: #ddd; }
JS:
$('#tooltipButton').tooltip({
trigger: 'click',
html: true,
placement: 'right',
});
A few things I've tried (CSS):
.tooltip { z-index: 10; } // Doesn't work
.tooltip .tooltip.in { z-index: 10; } // Doesn't work
.tooltip .tooltip-inner { z-index: 10; } // Doesn't work
Is there a clean solution without adding more divs and without changing the attributes of the left or right div? E.g. #left { z-index: 10; } seems to work but changes the attributes and the overlapping behavior of the left div.
FIDDLE
If you give an element a position other than static it forces it to appear above any element that is still static. It's a rather unknown behavior of z-index. Therefore if a parent element has a position other than static all it's children will have their own stacking scope. It works almost like layers.
This article has an amazing write up about it: What no-one told you about z-index
So in your example all the tooptip code is appearing in the container that has it's own stacking scope and is therefore forced under the next container. If you add z-index:999; to the #left container you will see it is fixed. This is because that container (and it's contents) are now forced higher than the next.
JSFIDDLE
The other thing you could do is remove position:relative from the #right container so it doesn't have it's own stacking scope and then it works again.
JSFIDDLE v2
I don't think this helps much with your problem as I don't think you can hack you way out of it. It is much more common practice that tooltip code is injected into the bottom of the page so that it naturally stacks above everything else.

Possible to remove padding on higher order element from lower order element?

Bit of a weird question and this is very hacky, but I am stumped. I am using an internal tool to create a webpage. As such, I only have access to some of the generated HTML and CSS due to the nature of these tools.
So, forced upon me is the HTML
<div class="example">
<div class="whatICanAccess">
</div>
</div>
And my CSS :
.example {
padding : 1.6em;
}
The only place I can edit my CSS is within the "WhatICanAccess" HTML tag, using style="foo".
Is it possible for me to remove the padding from the outer element ("example") here in any way?
Is it possible for me to remove the padding from the outer element and ONLY have it effect the direct parent of "WhatICanAccess"?
Example is a class that is used throughout the code, and I would only like to remove it in one particular place - but as I say, I cannot add more specific identifiers/tags - I can only edit in this one place.
Can anyone help? Thank you :)
UPDATE :
I now have this HTML :
<div class="example">
<div class="moreSpecific" style=" padding: -1.8em;>
</div>
</div>
but the 1.6em of .example is still overriding. What have I done wrong here ?
Give the 1 place a separate class and give it negative margins to balance the padding.
Alternatively, use position: absolute & use width and height values.
With either you don't have to worry about not having access to the parent element.
Tried to make a JSFiddle, but apparently they've removed the "save" option for the time being ...
<div class="example">
<div class="whatICanAccess">
<div class="noPadding">This div has negative margins and absolute positioning</div>
<div>This div inherits its padding from 'example'</div>
</div>
</div>
.example {
padding : 1.6em;
height: 400px;
width 100%;
background-color: #ccc;
}
.whatICanAccess {
height: 300px;
background-color: #fff;
}
.noPadding {
position: absolute;
margin: -1.6em 0 0 0;
background-color: #eee;
}
If you must use inline CSS...
<div style="margin: -1.6em 0 0 0; position: absolute;">This div has negative margins and absolute positioning</div>
If you know the id of example, you could just use document.getElementById('example').style.padding='0px';
Giving your html a negative margin or padding might work too.

How to arrange and style child columns of dynamic height and width such that the parent element has the right dimensions, without using tables?

Sorry, I know that title isn't very parseable (or even complete). This should do better than words:
Note that x and y are dynamic heights based on the contents of those children, and there is no guarantee that one will be larger than the other.
I don't want to use tables and I don't want to rely on CSS3 (for solutions like calc.) I think this means that one of the two columns must be taken out of the "static" layout, because of the dynamic width requirement. And because of that, I think that means there is no way, outside of Javascript, to size the parent container to the max of its children columns' heights.
I hope someone proves me wrong, because I'd love to do this in CSS. Thank you, wonderful SO community!
Demo
<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
</div>
#wrapper, #main{
overflow: hidden;
}
#sidebar{
float: left;
width: 100px;
}

Show div with jQuery. css question

I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.

Categories

Resources