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'
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;">
#carousel1.slick-initialized {
visibility: visible !important;
}
TOOGLE slide elements
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>
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