Develop Reference

Jquery: can't animate growing the height of textarea? Grow from top?

Ok I have a button and a hidden text area. On click, I want to expand the button to the width of the textarea and grow the text area from the top (as if it were expanding from a height of nothing to its full height).
I need to animate this grow smoothly, so it looks good. So far, Ive achieved all this except for the smooth textarea grow:
$(document).ready(function() {
console.log("Testing blurb..");
$('.blurbEdit').hide();
$('.blurbEdit').height(0);
$('.changeBlurb').on('click', function(e){
console.log("blurb clicked");
var neww = $(".blurbEdit").css("width");
$(this).animate({
width: neww
}, 200, function() {
//$('.blurbEdit').animate ({height: 200;});
$('.blurbEdit').animate({
height: 200
}, "normal");
$(".blurbEdit").fadeIn(300, function() {
$('.changeBlurb').hide();
}).focus();
});
//$(".blurbEdit").show();
});
Right now, the text area just shoots to its full height. There is no smooth animation no matter what I set the time parameter to and I am animating. How can I fix this?

Have a look at the code below, a simple example - run the snippet
$('#button').click(function(){
$('.large-compact').css('width', '500px').css('height', '120px')
})
/* compress textareas until button clicked*/
textarea.large-compact {
height: 30px;
width: 60px;
transition: all 1s ease-out;
}
/* reset */
body,
textarea {
font: 100%/1.3 Verdana, sans-serif;
}
body {
background: #fafafa;
color: #333;
}
label,
textarea {
display: block;
}
label {
margin: 1em 0 .3em;
}
textarea {
width: 30em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="id2">textarea</label>
<textarea class="large-compact" name="text2" id="id2" cols="30" rows="10"></textarea>
<button id="button">
Click me
</button>

How can i make a div that slides up to reveal a page without completely hiding it?

I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.

jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.

I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>

Circular Images - Apply Tint on Hover

I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }

Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}

Best Way to Centre Dynamic Div in Middle of Page

I know this sort of thing has been asked a lot but I want to be able to centre a div in the middle of the page and have it always stay in the middle of the page no matter how wide or tall it gets.
I'm guessing that it would be best to use some javascript to work out how wide the element will be and then half that amount to take away from the margin.
To clear things up, this sort of thing:
.myDivHere {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width: 20%;
height: 20%;
margin-left: -273px; /*half width set by js script*/
margin-top: -132px; /*half height set by js script*/
}
I have set the width and height to be 20% as I want this div to be able to retain its size relative to the browser window (for mobile support and such). Any ideas?

Unless I'm missing something you can forgo the JavaScript and use plain CSS:
div {
position:absolute;
background:red;
width:20%;
height:20%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
jsFiddle example

Here is you go.
It should be noted that this answer is more about concepts than giving you the answer outright.
Now, you see the 'div#b' section of the CSS? To keep everything in the center, simply write a script that keeps the margin-top value -50% of the height. And that's it!
Example:
(currently) height = 60, margin-top = -30px (changed for height = 100) height = 100, margin-top = -50px
div#a
{
width: 300px;
height: 300px;
border-width:1px;
border-style: solid;
/* important stuff below */
display: inline-block;
}
div#b
{
width: 60px;
height: 60px;
background-color: red;
/* important stuff below */
position: relative;
margin: -30px auto 0 auto;
top: 50%;
}

Here's a codepen:
Check it out.
Most of your styles aren't necessary, and javascript is definitely unnecessary. The key to vertical centering is display: table. It requires some nesting, so I altered your structure as well.

In jQuery you can use .width() and .height() methods as they returns computed width in pixels, not in percentage + you will need to listen window resize event. For example like this:
$(function() {
function updateDivPosition() {
var myWidth = $( '.myDivHere' ).width()
, myHeight = $( '.myDivHere' ).height();
$( '.myDivHere' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});
jsFiddle demo

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.