Javascript-s

Google Maps scroll after click

css:
.maps iframe{ pointer-events: none;}
js:
$j('.maps').click(function () {
$j('.maps iframe').css("pointer-events", "auto");
});

Naključna ozadja (na refresh)

<div id="bg">
    <div id="bg1"></div>
    <div id="bg2"></div>
    <div id="bg3"></div>
    <div id="bg4"></div>
</div>

 

$(document).ready(function() {

    var divs = ['bg1','bg2','bg3','bg4'];
    var chosenValue = divs[Math.floor((Math.random() * divs.length))];
    var chosenDiv = document.getElementById(chosenValue);
    chosenDiv.style.display = "block";

});

Prva beseda druge barve

$('.visual-title h3').each(function() {
var txt = $(this).html();
var index = txt.indexOf(' ');
if (index == -1) {
index = txt.length;
}
$(this).html('<span>' + txt.substring(0, index) + '</span>' + txt.substring(index, txt.length));
});

Ravnanje višine child elementov

$j(document).ready(function(){
$j(window).resize(function () {
matchChildrenHeights(".matchChildrenHeights");
});

$j(window).load(function () {
matchChildrenHeights(".matchChildrenHeights");
});

$j(document).ready(function () {
matchChildrenHeights(".matchChildrenHeights");
});

function matchChildrenHeights(classname) {
var maxh = 0;
$(".matchChildrenHeights > *:not(.cf)").each(function () {
$(this).height('auto');
if ($(this).height() > maxh) {
maxh = $(this).height();
}
});

$(".matchChildrenHeights > *:not(.cf)").height(maxh);
}
});

Ravnanje višine child elementov v vrstici

Ne dat v document-ready!

var equalheight = function(container){
		var currentTallest = 0,
		currentRowStart = 0,
		rowDivs = new Array(),
		$el,
		topPosition = 0;
		$(container).each(function() {
			$el = $(this);
			$($el).height('auto')
			topPostion = $el.position().top;

			if (currentRowStart != topPostion) {
				for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
					rowDivs[currentDiv].height(currentTallest);
				}
				rowDivs.length = 0; // empty the array
				currentRowStart = topPostion;
				currentTallest = $el.height();
				rowDivs.push($el);
			} else {
				rowDivs.push($el);
				currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
			}
			for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
				rowDivs[currentDiv].height(currentTallest);
			}
		});
	}

	$j(window).resize(function() {
		var winHeight = $j(".gallery-slider").height();
		$j(".gallery-image").height(winHeight);

		setHeight();
	}).resize();

	function setHeight() {
		if ($j(window).width()<786){
			$j('#content-container .map-stores .map-store').css("height", "auto");
		} else {
			equalheight('#content-container .map-stores .map-store');
		}
	}

	$(window).load(function() {
		equalheight('#footer .f-part');
		equalheight('.nasveti-list .element');
		equalheight('.otok-height');

		setHeight();
	});

H1 - prva beseda v /span/

$('h1').each(function() {
    var txt = $(this).html();
    var index = txt.indexOf(' ');
    if (index == -1) {
        index = txt.length;
    }
    $(this).html('<span>' + txt.substring(0, index) + '</span>' + txt.substring(index, txt.length));
});

Puščica NA VRH

JS:

 $(".backtop").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.backtop').fadeIn();
} else {
$('.backtop').fadeOut();
}
});
$('.backtop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
< div class="backtop" >< /div >

Window width

if ($j(window).width()>770){
    new WOW().init();
}

SLICK slider EASING

easing: 'easeOutCubic'

http://easings.net/

Hide IMAGE on scroll

$(window).scroll(function(){
    $(".reference-main-image").css("opacity", 1 - $(window).scrollTop() / 650);
});

FIXED HEADER

$(window).scroll(function() {
if ($(this).scrollTop() > 30){
$('body, .header-container').addClass("down");
}
else{
$('body, .header-container').removeClass("down");
}
});

Manipulate SVG

// MANIPULATE SVG IMAGES //
$('img[src$=".svg"]').each(function() {
var $img = jQuery(this);
var imgURL = $img.attr('src');
var attributes = $img.prop("attributes");

$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');

// Remove any invalid XML tags
$svg = $svg.removeAttr('xmlns:a');

// Loop through IMG attributes and apply on SVG
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});

// Replace IMG with SVG
$img.replaceWith($svg);
}, 'xml');
});
// end MANIPULATE SVG IMAGES //

