Skocz do zawartości
Zaloguj się, aby obserwować  
rych54

[js] Preloader i problem z linkami.

Polecane posty

Cześć. Mam problem. Stworzyłem stronę: http://krzysztofswitala.com/axirnew/gale.html i gdy chce z tej podstrony wrócić do np. sekcji kontakt na stronie głównej to przenosi mnie cały na samą górę strony. Wiem już, że problem jest z preloaderem i do pliku main.js trzeba dodać kod

jQuery('html, body').animate({
    scrollTop: jQuery(location.hash).offset().top
}, 2000);

Tylko mam problem bo nie wiem, w którym miejscu dodać ten fragment aby wszystko działało poprawnie. Z góry dzięki za pomoc.

 

main.js

/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

	var support = { animations : Modernizr.cssanimations },
		container = document.getElementById( 'ip-container' ),
		header = container.querySelector( 'header.ip-header' ),
		loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
		animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

	function init() {
		var onEndInitialAnimation = function() {
			if( support.animations ) {
				this.removeEventListener( animEndEventName, onEndInitialAnimation );
			}

			startLoading();
		};

		// disable scrolling
		window.addEventListener( 'scroll', noscroll );

		// initial animation
		classie.add( container, 'loading' );

		if( support.animations ) {
			container.addEventListener( animEndEventName, onEndInitialAnimation );
		}
		else {
			onEndInitialAnimation();
		}
	}

	function startLoading() {
		// simulate loading something..
		var simulationFn = function(instance) {
			var progress = 0,
				interval = setInterval( function() {
					progress = Math.min( progress + Math.random() * 0.1, 1 );

					instance.setProgress( progress );

					// reached the end
					if( progress === 1 ) {
						classie.remove( container, 'loading' );
						classie.add( container, 'loaded' );
						clearInterval( interval );

						var onEndHeaderAnimation = function(ev) {
							if( support.animations ) {
								if( ev.target !== header ) return;
								this.removeEventListener( animEndEventName, onEndHeaderAnimation );
							}

							classie.add( document.body, 'layout-switch' );
							window.removeEventListener( 'scroll', noscroll );
						};

						if( support.animations ) {
							header.addEventListener( animEndEventName, onEndHeaderAnimation );
						}
						else {
							onEndHeaderAnimation();
						}
					}
				}, 80 );
		};

		loader.setProgressFn( simulationFn );
	}
	
	function noscroll() {
		window.scrollTo( 0, 0 );
	}

	init();

})();

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Musisz edytować plik js/scripts.js, znaleźć w nim sekcję /***************** Smooth Scrolling ******************/ i zamienić ją na następującą:

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    wp_scroll(this);

  });
  
  wp_scroll(location.href);
  
});

function wp_scroll(url){
    if (location.pathname.replace(/^\//,'') == url.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = jQuery(url.hash);
      target = target.length ? target : jQuery('[name=' + url.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top -90
        }, 1000);
        return false;
      }
    }
}
Edytowano przez likufanele (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Ok... to inaczej. Zamień tą samą sekcję na to:

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function(e) {
    // e.preventDefault();
    wp_scroll(this);    
  });
});

function wp_scroll(url){
    if (location.pathname.replace(/^\//,'') == url.pathname.replace(/^\//,'') && location.hostname == url.hostname) {

      var target = jQuery(url.hash);
      target = target.length ? target : jQuery('[name=' + url.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top -90
        }, 1000);
        return false;
      }
    }
}


A w pliku js/main.js po linii nr 67 dodaj wp_scroll(location); żeby wyglądało tak:

(...)
var onEndHeaderAnimation = function(ev) {
	if( support.animations ) {
		if( ev.target !== header ) return;
		this.removeEventListener( animEndEventName, onEndHeaderAnimation );
	}

	classie.add( document.body, 'layout-switch' );
	window.removeEventListener( 'scroll', noscroll );
	wp_scroll(location);
};
(...)
Edytowano przez likufanele (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Da się...

 

W pliku js/main.js wywal poprzednio dodane wp_scroll(location); z linii 68, zakomentuj linię 32 oraz całą funkcję noscroll():

(...)
// disable scrolling
// window.addEventListener( 'scroll', noscroll );
(...)
//function noscroll() {
//	window.scrollTo( 0, 0 );
//}
W pliku js/scripts.js zamień znaną już nam sekcję na to co poniżej:

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function(e) {
    // e.preventDefault();
    wp_scroll(this);
  });
  wp_scroll(location, 'load');
});
 
