I have a div inside of another div. The outer div has a percentage width (80%), and I want the inner div to have 30px less width than the width of the outer div. How do I do this? I'm assuming I'll need to use javascript?
Thanks in advance.
Use margins :
<div style="width:80%;">
<div style="margin-left:15px;margin-right:15px;"> inner </div>
</div>
demonstration
#dystroy has a very good answer, though it lacks dynamic customization.
My take, use CSS variables.
You'll have to do something like this:
#parent-div
{
var-width: 100px; /* Or something else? */
//Notice that though the attribute is named var-width, the browser will
//treat it as width and will use the `var-` prefix as directive
//so that the calculations can be performed by using it as variable.
}
#child-div
{
width: calc(var(width) - 30);
}
This will make the CSS calculate the child's width.
More on this, here.
Related
This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.
Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?
See: jsfiddle for an example of how everything returns the width of the element without the shadow.
EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.
You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.
My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:
104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width
104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height
Use a shadowParent class
Here's another technique which worked well in one specific case for me:
Make a shadow parent class which affects it's height, having the same values as the shadow of the child. If you need to, make a new parent div just for this purpose. You can use CSS classes for this, for example: shadow and shadowParent.
Then whenever you need height+shadow, just get the height of the parent.
Advantages:
Less complexity in JS trying to figure out height.
You control the values in one place (wherever you define the CSS
values).
In this case, I simply set some padding on the parent, to account for the childs' shadow. Then I get the height of the parent.
/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
box-shadow: 0px 10px 10px black;
}
.shadowParent {
/* Apply matching values to some property that affects parent height. */
/* I used padding, which worked for my context. */
padding-bottom: 10px; /* Value matches shadow values. */
}
<div id="wrapper" class="shadowParent">
<div id="content" class="shadow">
Content + shadow
</div>
</div>
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
I have a container, made up of an outer div with a scrolling inner div, like so: (note this is stripped down version of what I'm actually doing)
HTML:
<div class="faq-clone">
<div class="faq-clone-content">
Some text goes here.
</div>
</div>
CSS:
.faq-clone {
overflow: auto;
}
.faq-clone-content {
overflow: auto;
width: 375px;
max-height: 400px;
}
The idea is to have .faq-clone draggable and resizable, but for resulting scrollbars to still only appear on the inner div, faq-clone-content. I'm working with an existing project, so I started just by added .draggable() in jQuery, as shown in the following fiddle:
http://jsfiddle.net/jessikwa/5LrL3/2/
Simple enough, it still functions as it should. To get the resizing I understand the CSS will need to change. I added .resizable() to .faq-clone and tweaked the CSS so that the outer container has the width/height set and overflow set to hidden, as seen in this fiddle:
http://jsfiddle.net/jessikwa/5LrL3/4/
The container resizes fine, but the inner scrollbars are lost. Changing overflow:hidden on .faq-clone doesn't seem to be the answer, but without it I gain scrollbars on the outer div, which is undesirable. Any ideas on how the CSS should be set to accomplish this?
Using jQuery to set faq-clone-content to the size of it's parent faq-clone seemed to do the trick.
$(".faq-clone-content").css('height', faqClone.height() + 'px');
See fiddle: http://jsfiddle.net/jessikwa/5LrL3/9/
<style>
.info{
width:94%;
}
</style>
Now doing like this using JQuery
$('.info').css('width');
returns 94px rather than the equivalent value in pixles (500px in my case.)
if i set the width in css as 105% , JQuery would return it as 105px .
The height and width of the parent container is 600px and 500px respectively.
I think a possible cause is the container of the element being hidden at the moment you're trying to obtain the dimensions.
I had a similar situation with nested divs and tables.
See the following fiddle where I managed to reproduce the behavior:
http://jsfiddle.net/36yvb/
I still think it's a bug in jQuery returning a percentage as an integer number (without the % sign) when not being able to actually compute the dimensions of the element.
Change the width of #another-cell (expressed in %) and see it return the same value without the % sign when the table is hidden.
Actually, it doesn't seem so: see this fiddle.
html:
<div id="info"></div>
css:
html, body {
position: relative;
width: 500px;
}
#info {
width: 94%;
}
js:
$( function() {
document.write( $('#info').css('width') );
});
what is info width relative to? is it an element with 100px width maybe?
The width that it returns depends upon what part of the HTML is it written in. Meaning to say is that if it is written inside tag then then 94% percent would reflect 94% of that particular div.
But again if another tag in the same tag is already using some amount of defined width then the info might even get lesser space if the tag in defined before the info tag.
Please give up more amount of actual code to get a better answer
The only thing that explains this behavior is that you have more than one element with the class info
When this happens and you do a $('.info').css('width'); jQuery will return to you the width of the first element in the set.
If this is the case, you may need to be more specific with your selector.
DEMO
Each broswer will return textually different, but logically equal values e.g., #FFF, #ffffff, and rgb(255,255,255) when using .css()
Instead of using .css('width') use .width()
According to jQuery: http://api.jquery.com/width/
The difference between .css(width) and .width() is that the latter
returns a unit-less pixel value (for example, 400) while the former
returns a value with units intact (for example, 400px). The .width()
method is recommended when an element's width needs to be used in a
mathematical calculation.
The width of the div "topNav" changes by few pixels when its position style is changed from relative to fixed. I found a jquery plugin (http://imakewebthings.github.com/jquery-waypoints/) which can perform the same functionality I'm looking for elegantly, but I feel it is a overkill for this purpose.
EDIT: My question is how to avoid changing the div sizes.
Check out the code at :
http://jsbin.com/azace5/edit
You need to remove the page's "default margin". This will do it in "every browser":
html, body {
margin: 0;
padding: 0
}
See: http://jsbin.com/azace5/2
Or you can add a minimum width.
min-width:600px;