Develop Reference

Overlapping Masonry with 100% height item

I'm trying to build a layout with a 100% height section - the twist is that this is a Masonry layout, and the first Masonry item is the 100% height/width of the page on load (& responsive).
Following the 100% height item, I want to have 'regular' masonry (columns, rows, etc. etc.)
The problem I'm having is that the first item .grid-item grid-item--feature is overlapping with the other items. I've had this before with ImagesLoaded, but never with an 'empty' grid.
I'm picking this back up after a month and probably overlooking something really simple but I've put together a little JS Fiddle here. How can I fix this issue?

Try this code :
.grid-item-feature { position: relative; height: 100vh;}
See this fiddle
Explanation of the use of vh :
With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects
1/100th the width of the viewport. To make an element the full height
of the viewport, for example, you'd set it to height:100vh.

Vectical align text, while it should fill the div on mobile

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

jQuery underestimates the width and height of some elements on a page

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()

% based height, turned dynamicly into pixels

I am looking for an easy way to do the following:
I am building a website, and i have a .content class and its height is = height:auto; and its width = width:80%;
but i do not want the div to become "TOO" bit vertically, when i am scaling it.
Question:
Is there a javascript 'if' statement that checks for the height of a div, and then is able to put overflow-y:scroll; on the element if it gets too big, say 400px vertically?
Note that, the div has no height in the css. It is set to auto.
thx

If you don't want to do it via CSS, then the jQuery functions you're looking for are:
$("#element").outerHeight() and $("#element").outerWidth()
They return the computed height and width of elements, rather than the height and width that was explicitly set.
So,
if ($("#element").outerWidth() > 400) {
$("#element").width(400);
$("#element").css('overflow-y', 'scroll');
}

If you are going the jQuery way, adding to #ieeehh, first include jQuery. Then assuming the element has the id of #element
$(function(){
if ($("#element").outerHeight() > 400) {
$("#element").width(400).css('overflow-y', 'scroll');
}
});

Set an element height via CSS or JavaScript/JQuery

This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)

Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference

Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.

In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).

In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432