Develop Reference

Child of div to be the same height minus top and bottom paddding

Looking to set the height of a child divs to be the same as the parent divs. As it stands the divs gets larger and larger as the page resizes. It's for a search result so there are lots of the same blocks of code.
function legendHeight() {
$result = $('.search-result');
$resultHeight = $result.height();
if($result.find('.legend-lead').length != 0) {
$(this).children('.legend').height($resultHeight);
}
};
$(window).load(function () {
equalheight('.search-result');
legendHeight();
});
$(window).resize(function () {
equalheight('.search-result');
legendHeight();
});
Here is a JSFiddle to show what I mean: https://jsfiddle.net/o0nzo47k/
Although the boxes should resize onload (not why that is not working), if you resize the window you will see the blue divs get taller and taller.

OK here is your example working fine https://jsfiddle.net/3wnLeoyd/
the inner divs height(.legend-lead-key and .legend-lead-address) I handled them using css only and I used jquery on the outer height ( to make the height of each div is the same )
The css :
.search-result{
border-top: none;
margin-top: 0 !important;
padding: 20px;
padding: 1.25rem;
margin-left: 2.34741784%;
margin-bottom: 1.875rem;
background: red;
width: 25%;
display:inline-block;
vertical-align:top;
}
.search-result:nth-child(3n+1) {
margin-left: 0;
}
.legend-lead{
display:table;
}
.legend-lead-key {
background: blue;
border-right: 1px solid #c7cada;
display:table-cell;
}
.legend-lead-address{
display:table-cell;
}
js :
function equalheight(){
var maxHeight = 0;
$('.search-result .legend-lead').height('auto');
$('.search-result').each(function(){
if($(this).height()>=maxHeight){
maxHeight = $(this).height();
}
})
return maxHeight;
}
$(window).load(function(){
$('.search-result .legend-lead').height(equalheight());
})
$(window).resize(function(){
$('.search-result .legend-lead').height(equalheight());
})

Firefox Scrolling Bug When Changing :after Contents

I want to change pseudo elements on a container based on its scroll position. I made a jsfiddle to demonstrate the bug I stumbled upon: http://jsfiddle.net/krzncu1k/1/
The :after-element shows the current scroll status ("upper half" or "lower half"). Its content changes by toggling the classes .upper-half and .lower-half based on scroll position:
.upper-half:after {content:'upper half'; top:0;}
.lower-half:after {content:'lower half'; bottom:0;}
The corresponding JS:
$wrap.toggleClass('upper-half', isUpper).toggleClass('lower-half', !isUpper);
The bug happens when using Firefox and scrolling via dragging the scrollbar (not via mousewheel!). If you drag it and cross the middle (where the class changes from .upper-half to .lower-half) you suddenly can't drag any further.
Any ideas on why this behavior occurs and how to fix it?

No idea why this occurs in Firefox, but I do have a workaround. Create the upper half with :before, the lower half with :after and hide and show with opacity when the class changes. Might as well throw in a smooth transition as well. The bug is prevented because the position is not changing.
(you could also use display: none instead of opacity, but it cannot be transitioned)
Working Example
$(function() {
var $wrap = $('.wrap'),
$ul = $('ul'),
ulHeight = $ul.height();
$ul.scroll(function(e) {
var isUpper = (this.scrollTop + ulHeight / 2) / this.scrollHeight <= 0.5;
$wrap.toggleClass('upper-half', isUpper).toggleClass('lower-half', !isUpper);
});
});
ul {
overflow: auto;
max-height: 200px;
background-color: #ddd;
}
li {
font-size: 200%;
}
.wrap {
position: relative;
width: 200px;
}
.wrap:before,
.wrap:after {
position: absolute;
left: 0;
width: 100px;
height: 40px;
background-color: rgba(128, 128, 128, 0.3);
text-align: center;
color: white;
line-height: 40px;
transition: opacity 0.5s;
}
.wrap:before {
content: 'upper half';
top: 0;
}
.wrap:after {
content: 'lower half';
bottom: 0;
}
.upper-half:after {
opacity: 0;
}
.lower-half:before {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap upper-half">
<ul>
<li>Some</li>
<li>Random</li>
<li>Bullet</li>
<li>Points</li>
<li>Just</li>
<li>To</li>
<li>Make</li>
<li>This</li>
<li>Awesome</li>
<li>List</li>
<li>A</li>
<li>Little</li>
<li>Longer</li>
<li>And</li>
<li>Longer</li>
<li>And</li>
<li>Longer</li>
</ul>
</div>

Animating bars to width of Text

I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.

Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.

How to align text in bottom of label

I've got problems to get text in the label to the bottom of the label.
I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without coming up with a working solution.
http://jsfiddle.net/kaze72/jQ6Ua/
.uppgifter
{
vertical-align: text-bottom;
}
Seems not to help!

You can try
.uppgifter
{
display: table-cell;
vertical-align: bottom;
background-color: yellow;
}
jsFiddle
Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

.uppgifter
{
padding: 580px 0 1px 230px;
}

You could just animate the padding-top:
$("#the_button").click(function () {
$(".uppgifter").animate({
'padding-top':"500px"
}, 4000, "linear", function() {});
});

try this:
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"height":"100px","padding-top":"500px"},
4000, "linear", function() {});
});
});
or just a suggestion, take a look at this :):
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"top":"500px"}, 4000, "linear", function() {});
});
});
combined with
.uppgifter
{
vertical-align: text-bottom;
position:relative;
background-color: yellow;
}

*
{
font-family: cursive;
}
.panel
{
position:relative;
border: 1px solid;
}
#spelplan
{
height: 600px;
}
.uppgifter
{
position:absolute;
vertical-align: text-bottom;
bottom:0;
background-color: yellow;
}

I simply added two transparent divs set with a 90% height that force the text down as the label height changes.
http://jsfiddle.net/jQ6Ua/15/
#div
{
height:90%;
width:200%
}

To vertically align a text in a container, multiple techniques can be used. However, most of them have additional script calculation at runtime (if the height of the text container is changing) which can mess with the business logic.
A hack can be used in your particular situation.
You can add an image container with empty src inside your text container with 100% height and 0 width set by css.
<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label>
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label>
//and css
.uppgifter img{
height:100%;
width:0;
}
Example
This way you would not have to write logic for additional added layers.

Display value in jQueryUI ProgressBar

I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?

Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}

The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help

After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS

This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}​
Working sample: http://jsfiddle.net/hasYK/

I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>