Bootstrap collapsible not pushing down parallax
0
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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 |
0
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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 |
0
0
0
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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']
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) 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
// 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() 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) ,
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() ,
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 );
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
0
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
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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
0
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
0
0
0
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
