Difference between revisions of "MediaWiki:Nookipedia-timeless.js"

From Nookipedia, the Animal Crossing wiki
(Fine, we'll do it the boring way)
(Controlling text logo visibility via opacity+visibility instead of display)
Line 10: Line 10:
 
if ($(window).width() > 1099) {
 
if ($(window).width() > 1099) {
 
if ($(window).scrollTop() > 130) {
 
if ($(window).scrollTop() > 130) {
$('#p-logo-text').fadeIn();
+
if ($('#p-logo-text').css('opacity') == 0) {
 +
$('#p-logo-text').css('visibility', 'visible');
 +
$('#p-logo-text').animate({ opacity: 1 }, 250);
 +
}
 
} else {
 
} else {
$('#p-logo-text').fadeOut();
+
if ($('#p-logo-text').css('opacity') == 1) {
 +
$('#p-logo-text').css('visibility', 'hidden');
 +
$('#p-logo-text').animate({ opacity: 0 }, 250);
 +
}
 
}
 
}
 
} else {
 
} else {
$('#p-logo-text').fadeIn();
+
if ($('#p-logo-text').css('opacity') == 0) {
 +
$('#p-logo-text').css('visibility', 'visible');
 +
$('#p-logo-text').animate({ opacity: 1 }, 250);
 +
}
 
}
 
}
 
}
 
}

Revision as of 02:51, June 5, 2021

/* Any JavaScript here will be loaded for users using the Timeless skin */
/*
   JavaScript for Timeless is also loaded from the following gadgets:
     MediaWiki:Gadget-CollapsibleNav.js
*/

$(document).ready(function() {
	/* On desktop, display text logo once user scrolls down */
	function toggleTextLogo() {
		if ($(window).width() > 1099) {
			if ($(window).scrollTop() > 130) {
				if ($('#p-logo-text').css('opacity') == 0) {
					$('#p-logo-text').css('visibility', 'visible');
					$('#p-logo-text').animate({ opacity: 1 }, 250);
				}
			} else {
				if ($('#p-logo-text').css('opacity') == 1) {
					$('#p-logo-text').css('visibility', 'hidden');
					$('#p-logo-text').animate({ opacity: 0 }, 250);
				}
			}
		} else {
			if ($('#p-logo-text').css('opacity') == 0) {
				$('#p-logo-text').css('visibility', 'visible');
				$('#p-logo-text').animate({ opacity: 1 }, 250);
			}
		}
	}
	$(window).scroll(toggleTextLogo);
	$(window).resize(toggleTextLogo);
	
	/* Open Social links in new tab/window */
	$( '#n-Discord' ).find( 'a' ).attr( 'target' , '_blank' );
	$( '#n-Twitter' ).find( 'a' ).attr( 'target' , '_blank' );
	$( '#n-Instagram' ).find( 'a' ).attr( 'target' , '_blank' );
	$( '#n-Facebook' ).find( 'a' ).attr( 'target' , '_blank' );
});