We Keep Coding

Could i make this Jquery resize function more efficient / shorter / cleaner?

i'm new to Jquery and it doesn't look efficient copying the same code in two functions.
Is it possible to make this function more efficient?
By efficient i mean shrinking the code.
What it does is, changing the size of an ID element when it will be resized.
Why i need copy it twice? When i leave the code inside .resize and remove the other inside .ready, the elements will have unset sizes.
It works like i would have it working, but the problem is it doesn't look "clean".
I'm using latest Jquery.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
$(window).resize(function() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
});
});

Just move the code you want to run in multiple places into a function, then call it on document ready, and on resize events.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
function layout() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
layout();
$(window).resize(layout);
});

Put the logic into a named function - then call it on page load and then again on window resize.
$(document).ready( function() {
updateSizes();
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
$(window).resize(updateSizes)
function updateSizes(){
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
});

Resizeing textarea on page load

I have found the following code for resizing the textareas to extend according to the content.
$(document).ready(function() {
$(".content").on("keyup",function(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
});
});
The code works well, but the textareas extend only after selecting them and making a change.
I would like them to extend on the page load already.... Any ideas?
Thank you!

Try this:
$(document).ready(function() {
var $content = $('.content');
$.each($content, resize);
$content.on("keyup", resize);
function resize(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
}
});

Avoid jQuery code repeat

i am making an animated progress bar. It's code is quite simple but the problem is that I can't figure out how to avoid repeating some jQuery code, you can see it in this Fiddle:
http://jsfiddle.net/N6c2q/
basically, this is what repeats:
$('.bar-value').animate({width: '+=1%'},50,function(){
var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
var percInt = parseInt(percent);
$('.progress').text(percInt+"%");
});
that just increases the width of the inner div (progress) by 1%, and increases .progress span number by 1. Is there any way to do what i'm trying to do without repeating that code?
Thanks in advance!

Just give duration and amount you'd like to animate:
$('.bar-value').animate({width: '+=100%'},2000,function(){
var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
var percInt = parseInt(percent);
$('.progress').text(percInt+"%");
});

Use recursion:
function showProgress(finish) {
$('.bar-value').animate({
width: '+=1%'
}, 50, function () {
var percent = $('.bar-value').width() / $('.bar-value').parent().width() * 100;
var percInt = parseInt(percent);
$('.progress').text(percInt + "%");
if (percInt != 100) {
showProgress(finish);
} else {
if (finish) finish();
}
});
}
Fiddle
Edit: fix

Of course, that code is madness!!
So I would recommend you to use jQuery UI progress bar
Otherwise you can use a loop to do what you are trying to achieve:
http://jsfiddle.net/db306/N6c2q/3/
$(document).ready(function(){
var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
$('.progress').text(percent+"%");
$('button').click(function(){
$('.loader').fadeIn(1200);
$('button').attr('disabled','disabled');
for (var i=0; i<100;i++){
$('.bar-value').animate({width: '+=1%'},50,function(){
var percent = $('.bar-value').width() / $('.bar-value').parent().width()*100;
var percInt = parseInt(percent);
$('.progress').text(percInt+"%");
});
}
});
});

javascript, slide div down on button click?

i am trying to get a div to slide down about 200px down a page using javascript when the user clicks another div which acts as a close button.
can someone please show me how i would do this?
<script>
$('.chat_close').click(function(e){
$('.chat_box').slideDown();
});
</script>

Someone already asked the same question a while ago. Avinash replied:
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
You can see it here at this URL:
http://jsbin.com/azewi5

Use animate
Also, use .on
<script type="text/javascript">
$('.chat_close').on('click', function(e){
$('.chat_box').animate({"top": "200px");
});
</script>
HTML:
<div class="chat_close">
</div>

can't get height set in variable

I have this in the footer, so when all content loads. The alert gives the correct result but when I apply that same var to the height of the #'container doens't work.
$(document).ready(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
alert(total);
$(".detta .box").animate({top: newDistance});
$("#container").height(total);
});
container doens't have any set height in the css.
What am I doing wrong?

Instead this :
$("#container").height(total);
try this :
$("#container").css("height",total);
Good- Luck !

$(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
$(".detta .box").animate({top: newDistance}, function(){
$("#container").height(total);
});
});
bingo! the new container height had to be triggered, so i just apply it after box animation happens