Changes in Parent-Script

[heinetz]

Hi,

my 3 project with Dante is nearly completed and I’ve learned again so much
about your theme. Thank you for your help!

I’ve realized my customization as child-theme, but I had to do some things,
that I could not solve without modify files in parent-theme and I don’t like
that 😉

Now I’ld like to try moving this modifications to my child-script. I modified
2 files and I want to start with following issue:

I’ve defined a link to an anchor on the page in main-menu.
When I click on the link the body (nice)scrolls to the position of the anchor (scrollTop = 6491px).
When I click the same link again (after the page has scrolled to the anchor) it scrolls another 24px to 6515px.

For demonstration I’ve published a version with your demo-content and made only this:

a) I duplicated your menu-item ‘/features/Animation: Images’ as ‘/features/DMW | Animation: Images’
b) I changed the target from ‘/features/#nextlevel’ to ‘#nextlevel’

There you can try it.

To fix this I’ve found out what happens:

In /dante/js/functions.js #941 – #956

if (linkHref.indexOf('#') === 0) {
	var spacerHeight = jQuery(linkHref).height(),
		headerHeight = 0;
		
	if (jQuery('.sticky-header').length > 0) {
		headerHeight = jQuery('.sticky-header').outerHeight();
	}
	if (jQuery('#wpadminbar').length > 0) {
		headerHeight += jQuery('#wpadminbar').outerHeight();
	}
	
	if (jQuery(linkHref).length > 0) {
		jQuery('html, body').stop().animate({
			scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight - 20
		}, 1000, 'easeInOutExpo');
	}
…

The difference of 24px results from the fact that headerHeight varies. When You click the link while
the header is expanded the result for scrollTop is 6491px. When it is resized the result is 6515px.
I could only fix that with a static value for headerHeight. So I changed the code as follows:

if (linkHref.indexOf('#') === 0) {
	var spacerHeight = jQuery(linkHref).height(),
		headerHeight = 0;
		
	if (jQuery('.sticky-header').length > 0) {
		headerHeight = jQuery('.sticky-header').outerHeight();
		/*	dmw		*/
	    headerHeight = 40;
		/*	/dmw	*/
	}
	if (jQuery('#wpadminbar').length > 0) {
		headerHeight += jQuery('#wpadminbar').outerHeight();

	}
	
	if (jQuery(linkHref).length > 0) {

		jQuery('html, body').stop().animate({
			scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight - 20
		}, 1000, 'easeInOutExpo');
	}
…

2. Issue:

When the page loads with the hash in the URL the scroll position
again is another and an js-error is thrown. This happens in #3033 – #3052

if (urlHash.match('#')) {
    var hash = urlHash.split('#')[1];
    		   
    if ( jQuery('#' + hash).length > 0 ) {
        var headerHeight = 0;
        	
        if (jQuery('.sticky-header').length > 0) {
        	headerHeight = jQuery('.sticky-header').height();
        }
        if (jQuery('#wpadminbar').length > 0) {
        	headerHeight = headerHeight + 28;
        }
        
        jQuery('html, body').stop().animate({
        	scrollTop: jQuery('#' + hash).offset().top - headerHeight - 30
        }, 600, 'easeInOutExpo');
        
        e.preventDefault();
    }
}

The error is throw in line 3050 because e is not defined there
and the scroll-posision is calculated different to the 1. case.
So I adjusted the code to the first case as follows:

if (urlHash.match('#')) {
    var hash = urlHash.split('#')[1];
    		   
    if ( jQuery('#' + hash).length > 0 ) {
        var linkHref = jQuery('#' + hash),
        spacerHeight = jQuery('#' + hash).height(),
		headerHeight = 0;

        if (jQuery('.sticky-header').length > 0) {
        	headerHeight = jQuery('.sticky-header').height();
			/*	dmw		*/
    		headerHeight = 40;
			/*	/dmw	*/					        	
        }
		/*	dmw		*/
        //if (jQuery('#wpadminbar').length > 0) {
        //	headerHeight = headerHeight + 28;
        //}					        
		if (jQuery('#wpadminbar').length > 0) {
			headerHeight += jQuery('#wpadminbar').outerHeight();
			
		}
		/*	dmw		*/
		/*	/dmw 	*/
        //jQuery('html, body').stop().animate({
        //	scrollTop: jQuery('#' + hash).offset().top - headerHeight - 30
        //}, 600, 'easeInOutExpo');
        // e.preventDefault();

        jQuery('html, body').stop().animate({
        	scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight - 20
        }, 600, 'easeInOutExpo');
		/*	/dmw	*/
        
    }
}

… and added window.scrollTo(0, 0); at the first line of the file to make
the (nice) scroll-animation visible.

After this changes the page scrolls to the same position in every case
but I made my changes in your file because I’ve found no other solution ;(

best,
heinetz

[heinetz]

Hi,

I solved it without modifying functions.js but I hope
my infos would be useful for you.

best,
heinetz

[heinetz]

and there is one thing left:

while the headers height is determined with jQ:outerHeight() I use a static value at the moment. the static value for the height of the resized header.

Is there any way to calulate this value while header is expanded?

best,
heinetz

[Mohammad – SUPPORT]

Hi,
Please use this code to get the resized header height:-

jQuery('.sticky-header.sticky-header-resized').height();

Thanks
Mohammad

[heinetz]

Hi,

the object jQuery(‘.sticky-header.sticky-header-resized’) exists while header is resized,
but I need to know the height before it’s resized.

best,
heinetz

[David Martin – Support]

You can use this CSS: .sticky-header:not(.sticky-header-resized)

[heinetz]

What i wanted to know was, how I could calculate the height of the resized header before it is resized.

best,
heinetz

[David Martin – Support]

Well broadly speaking like this:

var height = '0';
jQuery(window).on("load resize scroll",function(e){
    if (jQuery('.sticky-header').hasClass('sticky-header-resized')) {
    height = jQuery('.sticky-header').outerHeight();
} else {
    height = jQuery('.sticky-header').outerHeight();
}
console.log(height);
});

I have left in the console log output to help you see the value.