We Keep Coding

Hide div when iframe gets to certain height automatically

My users book an appointment on our website which changes the height of an iframe when the iframe has changed height I want to hide the above the iframe automatically. This is what I have so far the limitation is it only works on the following events but I want it to hide the dynamically rather than on page re-size or scroll as these events dont take place
$(window).on('load resize scroll', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
I use the iframeresizer js plugin to detect dynamically update the height of the iframe

<script>
jQuery(function($) {
$(window).on('DOMSubtreeModified', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
});
</script>

jQuery doesn't execute when window size change

I just write a script to auto positioning an element on my page.
$(document).ready(function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll < 180) {
$(".header-bottom").removeClass("scroll-menu");
if ($(window).width() > 991) {
$(".header_user_top").css("position", "absolute");
$(".header_user_top").css("top", "initial");
$(".header_user_top").css("right", "60px");
$(".header_user_top").css("z-index", "1");
}
} else {
$(".header-bottom").addClass("scroll-menu");
if ($(window).width() > 991) {
var rightContainer = ($(window).width() - ($('#header div.header-bottom div.container').offset().left + $('#header div.header-bottom div.container').outerWidth()));
$(".header_user_top").css("position", "fixed");
$(".header_user_top").css("top", "-22px");
$(".header_user_top").css("right", rightContainer+60+"px");
$(".header_user_top").css("z-index", "99");
}
}
});
});
It's working but if I resize browser window the script doesn't reload.
If I refresh the page it's working.
I have add window.onresize = function(){ location.reload(); }to my script to fix this problem but I'm looking for a better solution.
Any idea?

Use on function to call multiple event:
$(window).on("load resize scroll",function(e){
// do something
}

Call function which is handling size on windows.resize also
function handleSize(){
// You code to handle size
}
window.resize=handleSize();

Only execute javascript if css is display:block - issue with resize

I'm working on a website with two banners- one for mobile and one for desktop. In order to have both banners functioning I had to write an if statement that a past of the dsktop javascript is only executed if the desktop banneris set to display:block in the css.
This works fine, but the only problem is when the user resizes the window the if statement doesn't get executed- they have to reload the page to do that.
this is the code :
var wait = setInterval(function () {
if (!$(currentBanner, loading).is(":animated")) {
clearInterval(wait);
loading.stop().fadeOut(300, function () {
if ($('#banner').css('display') == 'block'){
setTimeout(function() {
bannerInit();
}, 800);
startInterval();
if (initialLoad) {
initialLoad = false;
next.slideDown();
previous.slideDown();
}
}
});
}
Does anybody know how I can trigger the if statement not only on page load but also on resizing of the window?

Like this:
// on document ready
$( document ).ready(function() {
/* your function/code here */
});
// on page load, all elements finished e.g images etc
$(window).load(function() {
/* your function/code here */
});
// on page resize
$(window).on('resize', function(){
/* your function/code here */
};
Or vanilla JS:
// page load
window.onload = function() {
/* your function/code here */
};
// resize
window.addEventListener("resize", myFunctionOnResize);

Detect if page is scrolled on document load

I'm using the scrollTop to detect if the users scrolls then fadeIn an element:
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
});
It works well if the user loads the page and then scroll, but if the user is already below the 700px and reload or goes back to the same page the element doesn't fadeIn automatically on document load. It seems that it is not detecting the page is already scrolled.
Any idea what could be the problem with my code?

Just do the test when document is ready
It's better to create a function
function checkScroll(){
if ($(window).scrollTop() >= 700) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}
$(document).ready(function() {
checkScroll();
$(window).scroll(checkScroll);
});

Call this way to your function
Put this line end of your document ready.
$(window).scroll();

Simply trigger scroll after the delegation.
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}).scroll();
//^^^^^^ trigger scroll.
});

Unload jquery function if window resize

I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.

i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel