Develop Reference

Trouble Shooting Event on Resize Not Firing

I am using the technique at this link to equalize the height of bootstrap carousel slides, so in the case of an uneven amount of text the slides do not cause the elements below them to bump up and down when advancing slides:
https://snook.ca/archives/javascript/normalize-bootstrap-carousel-heights
function normalizeSlideHeights() {
$('.carousel').each(function() {
var items = $('.carousel-item', this);
items.css('min-height', 0);
var maxHeight = Math.max.apply(null, items.map(function() {
return $(this).outerHeight()
}).get());
items.css('min-height', maxHeight + 'px');
})
}
$(window).on('load resize orientationchange', normalizeSlideHeights);
The first part of the code works great, all my carousel slides are the same height. The second part where it is looking for changes to the window size to re-adjust the slide height doesn't seem to work at all. I tried editing the original code to just check for 'resize' to simplify it but did not see any difference.
Any insights or ideas to a solution are greatly appreciated, thank you!

Try plain JavaScript. If something in jQuery isn't working for me, I always try plain JavaScript. An example is below:
window.onresize = function(){normalizeSlideHeights()}
window.onload = function(){normalizeSlideHeights()}
This WILL trigger the normalizeSlideHeights() function on resize and load, if the function exists. If this does not work correctly, then the issue is with the function itself.You could also put some consoleLog() commands to see wether the function actually fires at all on resize.I know this is not jQuery, but it's almost as short and easy to write. I hope my answer helps you. I do not know for sure that this is the issue.

jQuery .stop() isn't stopping animation completely

I think the easiest way to demonstrate my problem is to make a short codepen.
(Sorry I couldn't make a snippet. I copied the exact same code from codepen to the SO snippet, but it didn't perform the same way.)
But lets get to the problem:
So as you can see on my codepen, the "most visible" div gets centered after one second without scrolling.
Scroll to the very bottom and the footer should appear and it's not centering the previous div. I did that with that code:
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 20) {
$("footer").addClass("footerVis");
$("html, body").stop(true);
} else {
$("footer").removeClass("footerVis");
}
I'm not sure if there would have been a better way to do that, but I just used .stop() to stop the scrolling animation to the previous div. However it works, but like every second it scrolls a bit up.
I guess that's because of the setTimeout(function() {...}, 1000) earlier in the JS to start the scrolling animation after one second. I can't explain why it scrolls a bit up every second tho...
Does anyone know how I could fix this? Thanks for your help in advance!

Swapping fadein with slide horizontally in jquery

I am using the following script for an animated background, right now the pictures fadein and fadeout but I want them to slide, horizontally, to the left.
My question is, is this a standard jquery "function" because I have trouble finding the proper way to do this.
Is anyone able to help me modify my code so it does what I want it to do?
Thanks in advance.
Code I'm using:
$(function(){
$('#background img:gt(0)').hide();
setInterval(function(){
$('#background :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#background');},
3000);
});

You can use JQuery .animate() to toggle horizontally. For example:
$('#background :first-child').animate({width: 'toggle'})
.next('img').animate({width: 'toggle'})
.end().appendTo('#background');},
3000);

Alternative to setTimeout for images

If I want to create a div that is as high a (responsive) image using javascript, I am resorting to setTimeout. For example I might have code like this
setTimeout(function(){
var $imgheight = $('img').height();
$('.mydiv').height($imgheight);
}, 400);
Is there any alternative to this? I know about imagesloaded plugin, is there any simpler alternative?
Many thanks

You can use the load event to know when the images are loaded:
$('img').on('load', function(){
$('.mydiv').height(this.height);
});
http://jsfiddle.net/083d89me/
Though I don't see the need to set the divs height. Doesn't it adjust itself to the image height by default?

Well you don't want to create a new div just to change the height of the existing one so please change the description.
Please use the answer from #filur to set the height according to loaded image and then add eventListener for window.resize event :)
$(window).on('resize', function(){ ... });

jquery animate opacity sudden display instead of smooth

I'm trying to animate some tab contents I've made. It works smoothly when fading the content out, but fading it in doesn't. The content just appears suddenly instead of fading in.
Please check my code here: http://jsfiddle.net/rqsJ8/2/
I've tried everything I can think of, but I can't figure why this is happening.
Please enlighten me.
Many Thanks

http://jsfiddle.net/rqsJ8/25/
Changed to use fadeIn and fadeOut.

I have updated the version with a new code and saved it on fiddle and here is the link: http://jsfiddle.net/rqsJ8/61/

you didn't probably mention a time for speed..
tabContent.animate({ opacity: 0 }, function() {
$(this).removeClass('selected');
}, speed );