Modify theme js (window height):

[jgk]

Hello!

For the theme below, the .front-page-header height is being modified with the below bit of javascript.

I would like to modify this javascript so that the bottom of ".front-page-header" hits exactly the bottom of the window, rather than hitting a little above it.

Please help!

Thank you!

jQuery(function( $ ){
	
	// Header Height
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
	$('.front-page-header') .css({'height': newHeight +'px'});
	$('.image-section') .css({'height': windowHeight +'px'});
		
	$(window).resize(function(){
	
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
		$('.front-page-header') .css({'height': newHeight +'px'});
		$('.image-section') .css({'height': windowHeight +'px'});
	
	});

http://osof.studioissa.com/

[Jeremy Holden]

I don't see the classes you have in your js at all on the site so I don't really know what you're trying to do.

Jeremy

---

Website design and Genesis customization
jeremyholden.me

[jgk]

Hi Jeremy, Thank you, I'm trying to make ".front-page-header" like 15% bigger vertically. Here's the site: http://osof.studioissa.com/

[jgk]

Whoops, I was pasting the incorrect java script. here it is:

jQuery(function( $ ){

	$('.site-header').addClass('front-page-header');
	
	$('.footer-widgets').prop('id', 'footer-widgets');

	$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 800) {
			$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});
	
	// Local Scroll Speed
	$.localScroll({
		duration: 750
	});

	// Sticky Navigation
	var headerHeight = $('.site-header').innerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var abovenavHeight = headerHeight + beforeheaderHeight - 1;

	$(window).scroll(function(){

		if ($(document).scrollTop() > abovenavHeight){

			$('.nav-primary').addClass('fixed');

		} else {

			$('.nav-primary').removeClass('fixed');
			
		}
		
	});

});

[jgk]

Hey Jeremy, Thanks for the help, but don't worry about it: I'm disabling the javascript and fixing it w/ css.

Thanks,

Jay

[Author]

Posts