JS-utilities
added minimized version
This commit is contained in:
@@ -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!" );
|
||||
}
|
||||
}
|
||||
|
||||
+1
@@ -0,0 +1 @@
|
||||
function findPos(b){var c=0;var a=0;if(b.offsetParent){do{c+=b.offsetLeft;a+=b.offsetTop}while(b===b.offsetParent);return[c,a]}}function class_By_Y_Position(k,g,h,b,c,e){b=("undefined"!==typeof b)?b:0;c=("undefined"!==typeof c)?c:0;g=("undefined"!==typeof g)?g:"active";h=("undefined"!==typeof h)?h:"inactive";e=("undefined"!==typeof e)?e:false;var i;var l=document.getElementById(k);var a=0;var j=0;var i=findPos(l)[1];var f=function(){console.log("el pos: "+i)};a=i+b;var d=function(){var m=window.scrollY;if(m>a){if(c!=0&&m>(j)){addClass(l,h);removeClass(l,g)}else{removeClass(l,h);removeClass(l,"before");addClass(l,g);addClass(l,"after")}}else{addClass(l,h);addClass(l,"before");removeClass(l,g);removeClass(l,"after")}};switch(e){case true:a=b;j=c;break;case false:a=(i+b);j=(i+c);break}window.addEventListener("load",f);window.addEventListener("load",d);document.addEventListener("resize",f);document.addEventListener("resize",d);window.addEventListener("scroll",d)}function getheight(a){$identifier=a.substr(0,1);if($identifier==="."){return $element=document.getElementsByClassName(a.substr(1))[0].getBoundingClientRect().height}else{if($identifier==="#"){return $element=document.getElementById(a.substr(1)).getBoundingClientRect().height}else{console.log("Error identifying selector type!")}}};
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["element-position.scss"],"names":[],"mappings":"AAAA;EACE,WAAU;EACV,UAAS;EAET,4DAA2D,EAAA;EAC3D;IACE,mBAAkB;IAElB,YAAW;IACX,cAAa;IAEb,cAAa;IACb,uBAAsB;IAEtB,0BAAyB;IACzB,eAAc;IAEd,iBAAgB;IAEhB,uCAA8B;IAA9B,+BAA8B,EAAA;IAE9B;MACE,gBAAe;MACf,OAAM;MAEN,WAAU;MACV,cAAa,EAAA;IAGf;MACE,iBAAgB,EAAA;MAEhB;QACE,sBAAqB;QACrB,mBAAkB,EAAA;EAKxB;IAEE,YAAW;IACX,mBAAkB;IAClB,uBAAsB;IAEtB,eAAc;IACd,0BAAyB,EAAA;EAG3B;IACE,gBAAe;IACf,UAAS;IAET,WAAU;IACV,cAAa;IAEb,cAAa;IAEb,wBAAuB;IAEvB,uCAA8B;IAA9B,+BAA8B,EAAA;IAE9B;MACE,mBAAkB;MAClB,cAAa;MACb,YAAW;MACX,UAAQ,EAAA;IAGV;MACE,iBAAgB,EAAA;MAEhB;QACE,sBAAqB;QACrB,mBAAkB,EAAA","file":"element-position.css"}
|
||||
@@ -1,50 +0,0 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
body header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ff00ff;
|
||||
color: #006505;
|
||||
font-weight: 700;
|
||||
transition: all 1s ease-in-out; }
|
||||
body header.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
margin: 0 25%; }
|
||||
body header ul {
|
||||
list-style: none; }
|
||||
body header ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
body section {
|
||||
width: 100%;
|
||||
padding: 200px 25%;
|
||||
box-sizing: border-box;
|
||||
color: #bfffc0;
|
||||
background-color: #00a0d2; }
|
||||
body footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
margin: 0 25%;
|
||||
background-color: white;
|
||||
transition: all 1s ease-in-out; }
|
||||
body footer.relative {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin: 0; }
|
||||
body footer ul {
|
||||
list-style: none; }
|
||||
body footer ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
|
||||
/*# sourceMappingURL=element-position.css.tmp.map */
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,IAAK;EACH,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EAET,WAAW,EAAE,8CAA8C;EAC3D,WAAO;IACL,QAAQ,EAAE,QAAQ;IAElB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,KAAK;IAEb,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,UAAU;IAEtB,gBAAgB,EAAE,OAAO;IACzB,KAAK,EAAE,OAAO;IAEd,WAAW,EAAE,GAAG;IAEhB,UAAU,EAAE,kBAAkB;IAE9B,iBAAQ;MACN,QAAQ,EAAE,KAAK;MACf,GAAG,EAAE,CAAC;MAEN,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,KAAK;IAGf,cAAG;MACD,UAAU,EAAE,IAAI;MAEhB,iBAAG;QACD,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,IAAI;EAKxB,YAAQ;IAEN,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,UAAU;IAEtB,KAAK,EAAE,OAAO;IACd,gBAAgB,EAAE,OAAO;EAG3B,WAAO;IACL,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,CAAC;IAET,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,KAAK;IAEb,MAAM,EAAE,KAAK;IAEb,gBAAgB,EAAE,KAAK;IAEvB,UAAU,EAAE,kBAAkB;IAE9B,oBAAW;MACT,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,IAAI;MACX,MAAM,EAAC,CAAC;IAGV,cAAG;MACD,UAAU,EAAE,IAAI;MAEhB,iBAAG;QACD,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,IAAI",
|
||||
"sources": ["element-position.scss"],
|
||||
"names": [],
|
||||
"file": "element-position.css.tmp"
|
||||
}
|
||||
Reference in New Issue
Block a user