SLICK SLIDER visibility hidden

V parent div dodaj style visibility hidden, da se slisk container skrije:

<div id="carousel1" style="visibility: hidden;">
 
Ko se slick slider inicializira, dobi class slick-initialized.
 
V CSS dodaj sledeče:
#carousel1.slick-initialized {
    visibility: visible !important;
}

TOOGLE slide elements

var sliding = false;
varslideTime = 500;
$j('.denarnik-faq .element .content').hide();
$j( ".denarnik-faq .element .title" ).click(function() {
   if (sliding) return;

   sliding = true;
   $j('.denarnik-faq .element .content').slideUp(slideTime);
   if($(this).next().is(':hidden')) {
      $(this).next().slideToggle(slideTime);
   }
   setTimeout(function() { sliding = false; }, slideTime);
});
 

$('.showmoreButton').on('click', function() {
  $(this).toggleClass('active');
  $(this).closest('.content-edit').find('.showmore').slideToggle(500, 'ease-in', function() {

  });
});

CHROME DEBUGGER STOP

setTimeout(function(){debugger;}, 3000)

Easy paralax banner JS

https://www.youtube.com/watch?v=TawH-AqHTXc


    <section class="parallax-content">

        <img src="./img/parallax/bg.jpg" id="pbg">
        <img src="./img/parallax/moon.png" id="pmoon">
        <img src="./img/parallax/mountain.png" id="pmountain">
        <img src="./img/parallax/road.png" id="proad">
        <h2 id="parallaxtitle">Moon light</h2>      
    </section>
 
----------------------------------------------------------------------------

$(window).scroll(function(){

  var bg = document.getElementById("pbg");
  var moon = document.getElementById("pmoon");
  var mountain = document.getElementById("pmountain");
  var road = document.getElementById("proad");
  var text = document.getElementById("parallaxtitle");

  var value = window.scrollY;

  bg.style.top = value * 0.5 + 'px';
  moon.style.left = -value * 0.5 + 'px';
  mountain.style.top = -value * 0.15 + 'px';
  road.style.top = value * 0.15 + 'px';
  text.style.top = value * 1 + 'px';
})
 
--------------------------------------------------------------------------------
.parallax {
    min-height: 1500px;
    .parallax-content {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to top, $primary, transparent);
            z-index: 1000;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: $primary;
            z-index: 1000;
            mix-blend-mode: color;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        #proad {
            z-index: 2;
        }

        #parallaxtitle {
            position: relative;
            color: $white;
            font-size: 250px;
            z-index: 1;
        }
    }
}

Check for overflow elements

 


// when you're trying to use `position:sticky` on an element
// you'll have trouble if any parent/ancestor element has
// overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll)
// & turns out if a parent is `display:flex` it might need some love
// (to remedy this you can set the `align-self` of your sticky element)
// see here for how the display & align-self properties affect: http://bit.ly/2ZaRu4o

 

// so, to find those troublesome parents...
// copy & paste this into Chrome Inspector/Dev Tools console
// (and be sure to change the #stickyElement below, if needed)

 

function findOverflowParents(element, initEl) {

 

function notVisible(el) {
let overflow = getComputedStyle(el).overflow;
return overflow !== "visible";
}

 

function displayFlex(el) {
let display = getComputedStyle(el).display;
return display === "flex";
}

 

let thisEl = element;
if (!initEl) console.log('** Overflow check commence!', thisEl);
let origEl = initEl || thisEl;
if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, { issue: "OVERFLOW IS NOT VISIBLE", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl });
if (displayFlex(thisEl)) console.warn("Flex found on:", thisEl.tagName, { issue: "DISPLAY IS FLEX", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl });
if (thisEl.parentElement) {
return findOverflowParents(thisEl.parentElement, origEl);
} else {
return console.log('** Overflow check complete! original element:', origEl);
}

 

}

 

// to use a selector, change `#stickyElement` to your desired selector
// findOverflowParents(document.querySelector('#stickyElement'));

 

// or use $0 for the last element selected in the Chrome Inspector
findOverflowParents($0);

 

test