We Keep Coding

Adding a loader after clicking submit button on a form (loader keeps repeating)

My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved this, however it is not ideal.
I feel as though I'm doing something poorly because the loader is acting strange, sometimes it will show only once but others it gets repeated, and background-repeat: no-repeat has no effect.
Here is my jQuery:
$(document).ready(function() {
$("input[name='application-submit']").hover(function() {
$(this).toggleClass("btn-hover");
$("form").submit(function() {
$("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
$("input[name='application-submit']").hide();
$("img.loader").css("position", "relative", "top", "0", "left", "0");
});
});
});
Am I doing something wrong here that is making it so that the CSS I'm using is ineffective? Is my method archaic? What is a more efficient way to go about this? (I don't want the full code, I just need to be steered in the right direction as to what I'm doing wrong).
You can see a live example here. If you upload an image and then click submit (ignore the other fields), you'll see the image loader in question.

The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});

While loop only works when webpage is opened locally

I've written a function that makes sure an image is both big enough horizontally and vertically to fill it's parent element, and to do this I used a while loop. When I open the index.html file on my computer locally it loads fine but as soon as I upload it to my server and try to access it the page never loads.
Here's the Javascript:
$(document).ready(function() {
initialize();
}
function initialize() {
$("[data-type='parallax']").each(function() {
$(this).css('height', $(this).parent().height());
while (($(this).height() < $(this).parent().height()) || ($(this).width() < $(this).parent().width())) {
$(this).css('height', '+=1px');
}
});
}
Does anyone know why this is? I know it's the while loop I just don't understand why it works locally. Is there an easier way to approach this with CSS where the image is at least as tall and wide as the parent element but only as big as it needs to be.

you could use animate, check this Fiddle
code:
<script type="text/javascript">
$(document).ready(function() {
initialize();
})
function initialize() {
$("[data-type='parallax']").each(function() {
var wi=$(this).width()
var he=$(this).height()
var pW=$(this).parent().width()
var pH=$(this).parent().height()
if(wi<pW||he<pH){
$(this).animate({'width':pW+'px','height':pH+'px'},1000)
}
});
}
</script>

jQuery.ScrollTo - how to make bg to scroll slower than the rest?

i'm new to coding , and to this site, i hope you'll help me! so i'm making horizontal website, i want to add scrolling background, that scrolls with other elements clicked, but slower
like for example http://hotdot.pro/en/ . How do i do that, where do i put code lines?
or maybe i could use better plugin?
Thanks for any help!
!!i'm putting script code here just because website says that my post is not informative enough. sorry
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
or
where?

jQuery Parallax Plugin is probably what you are looking for.
See demo here: http://ianlunn.co.uk/plugins/jquery-parallax/
Source code and documentation here: https://github.com/IanLunn/jQuery-Parallax
"or maybe i could use better plugin" - rule of thumb is: whenever it is possible to use already written code (and not to write your own), you should do so. Except the cases, when writing a code is an academic exercise.

Retaining "height" declaration in jQuery after an Ajax call (dropdown selection loads product data, resets height on other page elements)

I have some jQuery setting a height on product descriptions, this can be seen here:
https://www.gabbyandlaird.com/product/truition-products/truition-healthy-weight-loss-pack
The code I'm using to achieve this is:
$(document).ready(function() {
var $dscr = $('.commerce-product-field-field-long-description'),
$switch = $('#toggle'),
$initHeight = 70; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggle(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 200);
$switch.html("- Read More").toggleClass('toggled');
}, function() {
$dscr.animate({ height: $initHeight}, 200);
$switch.html("+ Read More").toggleClass();
});
});
I am by no means a Javascript expert (or even an amateur for that matter). My knowledge of jQuery is fairly limited, so I'm not sure what needs to be changed above so that when the dropdown selection reloads the data on the page, I don't lose the height value on the "Read More" section of the product description. Any assistance is greatly appreciated. Thanks!

as per your code above it looks you are doing everything when the document is ready.
here is what you can do.
var initialHeight = function(){
// you height initialization code here
}
$(function () {
$(document).ready(initialHeight); // initializes the height on document ready
$("#yourSelectBox").change(initialHeight); // initializes the height on combobox selection change
});
hope this helps.

Getting the width from an scaled image

I'm using Jquery to get the width of an image once it is appended to the body. Have a look at this fiddle to get an understanding of what I'm doing.
What I want to do is add each element with a constrained height and read what the respective width is once after it is scaled. The problem as you will see is that the console.log is giving me the value 0 for the width.

Use jQuery .load() function to do all the calculation after image load:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend(
$('<img/>').attr({
src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
id:'img' + (number++)
}).load(function(){
console.log($(this).width())
})
},3000);
});​

http://jsfiddle.net/w7rcn/
The width was being "read" before the image could fully download.
So, we used the same concept, but applied it after the img load event had fired:
$('#img' + String(number)).load(function() {
console.log($(this).width());
});

Mohsen and Justice are right. However, you can still simplify a bit:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend($('<img '
+ 'id="img'+number+'"src="http://www.upress.umn.edu/'
+ 'book-division/images-1/other-'
+ 'images/blockc.gif/image_thumb">').load(function() {
console.log($(this).width());
}));
number++;
}, 3000);
});​