simongehrig.de/js-utilities
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

JS-utilities

Browse Source 
added minimized version
This commit is contained in:
Simon Gehrig
2017-11-15 15:12:51 +01:00
parent a8cfd05769
commit f7c78cf322
7 changed files with 37 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
element-position/element-position.js
+34 -34
View File
@@ -6,20 +6,20 @@
// should be calculated and set the
// variables curleft and curtop to 0:
function findPos(obj) {
function findPos( obj ) {
"use strict";
var curleft = 0;
var curtop = 0;
if (obj.offsetParent) {
if ( obj.offsetParent ) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj === obj.offsetParent);
return [curleft, curtop];
} while ( obj === obj.offsetParent );
return [ curleft, curtop ];
}
}
function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) {
function class_By_Y_Position( $id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset ) {
// "use strict";
// Default values
$startoffset = ( "undefined" !== typeof $startoffset ) ? $startoffset : 0;
@@ -32,28 +32,28 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
var $elementtop;
// Get element
var $el = document.getElementById($id);
var $el = document.getElementById( $id );
// Get Start & End Pixel From Top
var $start = 0;
var $end = 0;
// Get el position
var $elementtop = findPos($el)[1];
var $elementtop = findPos( $el )[ 1 ];
var pos = function () {
console.log("el pos: " + $elementtop);
var pos = function() {
console.log( "el pos: " + $elementtop );
};
$start = $elementtop + $startoffset;
// What should we do when scrolling occurs
var runOnScroll = function () {
var runOnScroll = function() {
var $scrollpos = window.scrollY;
// Check if we are beyond the startpoint
if ($scrollpos > $start) {
if ( $scrollpos > $start ) {
// Now Check if it has an end
@@ -63,8 +63,8 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
) {
//Remove the class
addClass($el, $inactiveclass);
removeClass($el, $activeclass);
addClass( $el, $inactiveclass );
removeClass( $el, $activeclass );
//Scroll back the amount of end positioning to avoid jumps
// Todo maybe better to integrate in another function for scrolling/fixing etc.
@@ -74,25 +74,25 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
// In any other case add it
else {
removeClass($el, $inactiveclass);
removeClass($el, 'before');
removeClass( $el, $inactiveclass );
removeClass( $el, 'before' );
addClass($el, $activeclass);
addClass($el, 'after');
addClass( $el, $activeclass );
addClass( $el, 'after' );
}
}
//In any other case than being beyond start, remove the class
else {
addClass($el, $inactiveclass);
addClass($el, 'before');
addClass( $el, $inactiveclass );
addClass( $el, 'before' );
removeClass($el, $activeclass);
removeClass($el, 'after');
removeClass( $el, $activeclass );
removeClass( $el, 'after' );
}
};
switch ($absoluteoffset) {
switch ( $absoluteoffset ) {
case true:
$start = $startoffset;
@@ -109,25 +109,25 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
// And then make each element do something on scroll
// Trigger events
window.addEventListener("load", pos);
window.addEventListener("load", runOnScroll);
window.addEventListener( "load", pos );
window.addEventListener( "load", runOnScroll );
document.addEventListener("resize", pos);
document.addEventListener("resize", runOnScroll);
document.addEventListener( "resize", pos );
document.addEventListener( "resize", runOnScroll );
window.addEventListener("scroll", runOnScroll);
window.addEventListener( "scroll", runOnScroll );
}
function getheight($selector) {
$identifier = $selector.substr(0, 1);
function getheight( $selector ) {
$identifier = $selector.substr( 0, 1 );
if ($identifier === ".") {
if ( $identifier === "." ) {
return $element = document.getElementsByClassName(
$selector.substr(1))[0].getBoundingClientRect().height;
} else if ($identifier === "#") {
$selector.substr( 1 ) )[ 0 ].getBoundingClientRect().height;
} else if ( $identifier === "#" ) {
return $element = document.getElementById(
$selector.substr(1)).getBoundingClientRect().height;
$selector.substr( 1 ) ).getBoundingClientRect().height;
} else {
console.log("Error identifying selector type!");
console.log( "Error identifying selector type!" );
}
}