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.
Related
I am trying to create a linear animation with pipes just like the flappy bird game. When I have one single pipe, I see a random gap and it works well, but when I clone all the pipes, there is no longer a gap at a random position.
How can I give the gaps in the pipe a random position when I have multiple pipes, and why is it not working as expected?
var block = document.getElementById("block");
//clone the pipe multiples times
var blockClone;
for (var i = 0; i < 4; i++) {
blockClone = block.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
block.appendChild(blockClone);
//remove animtion from clones
blockClone.style.animationName = "none";
}
//gap inbetween each pipe
var hole = document.getElementById("hole");
var holeClone;
for (var i = 0; i < 4; i++) {
holeClone = hole.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
blockClone.appendChild(hole);
block.appendChild(hole);
//remove animtion from clones
holeClone.style.animationName = "none";
hole.addEventListener('animationiteration', () => {
var random = -((Math.random() * 300) + 150);
hole.style.top = random + "px";
});
}
body {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
#game {
width: 100%;
height: 500px;
border: 1px solid red;
margin: auto;
overflow: hidden;
}
/* pipe version 1 */
#block {
width: 60px;
height: 500px;
background-color: green;
background-image: url("https://l.dropbox.com/s/4jz7uq4e25o8su5/sketch-1664244879.png?dl=0");
background-size: cover;
position: absolute;
left: 100px;
animation: block 5s infinite linear;
}
#hole {
width: 60px;
height: 210px;
background-color: red;
position: absolute;
left: 0px;
top: -10px;
/* animation: block 5s infinite
linear;*/
background-image: url("https://dldropbox.com/s/j7enawgtuepj7au/sketch-166428805830.png?dl=0");
background-size: cover;
}
#character {
width: 40px;
height: 40px;
background-color: none;
position: absolute;
top: 100px;
left: 40px;
border-radius: ;
z-index: 1;
background-color: red;
}
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
cursor: none;
opacity: 0.3;
text-align: center;
}
/* used to prevent user from tapping even after the game has ended*/
.mainoverlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
opacity: 0;
}
#blokhold {
animation: block 5s infinite linear;
}
#keyframes block {
0% {
left: 350px
}
100% {
left: -890px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game">
<div id="blokhold">
<div id="block">
<div id="hole"></div>
</div>
</div>
<div id="character"></div>
</div>
I am running the following code, It seems to center in mobile view, but not in Desktop why ? and solution ?
I tried to solve it by using display: block; margin: auto; width:100%; and no use it remains the same. also tried text-align: center; no use again.
let $slides, interval, $selectors, $btns, currentIndex, nextIndex;
let cycle = index => {
let $currentSlide, $nextSlide, $currentSelector, $nextSelector;
nextIndex = index !== undefined ? index : nextIndex;
$currentSlide = $($slides.get(currentIndex));
$currentSelector = $($selectors.get(currentIndex));
$nextSlide = $($slides.get(nextIndex));
$nextSelector = $($selectors.get(nextIndex));
$currentSlide.removeClass("active").css("z-index", "0");
$nextSlide.addClass("active").css("z-index", "1");
$currentSelector.removeClass("current");
$nextSelector.addClass("current");
currentIndex = index !== undefined ?
nextIndex :
currentIndex < $slides.length - 1 ?
currentIndex + 1 :
0;
nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};
$(() => {
currentIndex = 0;
nextIndex = 1;
$slides = $(".slide");
$selectors = $(".selector");
$btns = $(".btn");
$slides.first().addClass("active");
$selectors.first().addClass("current");
interval = window.setInterval(cycle, 6000);
$selectors.on("click", e => {
let target = $selectors.index(e.target);
if (target !== currentIndex) {
window.clearInterval(interval);
cycle(target);
interval = window.setInterval(cycle, 6000);
}
});
$btns.on("click", e => {
window.clearInterval(interval);
if ($(e.target).hasClass("prev")) {
let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
cycle(target);
} else if ($(e.target).hasClass("next")) {
cycle();
}
interval = window.setInterval(cycle, 6000);
});
});
#container {
position: absolute;
width: 300px;
height: 300px;
overflow: hidden;
background: red;
text-align: center;
display: inline-block;
margin: auto;
margin-left: -40%;
}
#slides .slide .slide-partial {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-partial img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 1s ease-in-out;
display: block;
margin: auto;
}
#slides .slide .slide-left {
top: 0;
left: 0;
transform: translateX(-100%);
display: block;
margin: auto;
}
#slides .slide .slide-left img {
top: 0;
right: 0;
-o-object-position: 100% 50%;
object-position: 100% 50%;
transform: translateX(50%);
display: block;
margin: auto;
}
#slides .slide.active .slide-partial,
#slides .slide.active .slide-partial img {
transform: translateX(0);
display: block;
margin: auto;
}
#slide-select {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
font-family: "Reem Kufi", sans-serif;
font-size: 1.5em;
font-weight: lighter;
color: white;
}
#slide-select li {
position: relative;
cursor: pointer;
margin: 0 5px;
}
#slide-select li.prev:hover {
transform: translateX(-2px);
}
#slide-select li.next:hover {
transform: translateX(2px);
}
#slide-select .selector {
height: 14px;
width: 14px;
border: 2px solid white;
background-color: transparent;
transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
background-color: white;
}
<div id="mode">
<div id="container">
<ul id="slides">
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="1.jpg" /></div>
</li>
</ul>
<ul id="slide-select">
<li class="btn prev">
<</li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="btn next">></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Output am getting,
Image slide with partially left floating
I tried,
display: inline-block;
margin: auto;
width: 100%;
text-align: center;
/* result: no use /*
What do I need the output to be,
proper centered image slide
If possible please explain with a solution.
The best way to place something dead center is to use display: grid; and place-items: center; this will set all items on the grid to the center given the div has a specific with and height.
You also need to remove all styles from the li and ul, they have maring that can change the position of the elements inside
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>
So as a means of learning jquery I'm making my own slider where each image swipes to the left creating a nice effect, this is beacuse I change the left property of the absolutely positioned images container.
However I fail to make it move, what I do is capture the width of each image in the slider and mov the container accordingly.
My code:
$(document).ready(function() {
var interval = 2000; //will move to left 450px each X seconds
var sliders = $('.slider_image'); //counts number of sliders
var image_width = $('.slider_image').width();
var index = 0;
var show_index = 0;
var scrolledPx = 0;
setInterval(function() {
if (scrolledPx >= image_width * sliders.length - 1) {
$('.sliders_container').animate({
'left': '0px'
}, 2000);
scrolledPx = 0;
} else {
$('.sliders_container').animate({
'left': '-= ' + image_width + ''
}, 1000);
scrolledPx += image_width;
}
}, interval);
});
/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer {
width: 100%;
height: 275px;
outline: 2px solid white;
position: relative;
overflow: hidden;
}
.section_slider_marg_items_container {
width: auto;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: flex;
}
.section_slider_marg_item {
height: 100%;
width: 450px;
outline: 2px solid red;
background-size: cover;
}
/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">1</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">2</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">3</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">4</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">5</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">6</div>
</div>
</section>
<style>
.section_slider_marg_maincontainer {
width: 100%;
height: 275px;
outline: 2px solid white;
position: relative;
overflow: hidden;
}
.section_slider_marg_items_container {
width: auto;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: flex;
}
.section_slider_marg_item {
height: 100%;
width: 450px;
outline: 2px solid red;
background-size: cover;
}
.slider_image {display: none}
/* Slideshow container */
.sliders_container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="section_slider_marg_items_container sliders_container">
<div class="section_slider_marg_item slider_image">
<img src="res1.jpg"></div>
<div class="section_slider_marg_item slider_image">
<img src="res1.jpg"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider_image");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
</script>
Check out this and let me know if it does work
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.