[js] Preloader i problem z linkami.

rych54 · Listopad 3, 2014

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();

})();

likufanele · Listopad 3, 2014

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 Listopad 3, 2014 przez likufanele (zobacz historię edycji)

rych54 · Listopad 4, 2014

Niestety nie działa

likufanele · Listopad 4, 2014

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 Listopad 4, 2014 przez likufanele (zobacz historię edycji)

rych54 · Listopad 4, 2014

Ok super już jest prawie dobrze tylko czy da się tak zrobić aby po załadowaniu preloadera pokazywała się od razu sekcja np. O nas, Usługi itp a nie od samej góry przejeżdżało? Bo teraz wygląda to tak: http://krzysztofswitala.com/axirnew/gale.html

likufanele · Listopad 4, 2014

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 Listopad 4, 2014 przez likufanele (zobacz historię edycji)

rych54 · Listopad 4, 2014

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();

})();

likufanele · Listopad 5, 2014

Nie... teraz masz dwie funkcje noscroll() w main.js. Wywal obie.

rych54 · Listopad 5, 2014

Nie rozumiem. Nie ogarniam jeszcze js więc mam z tym problem. Mógłbyś mi to wstawić w ten kod?

likufanele · Listopad 5, 2014

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();

})();

rych54 · Listopad 5, 2014

Dzięki bardzo! Działa teraz fajowsko!

Zaloguj się

[js] Preloader i problem z linkami.

Polecane posty

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

likufanele 77

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

likufanele 77

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

likufanele 77

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

likufanele 77

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

likufanele 77

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

rych54 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Zaloguj się, aby skomentować

Przeglądaj

Aktywność