I am trying to draw a spotlight on some page elements during a user interface tutorial (see CSS3 spotlight effect using a rounded rectangle with gradients).
For example, here's the navbar:
and spotlighted (rest of the page is dimmed out):
However, one of the elements on my page is giving me trouble. Here's it's positioning in Chrome:
However, jQuery thinks it is 330px by 60px:
> var blah = $('.user-list')
[
<div class="well well-skinny user-list">…</div>
]
> blah.height()
60
> blah.width()
330
This results in a spotlight that is too small when it is drawn:
The weird thing is, there are lots of other elements on the page (like the navbar) whose sizes are calculated correctly, and the spotlight shows them properly.
What is up with this element that causes jQuery to show an incorrect height and width? Some additional information:
The entire page is on border-box sizing except for input elements, which don't play well with bootstrap.
There is 9px padding on all sides with a 1px border, which makes up for the size discrepancy, however there are many other elements with border/padding where the size calculation works properly, and this is the only element that is weird. For example, the bootstrap navbar shown above has 20px of padding on the left and right sides, but the width is calculated correctly.
Width is poorly explained in many places, however, it is more properly defined as the width of the "context box". More information, here.
A css width of an element is (according to box-sizing css property)
if(it is border-box)
css width = element content width + padding + border
if ( it is padding-box)
css width = element content width + padding
If(It is content-box , which is by default)
css width = element content width
and so for height
jQuery .width() always give the element content width.
If you want elements width and height with padding you can use .innerWidth() and innerHeight() method.
If you want include border size than use .outerWidth() and .outerHeight()
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
What I have is a div with some items (menu item), this div will be the height of the browser viewer and I would like the spacing between the <p> to fill the height of the div.
So for a 1024px screen sixe, 20 px spacing is fine between paragraph, but sometimes it better to be 17px and for some big screen, 22 px should be fine.
Do you have a javascript function to auto calculate this or a jQuery plugin ?
there is a newish css module called flexbox. check this out.
basically set the container height to 100%, and set the elements each to flex:1 1 auto.
play around with that URL too
more info:
here is a jsfiddle. it's rudimentary but demonstrates the basic idea. just set the height of .flex-container to 100% when you put it in on your page. (i have the fiddle set to 400px because 100% doesn't grab the result-frame height in a jsfiddle.)
the CSS looks daunting because a lot has to be vendor-prefixed but it's actually quite simple.
If I understand you correctly, you are looking to modify the margin of p tags based on height of parent div - maybe something like this would help
MAX = 200;
if ($('div').height() > MAX) {
$('p').attr('style', 'margin:10px 0 10px 0;')
} else {
$('p').attr('style', 'margin:0 0 0 0;')
}
I'm trying to force text to fill a div, while div height and width and unknown. The text size should be flexible, depending on parent. I want to archieve something like this:
The page is mobile only, so I need to support all android/iphone browsers. The main problem is that each mobile browser support different things and it's hard to get such thing working on most* devices.
I tried setting meta viewport width="640" - it's working well on the newest major browser but all lower browser have their own realisation and it's breaking.
The next thing which came to my mind is using viewport units, but their support is bad too (http://caniuse.com/viewport-units)
I came up with the following code for the font-size:
var ratio = parent.offsetWidth * 85/100 / text.offsetWidth - 0.3;
text.style.fontSize = (10 * ratio > 85 ? 85 : 10 * ratio) + "px";
but still it's not that precise and vectical centering is still a mistery.
Maybe setting font-size dynamically is the right way to achieve this. But rather than width, you can consider using height as ratio. So calculating div's height is probably ineluctable.
For vertical alignment, there are several solutions:
Wrap text in a span. And set the span's display to inline-block. Add to the span a pseudo element of which the height is 100%. Set vertical-align: middleto both span and pseudo element, as described here. Make sure that you set the parent div's height, using Javascript if necessary.
Set the line-height to the same as the div's height.
Set both parent div and children span's height, and display: block; margin: auto
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
I am using the following jQuery to work out the width of a div (thats in %), to then tell another div to set it's height to that in pixels.
<script>
$("#top").height($("#left").width());
$("#bottom").height($("#left").width());
</script>
It's working really well. Now my next problem is, that I want my div called 'wrapper' to have a padding-top or margin-top of the pixel value it returns for the height. I tried changing 'height' to 'padding-top', but that didn't seem to work.
The end result is a web page with a series of 4 black div acting as a border around the edge, it calculates 5% of the with of the window, and that determine's the pixel value for how how the top and bottom black div's are. That way it's exactly even. Now I want my inside wrapper div, to start exactly that far down the web page too.
Use the jQuery outerWidth function to retrieve the width inclusive of padding, borders and optionally margin as well (if you send true as the only argument to the outerWidth method).
Tested Solution: Find height of a div and use it as margin top of another div.
$('.topmargindiv').css('margin-top', function() {
return $('.divheight').height();
});