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.
Related
I have a function that scrolls down/snaps to a div after the user starts to scroll (to avoid them having to manually scroll down to where the main content starts). I have used some GSAP to achieve this, however I don't think that will make much difference with the solution to this problem. However, while this function does exactly what I'd like, It won't then allow the user to scroll back up. It just glitches a little bit, as if I'm fighting with the function to scroll back up. I've tried a variety of answers from all the "run only once questions" on here, but none seem to work in this situation.
I want to basically kill the function after the first time it is initiated, or to tweak the function to only work on the first scroll at the top of the page (though I appreciate this would be much more complicated).
Thank you in advance of any help.
JS:
$(window).scroll(function () {
function headScrollToDiv() {
var dHeight = $(window).height();
if (dHeight >= $(this).scrollTop()) {
gsap.to(window, 0.4, { scrollTo: ".buffer" });
}
}
headScrollToDiv();
});
i am in a difficult time for 2 days with a code for collapsing a menu . I'm trying really hard to realize what am i doing Wrong.
The problem with this code is that when you resize the browser it won't work again.
If someone could help me , i would appreciate it very much.
$(document).ready(function(){
function jqUpdateSize(){
// Get the dimensions of the viewport
var width = $(window).width();
if(width<=768){
$('.toggle-nav-this-site').css("display","block");
$('.toggle-nav-this-site .button-this-tg').click( function(){
$('.aside-menu > ul').toggle('showElem');
});
}else{
$('.toggle-nav-this-site').css("display","none");
$('.aside-menu > ul').show();
}
$('#jqWidth').html(width); // Display the width
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // When the browser changes size
});
I've never used jQuery, but with plain JS you first have to add an EventListener:
window.addEventListener('resize', functionname);
This called function has to change all variables.
You can get the window-Size by: window.innerHeight, window.innerWidth
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(){ ... });
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});
});
I have a web app using master page and content pages (see the attached image). I need to set max-width of one div in content page dynamically accordint to the browser window size (so that the whole app stays on the page, without scrolling). I couldn't find the sloution (or couldn't replicate the results) using just html and CSS. So I'm thinking to do it using javascript. But the problem is, I NEVER used it, so I really have no clue how to do it. I'd really appriciate if someone took a couple of minutes and write the function that will do it. As I see it, I should take difference in height between bottom edge of the header and top edge of the footer and subtract height values of searchbar and button bar.
EDIT:
Thanks to maxedison for providing that code. But, how do I use it? :D I'm a total noob. I have a problem, since I use masterpage and content pages. Where do I put that code?
EDIT 2 - THE ANSWER:
I looked a little further into how to use jQuery, and searched here some more, and I found a solution. Next time I start developing an application, I'll use jQuery from the bottoms up...It just simplifies some things so much. :)
So for the solution: It's similar to what maxedison suggested, but I changed it so, that I set height with CSS and I just added a fixed value to deduct from window.height.
<script type='text/javascript'>
$(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
$(window).resize(function () {
$('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
});
});
</script>
Using jQuery, it would look something like:
function resetHeight(){
var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
$('.content').height(newHeight);
}
$(function(){
newHeight();
$(window).resize(function(){
resetHeight();
});
});