We Keep Coding

What does the jQuery scrollTop value mean?

I'm working on some jquery code using the scrollTop method to implement an infinite scroll (please, don't suggest jQuery plugins, I know they exist) and I don't quite understand what this value means.
Given this fiddle: https://jsfiddle.net/ve8s5fdx/
<div id="outter">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div id="scroll"></div>
#outter {
height: 100px;
width: 100%;
overflow-y:auto;
}
.inner {
height: 150px;
width: 50%;
border: dashed black 2px;
background-color: grey;
}
It makes sense that the value is 0 when the scrollbar is at the very top of the element, but why "208" when it's at the bottom ? The #outter div is 100px high, its content a bit more than 300px.

What #Rory McCrossan said.
If you scrolled down 100px, the .scrollTop will display 100.
The scrollTop will measure the space between the window and the element. So it doesn't matter how high your element is, it will always be the space above it that counts.
Since your .inner is missing the css-rule box-sizing: border-box; the border will be added outside the div, and it's 2px wide. Which in your case means that every .inner element is 154px high. You have 2 of those, so the content of .outer is 308px.
Your .outer-element is 100px high so 100px will always be visible. So when your window is scrolled to the very bottom, the scrollTop displays 308px - 100px = 208px.
If you change your .outer to the height of 50px, the scrollTop will display 258px when scrolled to the bottom.

$.scrollTop:
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.
Inspecting your fiddle, you can see that your two .inners have a combined height of 308 px. Your outer (scrolling) div is 100 px tall.
So your .scrollTop(), the number of pixels that are hidden from view above the scrollable area is total inner height - visible height, or 208 px.

Stacked divs equaling one height

Looking for a solution where I can change the height of a div based on the total height of three divs (One of which is variable based on content).
The Green Div will change height based on content. The yellow divs don't. I would like the height of the blue div to change based on the total height of the three left divs. I'm trying to get the top and bottom of all the divs to match up.
Jquery is a good option for my site, I'm just not sure how I would set this up.
Thanks for any help.

Play resizing the textarea:
http://jsfiddle.net/coma/dxpB2/
div.box {
position: relative;
padding: 0 110px 0 0;
}
div.fixed {
height: 50px;
background-color: #FFF601;
}
div.variable {
margin: 10px 0;
background-color: #00FF0D;
}
div.lateral {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100px;
background-color: #9699FF;
}

Firstly to add jquery you can just add this line to your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Or you can download the actual file and reference it correctly.
Now you are saying the green div will adjust based on content. After you set the content inside the div you should be setting the blue divs height.
$("#blue").height($("#yellow1").height() + $("#green").height() + $("#yellow2").height());

I can think of two and a half pure CSS solutions.
First solution requires to wrap all four div's in a container element with position: relative set to it.
Then the blue div can be positioned absolutely and forced to inherit the containers/wrappers height (which comes from the total height of the yellow and green div's) like so:
position: absolute;
top: 0;
right: 0;
bottom: 0;
The width of the blue div can be set explicitly, or with left, depending on how responsive the layout needs to be. And the horizontal space taken up by the blue div can be compensated on the wrapper with padding-right.
But no-one really wants extra DOM elements to achieve proper layout, do they.
Another option would be to set position: relative on the green div and place the blue div as a child of the green div in the DOM. Then position the blue div so:
position: absolute;
left: 100%;
top: -x; /* Whatever is the height of the top yellow div and margin between*/
bottom: x; /* Whatever is the height of the bottom yellow div and margin between */
width: x; /* Set explicitly for example */
This is possible due to the fact that yellow div's are of fixed height.
And extending it further, the entire blue div can be accomplished by the ::after pseudo element on the green div (same CSS applies as for the second solution), but it's suitability depends on what the contents of the blue div need to be.

I created a JS fiddle for the problem: http://jsfiddle.net/GgPJq/
Every time you click on the Green Text it doubles.
This gets you to where you need to be
jQuery(".blue").css("height", jQuery("#left").outerHeight());
Basically every time green expands the line above changes the style to match.

How do I fit custom size icons into jQuery UI buttons?

I'm trying to create jQuery UI buttons with custom icons, of different sizes from the standard ones, but am having difficulties making these custom icons fit correctly into the buttons. The following code demonstrates how I decorate all <button> elements with a 50x17 px icon, I've also created a corresponding fiddle.
Javascript:
$('button').button({icons: {primary: 'login-icon'}, text: false});​
CSS:
.ui-button .ui-icon.login-icon {
background-image: url(http://i.imgur.com/qLgpl.png);
width: 50px;
height: 17px;
}​
The problem is how to make buttons fit together with such custom size icons, i.e. so that icons are properly placed inside (vertically/horizontally aligned) parent buttons?

I found a solution after having studied the jQuery UI-generated CSS. I found that the trick is that the span containing the icon is positioned inside its parent (the button) using the following CSS rules:
position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;
What the positioning rules (position, left, top) mean is that, sans margins, the icon's left edge should be at 50% of the parent's width and the top edge at 50% of the parent's height, i.e. the top left corner of the icon will be smack in the middle of the button, as illustrated in this pic:
With the help of negative margins, the icon is offset half its length to the left and half its height upward, so that effectively it gets centered in the parent element. The value of 8 pixels is due to jQuery's icons being 16x16 pixels.
The adjustment I had to make then, was to modify the margins according to the size of my icon (50x17) to 25 and 8 pixels:
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -8px;
You can see my solution in this updated fiddle.

In upcoming versions of css you can just scale it using transform:scale(2,2);
JSFiddled

Chrome, jquery animate wobble

I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks

Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.

if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?

You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.

I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37

A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.