How to make an image slideshow using CSS-Grid and javascript

How to make an image slideshow using CSS-Grid and javascript - javascript

I am trying to make a slideshow of images. But it does not seem to work I am not getting any errors when checking the javascript. Not sure what I am doing wrong
$( document ).ready(function() {
$('.work').scroll(function() {
var $this= $('h2');
$('.image').each(function () {
var hT = $(this).offset().top,
hH = $('h2').outerHeight(),
wH = $('.work').height(),
wS = $this.scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('#count').text($(this).data('index'));
}
});
});
});
function smallscreen() {
if (window.innerWidth < 959) {var workSlide = document.querySelector('.work');
var sliderImages = document.querySelectorAll('.work h2');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var counter = 1;
const size = sliderImages[0].clientWidth;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextButton.addEventListener('click', function next() {
if (counter >= sliderImages.length - 1) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevButton.addEventListener('click', function prev() {
if (counter <=0) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
workSlide.addEventListener('transitionend',function loopin() {
if (sliderImages[counter].class === 'clonelast') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
if (sliderImages[counter].class === 'clonefirst') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
});
}
}
window.onload = window.resize = smallscreen;
#media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
html,body {
max-width: 100%;
height: 100%;
}
.main{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-gap: 1.5em;
}
.header {
grid-column: 1fr;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
grid-row: 1;
z-index: 2;
width: 100vw;
height: 60px;
}
.header h3 {
display: none;
}
.logo {
grid-column: 1;
max-width: 100%;
display: grid;
justify-items: center;
}
.logo embed{
display: block;
margin: auto;
max-width: 50%;
height: auto;
}
.body {
grid-row: 2/3;
display: grid;
grid-gap: 1.5em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: 0;
padding: 0;
z-index: 1;
}
.about{
max-width: 100vw;
}
h1 {
font-family: 'DM Sans', sans-serif, Arial, Helvetica;
font-size: 13.5pt;
line-height: 22pt;
font-weight: 500;
color: #000000;
}
.work {
grid-row: 2 / 4;
grid-column: 1;
display: flex;
width: 100%;
}
.image > img{
max-width: 100vw;
height: auto;
}
.buttons {
grid-row: 2 / 4;
grid-column: 1;
align-self: center;
padding: 0.75em;
display: grid;
grid-template-columns: 1fr 1fr;
transition: 0.5s ease 0s;
z-index: 4;
width: 100vw;
}
.prev {
justify-self: start;
}
.next {
justify-self: end;
}
button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
}
.buttons :hover {
color: white;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
z-index: 3;
min-height: 80px;
grid-row: 3;
text-align: center;
max-width: 100vw;
}
.phone {
grid-row: 2;
align-self: center;
justify-self: center;
}
.media {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 1em 0 0;
grid-row: 1;
padding-bottom: 1em;
}
li > a {
text-decoration: none;
color: black;
}
li > a:hover {
font-weight: 800;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.walumozagba.com">
<embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px">
</a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
<div class="work">
<h2 class="image" data-index="0"></h2>
<h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
</div>
<div class="buttons">
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
</div>
<div class="footer">
<div class="phone">
<p>+31 123 12 12 12</p>
</div>
<ul class="media">
<li>Behance</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<script src="JS/scriptscroll.js" type="text/javascript"></script>
</body>
</html>

You need to transition the elements within .work, not .work itself.
Heres a small working version of a image carousel:
(also available as JSFiddle)
class Slider {
constructor(el) {
this.el = el;
this.activeIndex = 0;
this.numItems = this.el.children().length;
// automatically advance slider
this.interval = setInterval(() => this.next(), 5000);
}
prev() {
this.activeIndex--;
if(this.activeIndex < 0)
this.activeIndex = this.numItems - 1;
this.updateDom();
}
next() {
this.activeIndex++;
if(this.activeIndex >= this.numItems)
this.activeIndex = 0;
this.updateDom();
}
updateDom() {
this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`)
}
}
$(() => {
let slider = new Slider($(".work"));
$(".prev").click(() => slider.prev());
$(".next").click(() => slider.next());
});
.work {
/* Specify the size of the image box (can be in any unit you want)*/
width: 500px;
height: 300px;
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
will-change: transform;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<img src="https://picsum.photos/500/300?1">
<img src="https://picsum.photos/500/300?2">
<img src="https://picsum.photos/500/300?3">
<img src="https://picsum.photos/500/300?4">
<img src="https://picsum.photos/500/300?5">
</div>
<button type="button" class="prev">
PREV
</button>
<button type="button" class="next">
NEXT
</button>
For production use i would recommend using an existing library though.
To name a few:
slick
swiper
lightslider
Owl Carousel
Edit:
Heres a working JsFiddle with your code.

Related

Can a grid item adjust its span based on height?

Is there any way to get a behaviour similar to this shown on drawing?
I mean of course manually we can specify grid-row: span x, but grid-row: span auto seems doesn't work. I need all grid items to be the same size, but when one item has to resize (due to text overflow) i need to set the grid-row: span 2, and when it's getting bigger - respectively higher number.
To acheive something like this I need to write .js or can it be done with css only?
Here is code sandbox

let items = document.querySelectorAll('.item')
items.forEach(item => {
if(item.scrollHeight>item.clientHeight){
let itemSpan = Math.round(item.scrollHeight/40) + 1 // (height = 30) + (gap = 10) 40 =>
item.style.cssText = `--n : ${itemSpan}`
}
})
.container {
width: 200px;
margin: 15vw auto;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 30px;
grid-auto-flow: row;
grid-gap: 10px;
word-break: break-all;
}
.item {
background-color: gold;
min-height: 30px;
width: 50px;
padding: 5px;
grid-row: auto / span var(--n); /* var(--n) is calculated with js */
box-sizing: border-box;
}
<div class="container">
<div class="grid">
<div class="item">1</div>
<div class="item ">2 Lorem ipsum dolor sit amet consectetur adipisicing </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5 t amet consectetur adipisi</div>
<div class="item">6 lorem</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 t amet consectetur adipisi </div>
</div>
</div>

Sometimes good to review the fundamentals:
HTML is for structure.
CSS is for presentation.
JavaScript is for behavior.
Your problem falls within 3 ("item has to resize (due to text overflow)")

You can add min-height to ".item" class to set same size of grid items.
.item{
min-height:100px;
}
.App {
font-family: sans-serif;
text-align: center;
}
.container {
width: 200px;
height: 200px;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-flow: dense;
}
.item {
background-color: brown;
height: 30px;
min-height:100px;
}
.large {
height: fit-content;
word-break: break-all;
grid-row: span auto;
}
<div class="App">
<div class="container">
<div class="grid">
<div class="item"> </div>
<div class="item large">
asdasdasdasdasdsadasdasdasdasdasdasd{" "}
</div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
</div>

GSAP slider not working in IE11 and safari

I integrated this slider into my website after I find that it is not working on IE11 and safari :
Here is a link to the slider's code :
https://codepen.io/gvrban/pen/qjbpaa
IT works fine in Chrome and in IE11 I have tried changing the style but the problem persist. I think it is related to the flexbox.
HTML part (only one slide ):
<div class="slider">
<div class="slider-wrapper flex">
<div class="slide flex">
<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
<div class="slide-content">
<div class="slide-date">30.10.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
<div class="arrows">
</div>
</div>
CSS part:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}
.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw; margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}
div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}
.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
JS part:
( function($) {
$(document).ready(function() {
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('next') ) {
( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
} else if ( $(this).hasClass('prev') ) {
( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
}
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
//CONTENT ANIMATIONS
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
Many thanks.

Good morning,
you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
The solution :
remove flex class from your slide html code and change the display to block to get the same calculation cross browsers and you should add another div inside it to keep your flex style.
change your HTML slide code to :
<div class="slide">
<div class="slide-container">
<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
<div class="overlay"></div>
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="slide-date">30.07.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
</div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
</div>
and add these css styles :
.slide {
display:block;
}
.slide-container{
display: flex;
}
.slide-content-inner{
width:35vw;
padding: 5%;
}
And change these (remove the padding and change width) :
.slide-content {
width: 50vw; //changed to 50vw
color: #fff;
/*padding:3vw 18vw 3vw 9vw;*/ //removed
}
You get the solution with extra styling :)

jQuery UI Draggable Split Screen

I have a split screen slider that works fine on desktop but I needed jQuery UI to make it work on mobile.The draggable event lets me drag it back and forth but sometimes the image on the left moves from it's original position, or disappears altogether. Any ideas on how to approach this?
Here's the codepen. The slider bug is more visible on mobile devices.
document.addEventListener('DOMContentLoaded', function(){
let wrapper = document.getElementById('wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
let skew = 0;
let delta = 0;
if(wrapper.className.indexOf('skewed') != -1){
skew = 1000;
}
wrapper.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.clientX + delta + 'px';
topLayer.style.width= e.clientX + skew + delta + 'px';
});
});
$(".content-wrap").draggable({
containment: "parent",
dragx: true,
dragy: false,
rotate: false
});
body{
margin: 0;
padding:0;
font-size: 100%;
line-height: 1.6;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
position: relative;
width: 100%;
min-height:55vw;
overflow: hidden;
}
.layer{
position:absolute;
width:100vw;
min-height: 55vw;
overflow: hidden;
}
.layer .content-wrap{
position: absolute;
width:100vw;
min-height: 55vw;
}
.layer .content-body{
width: 25%;
position:absolute;
/* top:50%; */
top: 25%;
text-align: center;
transform:translateY(-50%);
color:#fff;
}
.layer img{
position:absolute;
width:65%;
/*width: 35% */
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.layer h1 {
font-size:2em;
font-family: 'Lato', sans-serif;
}
.bottom{
background:#686965;
z-index:1;
}
.bottom .content-body{
right:5%;
}
.bottom h1{
color:#7bbe9a;
font-family: 'Lato', sans-serif;
}
.top{
background:#eff0ec;
color:#222;
z-index:2;
width:50vw;
}
.top .content-body{
left:5%;
color:#333;
}
.handle{
position: absolute;
height: 100%;
display: block;
background-color: #7bbe9a;
width: 5px;
top:0;
left: 50%;
z-index:3;
}
.skewed .handle{
top:50%;
transform:rotate(30deg) translateY(-50%);
height:200%;
transform-origin:top;
}
.skewed .top{
transform: skew(-30deg);
margin-left:-1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content-wrap{
transform: skew(30deg);
margin-left:1000px;
}
#media(max-width:768px){
body{
font-size:75%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet">
</head>
<body>
<section id="wrapper" class="skewed">
<!-- <div id="draggable"> -->
<div class="layer bottom">
<div class="content-wrap">
<div class="content-body">
<h1>Designer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
</div>
<!-- </div> -->
</div>
<div class="layer top">
<div class="content-wrap">
<div class="content-body">
<h1>Developer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
</div>
</div>
<div class="handle"></div>
</section>
<script src=""></script>
</body>
</html>

Forget the draggable as it is causing conflict with the mousemove event listener. I have used the touchmove event listener for mobile device.
CODEPEN
wrapper.addEventListener("touchmove", function(e) {
delta = (e.changedTouches[0].clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.changedTouches[0].clientX + delta + "px";
topLayer.style.width = e.changedTouches[0].clientX + skew + delta + "px";
});
Note: You may also enable/disable the touchmove and mousemove depending on the device type (touch or not).
Hope this helps.

how to slide out content on hover - flexbox-layout

i have a beautiful little landing page with big pictures and small boxes with headings in it.
if you hover over the headings, the box around it should slide out (getting more width but shouldn't push the picture away, instead it should be above the picture) the picture next to it and shows some text there. this is all done in a flexbox-bootstrap layout.
will position: absolute, z-index and some left or right stuff do this trick as well even in a flexbox-content? or do i have to use some jscript/jQuery stuff?
here's my bootply: http://www.bootply.com/d2liwNZnCH
and the code for the greater good:
<main class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-3 bgb fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3 bgr fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-8">
<div class="imagecontainer">
<img src="http://placehold.it/1265x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-4 bgp fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-5 bgg fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-7">
<div class="imagecontainer">
<img src="http://placehold.it/765x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
</div>
</main> <!-- Maincontent -->
css:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
margin: 0;
padding: 0;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex !important;
display: -webkit-flex !important;
flex: 1 100%;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
word-break: break-word;
}
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
}
.contentbox h2 {
font-variant: small-caps;
}
.imagecontainer {
display: block;
}

did it with a second ".contentbox"-div and some helper classes and jQuery click event and i chosed to fade the readmore-text in the contentbox itself above the centered heading.
html:
<div class="col-lg-3 col-sm-6 col-xs-12 fw">
<div class="contentbox readmore bgr flex-col">
<h2>example</h2>
</div>
<div class="contentbox expand bgr flex-col">
<span aria-hidden="true" class="pull-right closebox">×</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
<p>read more</p>
</div>
</div>
css:
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
height: auto;
min-height: 160px; /* Only for my layout */
}
.readmore {
cursor: pointer; /* So your complete box seems clickable */
}
.expand {
position: absolute;
top: 0; /* You can switch these values to whatever values wished */
left: 0; /* It will then slide from the direction you chose */
right: 0; /* but remember to put the chosen direction to 0 again on .expanded */
bottom: 0; /* for me, the fadeeffect was the most elegant way */
font-size: 15px;
opacity: 0;
visibility: hidden;
transition: all .75s ease-in-out;
}
.expanded {
top: 0;
opacity: 1;
visibility: visible;
cursor: default;
transition: all .75s ease-in-out;
}
.closebox {
font-size: 24px;
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
}
js within document ready:
$(".readmore").click(function(){
$(this).next(".expand").addClass("expanded");
});
$(".closebox").click(function(){
$(this).parent(".expanded").removeClass("expanded");
});

Onclick isn't being registered, keep telling me it's undefined

I'm trying to have a menu slide in whenever the 'menu' icon is clicked. Now I can't see where I went wrong. I'm getting the 'menu is not defined' error in the console.
<!DOCTYPE html>
<html>
<head>
<title>Menu rechts</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section class="web_wrapper">
<header>
<main style="width: 100%;">
<button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
</main>
</header>
</section>
<section class="menu_show">
<nav style="right: -20%;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<nav>
</section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>
The used javascript
function menu()
{
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
The css
After getting comments it seems it might be a css issue. Because of this reason i'm also posting the css.
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0; }
body {
width: 100%;
color: #212121; }
a {
text-decoration: none; }
li {
list-style-type: none; }
.web_wrapper {
float: left;
width: 100%;
height: auto; }
header {
width: 100%;
height: 100%; }
header main {
height: 75px; }
header main button#menu_toggle.material-icons {
position: relative;
top: 50px;
left: 1000px;
background: transparent;
transition: transform 0.3s, color 0.3s;
font-size: 24pt !important; }
header main button.active {
transform: rotate(90deg);
color: #536DFE; }
.menu_show {
height: 100vh;
float: right;
background: #607D8B; }
.menu_show nav {
width: 20%; }
.menu_show nav ul {
width: 100%; }
.menu_show nav ul li {
width: 100%;
text-align: center; }

Try the below,
You can simply archive this with jQuery animate function
Read This animate
var click = 0; //keep this flag to identify the click
function menu() {
var menu = $("nav");
$(menu).animate({
width: 'toggle'
},"slow","easeOutElastic");
if (click == 0) {
$(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic");
click = 1;
} else {
$(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic");
click = 0;
}
console.log(click);
}
nav {
color: 'black';
background-color: #ddd;
text-align: justify;
width: 20%;
float: right;
margin-top: -20px;
}
.web_wrapper {
width: 80%;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<section class="web_wrapper">
<header>
<div style="width: 100%;" id="main">
<button class="material-icons" id="menu_toggle" onclick="menu();">menu</button>
</div>
</header>
</section>
<section class="menu_show">
<nav style="right:-20%;" id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>

use
<script src"toggle.js" type="text/javascript"></script>
in top of your codes and check again.

ideally you need to use jQuery but i am also a JS fan.Here you just have to define menu function anywhere but before its called ,ideally in head section,check this fiddle
http://jsfiddle.net/r0d09wcr/1/
<head>
<script>
function menu()
{
alert('dsff');
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
</script>
</head>

First, next time please fiddle your code.
Second, I think this fiddle does what you want:
JSFIDDLE:http://jsfiddle.net/657oudrv/1/
$('#menu_toggle').click(function()
{
var menu = $("nav")
var main = $("main")
if(menu.css('right') !== '-20%')
{
menu.css('right','-20%')
main.css('width','100%')
//Just for test without your css:
menu.css('margin-left','20%')
}
else
{
menu.css('right','0%')
main.css('width','80%')
//This is also the part of the test
menu.css('margin-left','0%')
}
});

You should use CSS selector with .querySelector()
Try to add id="nav" to your nav HTML element and edit you selector in js accordingly.
in HTML file:
<nav id="nav" style="right: -20%;">
in toogle.js:
var menu = document.querySelector("#nav");
see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for reference

Big wall of code coming up, prepare yourselves. Note that I move the Menu button into the menu section. I also changed the css a lot. Not sure if the text changes color when it's supposed to. The javascript now simply toggles a menu_show class on the body and css handles the rest... I ♥ html5
The fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0;
}
body {
width: 100%;
color: #212121;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
section {
display: inline-block;
}
.web_wrapper {
transition: .3s;
float: left;
width: 95%;
height: auto;
}
.menu_show .web_wrapper {
width:80%;
}
.menu {
position: absolute;
right: 0px;
width: 5%;
overflow: hidden;
height: 100%;
transition: width .3s;
background: #607D8B;
}
.menu_show .menu {
overflow: show;
width: 20%;
}
.menu nav {
position: relative;
top: 30px;
white-space: nowrap;
}
.menu_show .menu nav {
white-space: normal;
top: 10px;
}
.menu_show .menu nav ul {
width: 100%;
}
.menu_show .menu nav ul li {
width: 100%;
text-align: center;
}
#menu_toggle {
text-align: left;
overflow: hidden;
position: relative;
background: transparent;
transition: 0.3s;
font-size: 12pt !important;
transform: rotate(90deg);
top: 20px;
right: 10px;
}
.menu_show .menu #menu_toggle {
color: #536DFE;
top: 0px;
right: 0px;
transform: rotate(0deg);
}
</style>
<script type='text/javascript'>
// console logs left in for science
function ready(fn) {
console.log('readying');
if (document.readyState != 'loading'){
console.log('loading...');
fn();
} else {
console.log('content not loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
var body = document.querySelector("body");
var button = document.getElementById('menu_toggle');
var menuShowing = false;
button.addEventListener('click',toggleMenu);
function toggleMenu()
{
if(menuShowing === true)
{
body.classList.remove('menu_show');
}
else
{
body.classList.add('menu_show');
}
menuShowing = !menuShowing;
}
});
</script>
</head>
<body>
<section class="web_wrapper">
<main>
Some content
<p>more in this paragraph!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</section>
<section class="menu">
<button class="material-icons" id="menu_toggle">menu</button>
<nav>
<ul>
<li>1. This is some long stinking text</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>
</body>
</html>
I'll fix any mistakes and try to address any comments. Best way to figure out what something does is to remove the class, rule, w/e from the dev console and see what happens.
The fiddle
Credit where it's due:
position: absolute; right: 0px; for animation to work right (also height looks good with this set)
the ready function was off StackO... can't find the answer i pulled it from now :(
wikipedia for the lorem ipsum on the fiddle

Develop Reference

JavaScript is the programming language of the Web.

How to make an image slideshow using CSS-Grid and javascript - javascript

Related

Can a grid item adjust its span based on height?

GSAP slider not working in IE11 and safari

jQuery UI Draggable Split Screen

how to slide out content on hover - flexbox-layout

Onclick isn't being registered, keep telling me it's undefined

Categories

Resources