I've been wrestling with this problem for a while without success, so I'm hoping someone with greater knowledge can offer a solution.
By using a script to independently control the scroll speeds of specific divs, I've managed to create an effect along the lines of parallax scrolling:
https://neilwhitedesign.co.uk/pt_testing_area/index(scrolling).html
However, what I would also like to add, is a second script to reduce the size of the logo when the page is scrolls:
https://neilwhitedesign.co.uk/pt_testing_area/index(headershrink).html
Independently, these scripts are working exactly as I want them, but when I try to combine the two, there is a conflict and only the scrolling effect works.
Looking at similar questions posted previously, one solution was to add a further script between the two, to call a noConflict.
However, while adding this now makes the shrinking image effect work, it does so at the expense of the scrolling effect.
Is what I'm trying to achieve possible?
Is there a simple solution to get around the conflict?
Please find my html and css below:
HTML
window.onscroll = function() {
growShrinkLogo()
};
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<link rel="stylesheet" type="text/css" href="https://neilwhitedesign.co.uk/pt_testing_area/css.css" />
<body>
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021
<script src="https://neilwhitedesign.co.uk/pt_testing_area/js/copyright.js"></script> | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
Any guidance would be greatly appreciated.
Thanks
Neil White
You should never use on* handlers (unless you're creating a brand new element from in-memory) use .addEventListener() instead or the jQuery method .on() - that way handlers are attached to an element, not overwritten.
Place <script> tags (all of them) right before the closing </body> tag
Use classList.toggle or jQuery's .toggleClass()
You don't need two classes for big and small logo - only one.
jQuery plugins should use return to allow for methods chainability
Here's a remake of the plugin and your scripts:
// moveIt jQuery plugin
$.fn.moveIt = function() {
const $window = $(window);
const instances = [];
const updateItems = () => {
const scrTop = $window.scrollTop();
instances.forEach((inst) => inst.update(scrTop));
};
$window.on("scroll", updateItems); // Do on scroll
updateItems(); // and on page load
// Use "return" to allow $ methods chainability
return this.each(function(i, el) {
instances.push(new moveItItem(el));
});
}
function moveItItem(el) {
this.el = $(el);
this.speed = parseInt(this.el.data("scroll-speed"));
};
moveItItem.prototype.update = function(scrTop) {
this.el.css({transform: `translateY(${scrTop / this.speed}px)`});
};
// App
const $window = $(window);
const $logo = $("#Logo");
const docTop = 90;
function growShrinkLogo() {
$logo.toggleClass("small", $window.scrollTop() > docTop);
}
$window.on("scroll", growShrinkLogo); // Do on scroll
growShrinkLogo(); // and on page load
// moveIt plugin init:
$('[data-scroll-speed]').moveIt();
#charset "utf-8";
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
width: 350px;
}
#Logo.small {
width: 250px;
}
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<div class="header">
<div class="logo_container"><img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">This is the tagline</div>
<div class="parallax" data-scroll-speed="2"><img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" /></div>
</div>
<div class="content" data-scroll-speed="100">Content Area</div>
<footer>© 2021 | All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
It is because you declare window.onscroll twice and therefor it overwrites the first declaration. You just have to add the call of growShrinkLogo() to the second window.onscroll.
Working example:
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 90;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 90;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.className = 'smallLogo';
size = 1;
} else if (size == 1 && scroll <= endOfDocumentTop) {
Logo.className = 'largeLogo';
size = 0;
}
}
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
growShrinkLogo();
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + +pos + 'px)');
};
$(function() {
$('[data-scroll-speed]').moveIt();
});
#charset "utf-8";
/* CSS Document */
/* 2. Clearfix*/
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1
}
/* 3. Images*/
a img {
border: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
/* 4. Structure*/
body {
background: #fff;
color: #555;
line-height: 1.9;
margin: 0 auto;
}
.header {
background: white;
display: block;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;
z-index: 99;
}
.parallax_container {
width: 100%;
}
.parallax {
padding-top: 50px;
}
.tagline {
color: white;
font-size: 75px;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
right: 5%;
text-align: center;
cursor: pointer;
line-height: 1.2;
z-index: 97;
}
.content {
background: yellow;
height: 900px;
z-index: 98;
}
/* 5. Logo*/
.logo_container {
width: inherit;
padding: 10px;
}
#Logo {
-webkit-transition: width .5s ease;
-o-transition: width .5s ease;
transition: width .5s ease;
}
.largeLogo {
width: 350px;
}
.smallLogo {
width: 250px;
}
/* 6. Footer */
footer {
display: block;
height: 50px;
font-size: 13px;
margin: 0 auto;
padding: 25px 0 0 0;
position: relative;
text-align: center;
width: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="logo_container">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/logo.png" class="largeLogo" id='Logo'>
</div>
</div>
<div class="parallax_container">
<div class="tagline" data-scroll-speed="3">
This is the tagline
</div>
<div class="parallax" data-scroll-speed="2">
<img src="https://neilwhitedesign.co.uk/pt_testing_area/landscape.jpg" />
</div>
</div>
<div class="content" data-scroll-speed="100">
Content Area
</div>
<footer>
© 2021 | All rights reserved.
</footer>
Related
< script >
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
<
/script>
<style>body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.container1 {
height: 10vh;
background-color: white;
z-index: 100;
position: absolute;
top: 0;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
z-index: 100;
}
.backgroundimage {
background-image: url("M0000-021-014_edited.jpg");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
position: relative;
}
.leftthing {
width: calc(100% - 400px);
float: left;
}
.leftthing img {
width: 100%;
}
.clear {
clear: both;
}
.show {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 10vh;
background-color: white;
}
a {
text-decoration: none;
font-family: 'Karla';
}
a:visited {
text-decoration: none;
}
/* menu*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* menu moving footer*/
#bottommenu {
position: fixed;
z-index: 100;
/* margin-left: 60px;*/
bottom: 0px;
background-color: transparent;
/* padding: 0px;*/
/* text-align: left;*/
width: 100%;
display: block;
transition: bottom 0.5s;
height: 10vh;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<div class="backgroundimage"></div>
<div class="container1">
<div class="header">
<div class="logo" onclick="scrollWin()">|bacheva
</div>
</div>
</div>
<div class="leftthing">
<img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
<img src="INTERIOR%20RENDER.jpg" alt="interior render">
<img src="exterior%20render.jpg" alt="exterior render">
<img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
<img src="READY%20CLIMATE%20SCHEME.jpg" alt="climate scheme">
</div>
<div class="clear"></div>
<div class="container">
<ul style="font-family: 'Karla';font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
<div id="bottommenu">
<ul style="font-size:22px;">
<li>|about</li>
<li>|work</li>
<li>|home</li>
</ul>
</div>
</body>
</html>
I have the following page:
I full-screen background picture
some content with pictures when you scroll down
and a menu on the bottom right (with a height of 10vh)
I am using a javascript function that does the following: When you scroll down the menu is not shown, but when you scroll up the content, the menu appears on the bottom right. When you reach the full-screen background picture on the top the menu is set to hide again to not obstruct the picture. However, currently when you reach the top of the page, you see the menu for a millisecond before it hides again. Therefore, my question is: Can I alternate the javascript function and tell the menu to disappear 10vh before it reaches the full-size background picture so I would not see it before it disappears when I reach the top of the page.
Here is the function I am using:
<script>
document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos < currentScrollPos) {
document.getElementById("bottommenu").style.bottom = "-10vh";
} else {
document.getElementById("bottommenu").style.bottom = "0";
}
if (currentScrollPos == 0) {
document.getElementById("bottommenu").style.bottom = "-10vh";
}
prevScrollpos = currentScrollPos;
}
</script>
Looking at the last 'if' the menu disappears when the current scroll is '0', but I would rather have it disappear before it reaches this last possible scroll (before it reaches the full-screen background picture.)
Thank you in advance for your help.
Want to create the pre-loader page, and have reference URL "https://www.priyaty.com/".
But somehow I'm not able to create the same loader as the above link.
I'm facing an issue when I applied the few CSS but, somehow I'm not matched with the above link loader.
can anyone help me out to build the same loader?
I'm using HTML, CSS, and JavaScript
function counter() {
var count = setInterval(function() {
var c = document.getElementById("counter")
int = parseInt(c.textContent);
c.textContent = (++int).toString();
if (int == 100) {
clearInterval(count);
c.classList.add("hide");
document.getElementById("preloader").classList.add("slide-up")
}
}, 40)
}
counter();
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.preloader .preloaderp {
font-size: 5em;
font-weight: bold;
color: rgba(255, 255, 255, .05);
position: absolute;
padding: 15px;
text-align: center;
text-transform: uppercase;
}
.preloader.slide-up {
height: 0px;
transition: .5s;
transition-delay: 1s;
font-size: 0px;
}
.counter {
font-size: 5em;
color: #fff;
font-weight: bold;
}
.counter.hide {
opacity: 0;
transition: 1s;
}
.counter::after {
content: "%";
font-size: .5em;
}
#media only screen and (max-width: 575px) {
.preloaderp {
font-size: 2em;
}
.counter {
font-size: 2em;
}
}
<div class="preloader" id="preloader">
<p class="preloaderp">Loading</p>
<div class="counter" id="counter">
0
</div>
</div>
Were you looking for this?
var counting = setInterval(function() {
var loader = document.getElementById("loader");
var currval = parseInt(loader.innerHTML);
var Width = 100 - currval;
var loadscreen = document.getElementById("loadscreen");
loader.innerHTML = ++currval;
if (currval === 100) {
clearInterval(counting);
loadscreen.style.display = "none";
}
loadscreen.style.transition = "0.1s";
loadscreen.style.width = Width + "%";
}, 10);
.loading-screen {
width: 100%;
height: 100%;
}
.loader {
font-size: 50px;
font-family: Arial;
position: fixed;
left: 45%;
z-index: 1000;
color: red;
}
.loader:after {
content: " %";
font-size: 100%;
}
.after-load {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
border: none;
}
<div class="loading-screen"></div>
<div class="after-load" id="loadscreen">
<div class="loader" style="top: 50%;" id="loader">0</div>
</div>
I need a way to force each image to fill the div no matter the size of the div. I thought this is what width: 100% was supposed to do but it's not working the way I expected it to.
Link to CodePen
const carousels = document.querySelectorAll('.image-carousel');
[].forEach.call(carousels, c => {
let next = document.querySelector('.next'),
prev = document.querySelector('.previous'),
bubblesContainer = document.querySelector('.bubbles'),
inner = document.querySelector('.inner'),
imgs = document.querySelectorAll('img'),
currentImageIndex = 0,
width = 100,
bubbles = [];
for (let i = 0; i < imgs.length; i++) {
let b = document.createElement('span');
b.classList.add('bubble');
bubblesContainer.append(b);
bubbles.push(b);
b.addEventListener('click', () => {
currentImageIndex = i;
switchImg();
});
}
function switchImg() {
inner.style.left = -width * currentImageIndex + '%';
bubbles.forEach(function (b, i) {
if (i === currentImageIndex) {
b.classList.add('active');
} else {
b.classList.remove('active');
}
});
}
next.addEventListener('click', () => {
currentImageIndex++;
if (currentImageIndex >= imgs.length) {
currentImageIndex = 0;
}
switchImg();
});
prev.addEventListener('click', () => {
currentImageIndex--;
if (currentImageIndex < 0) {
currentImageIndex = imgs.length - 1;
}
switchImg();
});
switchImg();
});
img {
height: 100%;
min-width: 100%;
}
.image-carousel {
width: 100%;
height: 50vh;
overflow: hidden;
position: relative;
}
.image-carousel .inner {
display: flex;
position: absolute;
left: 0;
transition: left 0.5s;
width: 100%;
height: 100%;
}
.image-carousel .bubbles {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 5px;
}
.image-carousel .bubbles .bubble {
margin: 0 1rem 0.5rem;
background: white;
border-radius: 100%;
width: 10px;
height: 10px;
display: inline-block;
opacity: 0.25;
transition: 0.1s;
cursor: pointer;
}
.image-carousel .bubbles .bubble:hover {
opacity: 0.65;
}
.image-carousel .bubbles .bubble.active {
opacity: 1;
}
.image-carousel .next::after, .image-carousel .previous::after {
content: '>';
position: absolute;
top: 50%;
right: 0;
background: white;
width: 1rem;
height: 3rem;
font-weight: bold;
transform: translatey(-50%);
line-height: 3rem;
box-sizing: border-box;
padding: 0 0.2rem;
cursor: pointer;
}
.image-carousel .previous::after {
left: 0;
content: '<';
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="image-carousel">
<div class="inner">
<img class="carousel one" src="https://via.placeholder.com/100x100">
<img class="carousel two" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
</div>
<div class="bubbles"></div>
<div class="previous"><button><</button></div>
<div class="next"><button>></button></div>
</div>
</div>
</div>
</div>
You can try adding display:block; min-width: 100%; Min-width forces element to fill parents width.
The issue is that you've set the .inner element's display property to flex.
You can remove flex or add flex: 0 0 100% to your images like so:
.inner {
..
img {
flex: 0 0 100%;
}
}
flex: 0 0 100% is telling the element inside a flex container to not shrink, or expand, and take up 100% of its parent.
Don't know how to make a static slide , got this sliding down animation.
What should I change?
Maybe I made smth with 'position' property?
Or with positioning in general?
Or my JS sucks....
#slides {
position: relative;
height: 500px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
width: 600px;
height: 500px;
margin-top: 0px;
margin-left: 500px;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
.controls {
display: none;
}
.slide {
font-size: 40px;
padding: 70px;
box-sizing: border-box;
background: #333;
color: #fff;
background-size: cover;
}
.controls {
background: #333;
color: #fff;
border: none;
padding: 20px 0px;
font-size: 20px;
cursor: pointer;
border: 2px solid #fff;
margin: 10px 0px 0px 10px;
display: flex;
justify-content: center;
align-items: center;
width: 70px;
position: relative;
left: 38%;
margin-top: 25px;
}
.controls:hover,
.controls:focus {
background: #eee;
color: #333;
}
.buttons {
position: absolute;
left: 0px;
top: 0px;
z-index: 20;
font-size: 0px;
}
.controls:nth-of-type(2), .controls:nth-of-type(3) {
width: 9%;
}
// Some JS
var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
controls[i].style.display = 'inline-block';
}
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide(){
goToSlide(currentSlide+1);
}
function previousSlide(){
goToSlide(currentSlide-1);
}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';
}
var playing = true;
var pauseButton = document.getElementById('pause');
function pauseSlideshow(){
pauseButton.innerHTML = '►'; // play character
playing = false;
clearInterval(slideInterval);
}
function playSlideshow(){
pauseButton.innerHTML = '❚❚'; // pause character
playing = true;
slideInterval = setInterval(nextSlide,2000);
}
pauseButton.onclick = function(){
if(playing){ pauseSlideshow(); }
else{ playSlideshow(); }
};
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){
pauseSlideshow();
nextSlide();
};
previous.onclick = function(){
pauseSlideshow();
previousSlide();
};
Sorry, that it is without comments :(
You don't want to use the opacity property to hide the image, it will still "occupy the space" and therefore move the elements down,
You'll need to use the display which will simply not draw anything for this element and not allocate any space for it.
In your CSS, replace opacity: 0 in the .slide by display: none
and replace opacity: 1 in the .showing by display: block
It should fix your problem
Here is a sample of what I got so far. Click Here
In my HTML, I have this :
<div id="mainContainer">
<div id="header">
<p>header here</p>
</div>
<div id="centerRightColumnContainer">
<div id="centerRightColumnPositioner">
<div id="centerColumnContainer">
<div id="centerColumn">
<p>menu here</p>
</div>
</div>
</div>
</div>
<div id="sideBarLeft">
<p>side bar</p>
</div>
</div>
In my css i have :
body
{
margin: 0;
padding: 0;
height: 100%;
}
#bg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 960px;
z-index: -1;
}
body > #bg
{
position: relative;
z-index: 1;
}
#mainContainer
{
position: relative;
min-width: 960px;
top: 0;
left: 0;
z-index: 2;
}
#header
{
background-color: black;
margin: 0;
padding: 10px;
}
#centerRightColumnContainer
{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#centerRightColumnPositioner
{
margin-left: 190px;
padding: 0;
}
#sideBarLeft
{
float: left;
width: 190px;
margin-left: -100%;
padding: 0;
background-color : maroon;
}
#centerColumnContainer
{
float: left;
width: 100%;
background-color : gray;
}
#centerColumn
{
/* margin-right: 260px; */
padding: 10px;
}
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
margin: 0;
padding: 0;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.clear_both
{
clear: both;
}
#sideBarLeft p
{
margin: 10px auto;
width: 170px;
}
#rightColumnBg > #sideBarLeft
{
height: auto;
}
lastly in JS :
function resize_bg_div(){
var var_bg_offset = document.getElementById('header').offsetHeight;
array_colHeights = new Array( );
array_colHeights.push( document.getElementById("sideBarLeft").offsetHeight );
array_colHeights.push( document.getElementById("centerColumn").offsetHeight );
array_colHeights.push( window.innerHeight - var_bg_offset );
array_colHeights.sort( function( a, b ){ } );
document.getElementById('bg').style.height = array_colHeights[0] + "px";
delete array_colHeights;
delete var_bg_offset;
}
window.onload = resize_bg_div;
window.onresize = resize_bg_div;
Now, I want to set the side bar and the content to maximum height even when it has no text or any content in it.. Any help would be appreciated. Thanks!
If you are ok with jquery than use below code...
$(document).ready(function(){
var header_height = $('#header').height();
var content_height = $(window).height() - header_height;
var container_height = $('#centerRightColumnContainer').height();
var sidebar_height = $('#sideBarLeft').height();
if(container_height > sidebar_height)
var main_height = container_height;
else
var main_height = sidebar_height;
if(content_height > main_height)
var main_height = content_height;
$('#centerRightColumnContainer,#sideBarLeft').css('height',main_height);
});
I would not recommend doing this with JavaScript.
This is a well known problem in web design.
You can use a flex to achieve this:
fiddle
The wrapper does the magic:
#wrapper { display: flex; }
Flexbox is not supported by old browsers. Read this article.