We Keep Coding

Change 'resize' to 'onload' JS

Currently, this script only works when I adjust the window - I'd like it to work on load but do not know-how. I think this is simple but I can't figure it out.
$(window).on('resize', function() {
if($(window).height() > 300) {
$('.card').addClass('hover');
$('.card').removeClass('no');
}else{
$('.card').addClass('no');
$('.card').removeClass('hover');
}
})

Just create a function and execute it onload and as a event listener of the onresize
function resizeHandler() {
if ($(window).height() > 300) {
$('.card').addClass('hover');
$('.card').removeClass('no');
} else {
$('.card').addClass('no');
$('.card').removeClass('hover');
}
}
$(window).on('resize', resizeHandler);
$(document).ready(resizeHandler);

Lag when calling a function on resize inside itself

Is there a better/more straightforward way of doing this?
function moveNav(){
var navOffset = $(".nav-marker").offset().top;
$(window).scroll(function() {
var scrollOffset = $(document).scrollTop();
if( scrollOffset >= navOffset ){
$(".nav-bar").addClass("scroll-fixed");
} else{
$(".nav-bar").removeClass("scroll-fixed");
}
});
}
moveNav();
// call again on resize to recompute navOffset
$(window).resize(function() {
moveNav();
});
I want to use the moveNav() function again when the browser is resized but the way I'm currently doing it feels off. I feel like there's a way of moving the resize() function inside the moveNav() function but when I put it inside it, there's some lag happening when when I resize. You can see it happening here: https://jsfiddle.net/grj89t9b/2/
Is there a better way of doing this?

I would declare the variables first, and make a simpler function but then declare it both on $(window).resize() and $(document).scroll().
var navOffset, scrollOffset;
function moveNav(){
navOffset = $(".nav-marker").offset().top;
scrollOffset = $(document).scrollTop();
if( scrollOffset >= navOffset ){
$(".nav-bar").addClass("scroll-fixed");
} else {
$(".nav-bar").removeClass("scroll-fixed");
}
}
moveNav();
$(document).scroll(function() { moveNav(); });
$(window).resize(function() { moveNav(); });
and it works on your JSFiddle.

repeat an else/if closure function on window resize

so i have this function:
(function() {
var wwidth = $(window).width();
function headroom() {
// headroom
$("nav").headroom({
"tolerance" : 0,
"offset" : 1300,
});
// to destroy
$("nav").headroom("destroy");
}
function headroomMobile() {
// headroom
$("#nav-wrap").headroom({
"tolerance" : 0,
"offset" : 200,
});
// to destroy
$("#nav-wrap").headroom("destroy");
}
if (wwidth >= 480) {
headroom();
}
if (wwidth < 480) {
headroomMobile();
}
})();
i would this function to repeat everytime there's a window resize but i can't make it to work, maybe because it's a closure function.. i tried naming the whole function and trigger it on window.resize but it didn't work, i probably did some syntax error or misplaced the bit of code. I'm sure it's no difficult task but i can't make it to work :\ can you help?
thank you so much!

Make it a named function, and use it for both things:
(function() {
function handleWindowSizing() {
// ...logic here...
}
$(window).load(handleWindowSizing).resize(handleWindowSizing);
})();
Note that the load event on window handles really late in the page load process, you may want to do your logic right away as well (make sure your code is at the very end of the HTML so that anything it acts on has been parsed and put in the DOM). E.g.:
<!-- ...content... -->
<script>
(function() {
function handleWindowSizing() {
// ...logic here...
}
handleWindowSizing();
$(window).load(handleWindowSizing).resize(handleWindowSizing);
})();
</script>
</body>
</html>

If you want a function to be called everything the window is resized then just bind it to the
resize event like so:
(function () {
var wwidth = $(window).width();
function headroom() {
// headroom
$("nav").headroom({
"tolerance": 0,
"offset": 1300,
});
// to destroy
$("nav").headroom("destroy");
}
function headroomMobile() {
// headroom
$("#nav-wrap").headroom({
"tolerance": 0,
"offset": 200,
});
// to destroy
$("#nav-wrap").headroom("destroy");
}
function setHeader() {
if (wwidth >= 480) {
headroom();
} else {
headroomMobile();
}
}
setHeader(); // on load
$(window).resize(function () {
wwidth = $(window).width();
setHeader();
});
})();
But this is not the most efficient way to do it.. checkout this

can I bind a child function to the window resize event?

I have this code:
$('#myelem').click(function() {
height=$(this).height();
wh=$(window).height();
if (wh>height) {
// do stuff
}
});
What I want to do is bind the if clause to the window resize event. I tried putting it into a new child function but I can't pass the variables height,wh to it. I don't even know if what I am trying is correct. Any ideas?

Use a common function as handler of two distinct events
var elem = $('#myelem'); //caching a reference to $('#myelem')
var w = $(window); //caching a reference to $(window)
function doSomething() {
var height = elem.height(),
wh = w.height();
if (wh > height) {
...
}
}
elem.on('click', function() {
doSomething();
});
w.on('resize', function() {
doSomething();
});

If window is less than 768px wide, don't fire function

If the window width on page load AND resize is less than 768px, I don't want to fire the showCover() function. With the below code, even when the window is less than 768px, it's still being fired.
function ipsThemeViewer() {
jQuery(window).resize(function() {
if ( jQuery(window).width() < 768 ) return false;
showCover();
}).resize();
}
function showCover() {
jQuery('#ipsThemeViewerScreen').hover(function () {
var t = jQuery(this);
jQuery('.cover').stop().fadeIn('fast');
}, function () {
var t = jQuery(this);
jQuery('.cover').stop().fadeOut('fast');
});
}

I would go the other way around:
jQuery(function($) { // DOM READY AND SECURE $ ALIAS
var winIsSmall;
function testWinSize(){
winIsSmall= $(window).width() < 768; // BOOLEAN
}
$(window).on("load resize", testWinSize);
$('#ipsThemeViewerScreen').hover(function () {
if(winIsSmall){
// need something here?
}else{
$('.cover').stop().fadeToggle('fast');
}
});
});