Jquery onResize function doesn't work

Hello, experts,

Why is this not working?

function fullHeightBg(element){
	var elementGet = $('' + element); //place desired fullHeigh element
	var height = window.innerHeight; // get the heigh of the window
	$(elementGet).css('height', height);
}

$(function() {
	//calling full-screen Bg function
	fullHeightBg('.header');
	$(window).on('resize', fullHeightBg('.header') );
	
    
});

Open in new window


fullHeightBg('.header'); works but not in resize event listener.

Note: I know I can have it working when I just copy the code again as an event handler to resize function but I want to code DRY(don't repeat yourself).
LVL 1
Fajer39Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
At the moment you're passing the result of a function call to the on-resize function instead of an actual function to call. Simplest solution would be to wrap it in an anonymous function:
$(window).on('resize', function() { fullHeightBg('.header'); } );

Open in new window

Here's a fiddle used for testing: http://jsfiddle.net/robert_schutt/7ym2ntoe/
0
Fajer39Author Commented:
Thank You Robert, but could you please try to explain to me, why is this happening?

And what if I added inside the function itself and use the recursion- it seems to work eventually but with a big time delay after resizing- so I guess that's not right solution either :-).
function fullHeightBg(element){
	var elementGet = $('' + element); //place desired fullHeigh element
	var height = window.innerHeight; // get the heigh of the window
	$(elementGet).css('height', height);
    $('#dbg').text(height);
    $(window).on('resize', function() { fullHeightBg('.header'); } );
}

Open in new window

0
Robert SchuttSoftware EngineerCommented:
Sure. The initial problem is that you need to pass a function reference to the on-resize call. What you passed as second argument to the on() call is the result of calling fullHeightBg('.header') which is undefined. As soon as you add an argument, the function is being called instead of a reference to the function being passed. If you had not required an argument to be passed you could have used:
$(window).on('resize', fullHeightBg );

Open in new window

This passes the function reference without calling it yet but in this way you can't add arguments to the function to call when the event actually takes place.

jQuery does provide a way to do just that with a slightly different call of on():
.on( events [, selector ] [, data ], handler )
so the code would be:
function fullHeightBg(evt){
	var element = evt.data.element;
	var elementGet = $('' + element); //place desired fullHeigh element
	var height = window.innerHeight; // get the heigh of the window
	$(elementGet).css('height', height);
	$('#dbg').text(height);
}

$(function() {
	$(window).on('resize', {element: '.header'}, fullHeightBg );
	//calling full-screen Bg function
	$(window).resize(); // trigger event for the first time
});

Open in new window

Here the argument is being passed through Event.data (in the evt argument).
Updated fiddle: http://jsfiddle.net/robert_schutt/7ym2ntoe/2/

***

What do you want to accomplish with the recursion? It's probably slow because it's being called so many times when you do it like that. One more event is being added each time it's called.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Great explanation- I've been able to google some more info about it based on your post and I can say "now I know why" :-) And also know that I can actually use more than event+handler is an eye openner for me.

Thank You Robert.

****
You're right. It was just shoot into the dark from me.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.