var wx = 0;
var wy = 0;
 
function noscroll() {
    window.scrollTo( wx, wy );
}
 
function wp_scroll(url, origin){
    if (location.pathname.replace(/^\//,'') == url.pathname.replace(/^\//,'') && location.hostname == url.hostname) {
 
      var target = jQuery(url.hash);
      target = target.length ? target : jQuery('[name=' + url.hash.slice(1) +']');
      if (target.length) {
        
        if( origin == 'load' ){
            jQuery('html,body').scrollTop(target.offset().top -90);
            wx = window.scrollX;
            wy = window.scrollY;
            window.addEventListener( 'scroll', noscroll);
        } else {
            jQuery('html,body').animate({
                scrollTop: target.offset().top -90
            }, 1000);
        }
        return false;
      }
    }
}
Edytowano przez likufanele (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Nie wiem czy oto chodziło z plikiem main.js

/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {


	var support = { animations : Modernizr.cssanimations },
		container = document.getElementById( 'ip-container' ),
		header = container.querySelector( 'header.ip-header' ),
		loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
		animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

	function init() {
		var onEndInitialAnimation = function() {
			if( support.animations ) {
				this.removeEventListener( animEndEventName, onEndInitialAnimation );
			}

			startLoading();
		};

		function noscroll() {
			window.scrollTo( 0, 0 );
		}

		// initial animation
		classie.add( container, 'loading' );

		if( support.animations ) {
			container.addEventListener( animEndEventName, onEndInitialAnimation );
		}
		else {
			onEndInitialAnimation();
		}
	}


	function startLoading() {
		// simulate loading something..
		var simulationFn = function(instance) {
			var progress = 0,
				interval = setInterval( function() {
					progress = Math.min( progress + Math.random() * 0.1, 1 );

					instance.setProgress( progress );

					// reached the end
					if( progress === 1 ) {
						classie.remove( container, 'loading' );
						classie.add( container, 'loaded' );
						clearInterval( interval );

						var onEndHeaderAnimation = function(ev) {
							if( support.animations ) {
								if( ev.target !== header ) return;
								this.removeEventListener( animEndEventName, onEndHeaderAnimation );
							}

							classie.add( document.body, 'layout-switch' );
							window.removeEventListener( 'scroll', noscroll );

						};

						if( support.animations ) {
							header.addEventListener( animEndEventName, onEndHeaderAnimation );
						}
						else {
							onEndHeaderAnimation();
						}
					}
				}, 80 );
		};
		
		loader.setProgressFn( simulationFn );


	}
	
	function noscroll() {
		window.scrollTo( 0, 0 );
	}

	init();

})();

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Tu masz cały main.js:

/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {


	var support = { animations : Modernizr.cssanimations },
		container = document.getElementById( 'ip-container' ),
		header = container.querySelector( 'header.ip-header' ),
		loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
		animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

	function init() {
		var onEndInitialAnimation = function() {
			if( support.animations ) {
				this.removeEventListener( animEndEventName, onEndInitialAnimation );
			}

			startLoading();
		};

		// initial animation
		classie.add( container, 'loading' );

		if( support.animations ) {
			container.addEventListener( animEndEventName, onEndInitialAnimation );
		}
		else {
			onEndInitialAnimation();
		}
	}


	function startLoading() {
		// simulate loading something..
		var simulationFn = function(instance) {
			var progress = 0,
				interval = setInterval( function() {
					progress = Math.min( progress + Math.random() * 0.1, 1 );

					instance.setProgress( progress );

					// reached the end
					if( progress === 1 ) {
						classie.remove( container, 'loading' );
						classie.add( container, 'loaded' );
						clearInterval( interval );

						var onEndHeaderAnimation = function(ev) {
							if( support.animations ) {
								if( ev.target !== header ) return;
								this.removeEventListener( animEndEventName, onEndHeaderAnimation );
							}

							classie.add( document.body, 'layout-switch' );
							window.removeEventListener( 'scroll', noscroll );
						};

						if( support.animations ) {
							header.addEventListener( animEndEventName, onEndHeaderAnimation );
						}
						else {
							onEndHeaderAnimation();
						}
					}
				}, 80 );
		};
		
		loader.setProgressFn( simulationFn );


	}
	
	init();

})();

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się

Zaloguj się, aby obserwować  

×