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.

JS / jQuery How to get height of dynamic (responsive) div?

I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing

You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});

You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)

Scroll to link with skrollr

I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.

If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.

There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.

Fittext will only work when window is resized?

I am using the fittext JS plugin to resize my headings on a page I am working on. For some reason it only kicks in if/once you adjust your window size, I cant seem to figure out why it is doing this.
Anyone have any ideas? Here is a link:
http://voltagenewmedia.ca/testserver/dry/#/homepage
Thanks!

For those who are still having the issue, this fix works for me
Replace this code inside jquery.fittext.js
// Call once to set.
resizer();
With this code,
$(window).load(function(){
resizer();
});

Your link is down so I can't actually see what the problem is. Fittext should resize immediately and then update on resize:
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).on('resize', resizer);
Are you waiting until the DOM is loaded before you use the plug-in?

I just ran into a similar problem that was driving me nuts. The element holding my text could not shrink within it's container because the max font size was too large, so I start it off with the width of the parent container. Then I just use the fittext algorithm once after initializing to get it loading properly and it seems to solve the issue.
$("#hero").find('h1').fitText(.65, { maxFontSize: '142px' });
$("#hero").find('h1').each(function(){
startSize = Math.max(Math.min($('#hero').width() / (compressor.*10)));
$(this).css({'font-size':startSize});
});

tween back to auto-height with xuijs

I'm having problems to create a equivalent slideDown for xuijs.
The slideUp (hide) is easily done with
x$('elm').tween({height:'0'});
but there seem to be no way to revert back to original height using tween.
$x('elm').setStyle('height','auto !important');
works fine but no animation of course,
x$('elm').tween({height:'auto !important'});
does not work. (setting height to fixed value does however, but that's not an option).
Kind of stuck here, document.getElementById('target_box').clientHeight doesn't help either once the height is set to 0 by tween or setStyle. Only solution I can think of is storing the heights in an array before initial global collapse of divs.
thankful for any help.
(the divs affected uses overflow: hidden)
regards,
//t

If you're using html5 Why not store the height as a data- attribute before you call tween?
x$.extend({
'slideUp' : function(){
this = this[0];
x$(this).attr('data-h',this.clientHeight);
x$(this).tween({height:'0'});
},
'slideDown' : function(){
this = this[0];
x$(this).tween({height:x$(this).attr('data-h');});
}
});
this code is untested, but it's worth a shot.

Not sure if you have solved this but I got a solution. Pretty sure there are better ways but this seemed to do the trick.
emile.js and xui animation needing double click?
uses emile instead of tween but sure you could change it if you want however emile.js is in xui.