Bootstrap collapsible not pushing down parallax
up vote
0
down vote
favorite
I got a website that was working earlier, and suddenly my bottom collapsible doesn't push the parallax down, it does push my <hr> down and also the footer, but not the parallax window, I'd be happy if someone could help me with this.
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>It does push the footer down, and the <hr> like I said, but not the parallax window...
[EDIT(adding js code)]
/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));[EDIT]
I'm using this parallax.js
Thanks in advance!
html css bootstrap-4 parallax.js
asked Nov 11 at 15:51
M0NST4H
11
add a comment |
up vote
0
down vote
favorite
I got a website that was working earlier, and suddenly my bottom collapsible doesn't push the parallax down, it does push my <hr> down and also the footer, but not the parallax window, I'd be happy if someone could help me with this.
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>It does push the footer down, and the <hr> like I said, but not the parallax window...
[EDIT(adding js code)]
/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));[EDIT]
I'm using this parallax.js
Thanks in advance!
html css bootstrap-4 parallax.js
asked Nov 11 at 15:51
M0NST4H
11
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I got a website that was working earlier, and suddenly my bottom collapsible doesn't push the parallax down, it does push my <hr> down and also the footer, but not the parallax window, I'd be happy if someone could help me with this.
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>It does push the footer down, and the <hr> like I said, but not the parallax window...
[EDIT(adding js code)]
/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));[EDIT]
I'm using this parallax.js
Thanks in advance!
html css bootstrap-4 parallax.js
asked Nov 11 at 15:51
M0NST4H
11
I got a website that was working earlier, and suddenly my bottom collapsible doesn't push the parallax down, it does push my <hr> down and also the footer, but not the parallax window, I'd be happy if someone could help me with this.
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>It does push the footer down, and the <hr> like I said, but not the parallax window...
[EDIT(adding js code)]
/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));[EDIT]
I'm using this parallax.js
Thanks in advance!
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/S+/g) || ;
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: ,
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));html css bootstrap-4 parallax.js
html css bootstrap-4 parallax.js
asked Nov 11 at 15:51
M0NST4H
11
asked Nov 11 at 15:51
M0NST4H
11
edited Nov 11 at 19:48
asked Nov 11 at 15:51
M0NST4H
11
asked Nov 11 at 15:51
M0NST4H
11
asked Nov 11 at 15:51
M0NST4H
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)
For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.
Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.
answered Nov 11 at 16:36
Martin Homola
1777
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the</head>and<body>are missing, will fix right now.
– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>with<div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.
– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
|
show 3 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)
For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.
Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.
answered Nov 11 at 16:36
Martin Homola
1777
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the</head>and<body>are missing, will fix right now.
– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>with<div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.
– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
|
show 3 more comments
up vote
0
down vote
First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)
For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.
Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.
answered Nov 11 at 16:36
Martin Homola
1777
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the</head>and<body>are missing, will fix right now.
– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>with<div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.
– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
|
show 3 more comments
up vote
0
down vote
up vote
0
down vote
First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)
For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.
Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.
answered Nov 11 at 16:36
Martin Homola
1777
First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)
For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.
Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.
answered Nov 11 at 16:36
Martin Homola
1777
answered Nov 11 at 16:36
Martin Homola
1777
answered Nov 11 at 16:36
Martin Homola
1777
answered Nov 11 at 16:36
Martin Homola
1777
1777
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the</head>and<body>are missing, will fix right now.
– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>with<div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.
– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
|
show 3 more comments
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the</head>and<body>are missing, will fix right now.
– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>with<div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.
– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the
</head> and <body> are missing, will fix right now.– M0NST4H
Nov 11 at 18:33
Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the
</head> and <body> are missing, will fix right now.– M0NST4H
Nov 11 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way.
– M0NST4H
Nov 11 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div> with <div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.– Martin Homola
Nov 11 at 18:57
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div> with <div style="width: 100%; min-height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>, it could help.– Martin Homola
Nov 11 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code).
– M0NST4H
Nov 11 at 19:36
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
Ok, can you please add your js code?
– Martin Homola
Nov 11 at 19:45
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250436%2fbootstrap-collapsible-not-pushing-down-parallax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
