I would like to use timeUpdate and currentTime to be able to show and hide a div at a certain time when a video is playing.
I have managed to get something working, however it seems to show and hide for each second I want it to show for.
I have attached the code below... is there any way i can have it shown without it showing and hiding for each second?
var video_one = document.getElementById('video_one'),
video_two = document.getElementById('video_two'),
video_one_wrapper = document.getElementById('video_one_wrapper'),
video_two_wrapper = document.getElementById('video_two_wrapper'),
play_button = document.getElementById('play_button');
// add event listener to play button
play_button.addEventListener('click', play_videos);
// run function on click
function play_videos() {
video_one.play();
video_two.play();
}
var switch_button = document.getElementById('switch_button');
switch_button.addEventListener('click', switch_videos);
function switch_videos() {
console.log('click');
if(video_one_wrapper.classList.contains('video_active')) {
console.log('it contains');
video_one_wrapper.classList.remove('video_active');
video_two_wrapper.classList.add('video_active');
} else if(video_two_wrapper.classList.contains('video_active')) {
video_two_wrapper.classList.remove('video_active');
video_one_wrapper.classList.add('video_active');
console.log('it doesnt')
}
}
video_one.addEventListener("timeupdate", message_one);
video_two.addEventListener("timeupdate", message_two);
var message_one = document.getElementById("message_one"),
message_two = document.getElementById("message_two");
function message_one() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
function message_two() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_two.classList.contains("message_hide")) {
message_two.classList.remove("message_hide");
} else {
message_two.classList.add("message_hide")
}
}
}
body {
margin: 0;
font-family: "Helvetica Neue";
font-size: 16px;
color: #FFF;
background-color: #242424;
}
.landing {
width: 100vw;
height: 100vh;
}
.landing_wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.title_wrapper {
text-align: center;
}
.title_wrapper > h1 {
font-size: 46px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFF;
}
.title_wrapper > button {
background-color: #FFF;
border: none;
outline: none;
font-size: 16px;
text-transform: uppercase;
padding: 10px 20px;
}
video {
width: 100%;
z-index: 100;
}
.video {
position: relative;
width: 100vw;
height: 100vh;
}
.video_wrapper {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video_item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.switch_wrapper {
z-index: 100;
position: absolute;
top:0;
left: 0;
}
.video_element {
z-index: 100;
}
.message_wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
.message_hide {
display: none;
}
.video_one {
z-index: 0;
}
.video_two {
z-index: 0;
}
.video_active {
z-index: 10;
}
.video_three {
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="landing">
<div class="landing_wrapper">
<div class="title">
<div class="title_wrapper">
<h1>Title Here</h1>
<button id="play_button">Start</button>
</div>
</div>
</div>
</div>
<div class="video">
<div class="switch_wrapper"><button id="switch_button">Switch</button></div>
<div class="video_wrapper">
<div id="video_one_wrapper" class="video_item video_active">
<div id="message_one" class="message_wrapper message_hide"><h1>Hello Video 1</h1></div>
<video id="video_one" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/girl_1_zps8ud1zuxh.mp4" loop >
</div>
<div id="video_two_wrapper" class="video_item">
<div id="message_two" class="message_wrapper message_hide"><h1>Hello Video 2</h1></div>
<video id="video_two" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/boy_zpsugnp76od.mp4" muted loop>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
The timeupdate event occurs when the playing position of an audio/video has changed.
Example. When video is playing . This function message_one always is calling every time (second) when video is playing. I will give you example step
currentTime = 1 s
message_one function called
message_one element doesn't contain class "message_hide"
message_one element add class "message_hide"
currentTime increases to 2s
message_one function called
message_one element now is containing class "message_hide" .
message_one.classList.add("message_hide") this will call. it makes message hide
And again when currentTime update it will change, it makes the message show hide loop
Your current function
function message_one() {
// if time between 10s and 20s
if (this.currentTime > 1 && this.currentTime < 20) {
if (message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
I suggest one way to resolve
if (this.currentTime > 0 && this.currentTime < 20) {
message_two.classList.remove("message_hide");
}
else {
message_two.classList.add("message_hide")
}
Related
I am trying to make the content of a div change when the page is scrolled to a certain point using jQuery. Currently, I am trying to accomplish this by adding a class when the page is scrolled past 800 and removing it and adding a different class when the page is above 800. Here is my current code on jsfiddle: https://jsfiddle.net/shgfrdm8/
Here is the jQuery code:
$(window).scroll(function() {
let windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('image-content').addClass('scrolledDown');
$('image-content').removeClass('scrolledUp');
} else {
$('image-content').addClass('scrolledUp');
$('image-content').removeClass('scrolledDown')
}
})
The CSS ids/classes:
.main {
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
.main-image {
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.filler {
height: 400vh;
}
.main-text {
left: -14px;
width: 99.3vw;
height: 4000px;
text-align: center;
background-color: red;
position: relative;
}
#image-content::before {
white-space: pre;
position: absolute;
bottom: 20px;
left: 20px;
font-family: Impact;
font-size: 55px;
font-weight: 550;
color: white;
z-index: 4;
opacity: 1;
position: fixed;
}
#image-content.scrolledDown::before {
opacity: 1;
content: 'ABC';
}
#image-content.scrolledUp::before {
opacity: 1;
content: "DEF";
}
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="image-container">
<div class="zoom main">
<img src="images/sourcecode.jpg" class="main-image">
</div>
<div id="content-anchor"></div>
<div id="image-content"></div>
</div>
<div class="filler">
</div>
<div class="main-text">
</div>
I am wondering how I can make this work because I far as I can tell the classes either not being added or the classes are not working.
Suggesting the following changes:
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('.image-content').addClass('scrolledDown');
$('.image-content').removeClass('scrolledUp');
} else {
$('.image-content').addClass('scrolledUp');
$('.image-content').removeClass('scrolledDown')
}
});
This ensures you have the correct Class selector.
I am making a simple slideshow with images fading in and out. The image transition is done in CSS. I am having some issues of washed-out images during the transition. The problem is particularly visible when using the keyboard and keeping a key down. Below is a very basic example (simply press any key to change images).
Is there an easy fix to this? Ideally, I would like to have something similar to that website, which I find much more pleasing to the eye.
I have tried to play with the transition-timing-function and different transition-duration between the image and .visible rules in the CSS, without success.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
window.addEventListener('keydown', () => {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body, figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Use a timer with a 100 millisecond delay with each keydown event
Use a control variable whose value is false with each keydown event
and the next image cannot be displayed until it is false and its value
becomes true when the timer time has come.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
var allow = true;
window.addEventListener('keydown', () => {
if (allow) {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
allow = false;
displayTimer(200);
}
});
var timer;
function displayTimer(sec) {
var dec = sec - 100;
if (dec == 0) {
window.clearTimeout(timer);
allow = true;
} else {
timer = setTimeout(function() {
displayTimer(dec)
}, 100);
}
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Basically, I coded this player for my personal video hosting site (some elements censored in this example) but when I embed a video, it aligns to the left side and gets cut off at the right side or has a black bar there if the ratio is off.
(I embedded a video from Archive.org for this example, it is by no means my own. It appears to belong to Scott Draves.)
function vidplay() {
var video = document.getElementById("SubjectVideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function restart() {
var video = document.getElementById("SubjectVideo");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("SubjectVideo");
video.currentTime += value;
}
function hideControls() {
var x = document.getElementById("controls");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: black;
}
#SubjectVideo {
position: fixed;
height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#Data {
display: flex;
flex-wrap: wrap;
}
.EpisodeData {
text-align: right;
flex: 50%;
}
#hideButtons {
text-align: left;
flex: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>[Video title]</title>
<link rel="icon" href="../../../../favicon.ico" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../../../player.css">
<script src="../../../RedirectScripts/redirect.js"></script>
<script src="../../../player.js"></script>
</head>
<body id="main" onLoad="hideControls()">
<video autoplay id="SubjectVideo" onended="NextVideo()">
<source src="https://ia801507.us.archive.org/35/items/electricsheep-flock-247-52500-0/00247%3D52640%3D52374%3D52639.mp4" type="video/mp4">
Your browser doesn't support < video >..
</video>
<div class="content">
<div id="controls">
<div id="buttonbar">
<p><center><img src="../../logo.png" width="20%"></p>
<button id="restart" onclick="restart();"><img src="../../../restart.png" alt="restart"></button>
<button id="rew" onclick="skip(-30)"><img src="../../../rewind.png" alt="rewind 30s"></button>
<button id="play" onclick="vidplay()"><img src="../../../play.png" alt="play/pause"></button>
<button id="fastFwd" onclick="skip(30)"><img src="../../../fastforward.png" alt="fast-forward 30s"></button>
</div>
</div>
<div id="Data">
<div class="hideButtons">
<button id="hide" onclick="hideControls()">Show/Hide Controls</button>
</div>
<div class="EpisodeData">
Video Title
</div>
</div>
</div>
</body>
</html>
When I insert a tag around the video, it puts the left edge of the video on the edge instead of properly centering it.
does anyone know how I could effectively center it, and put borders on the bottom and top instead of having a cutoff on the sides?
The error at the end is for an autoplay script that isn't linked here, it can be disregarded.
Add the next styles to the video tag
left: 0;
right: 0;
margin: auto;
Add this #SubjectVideo ruleset to center your <video> tag:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
It should look like this:
#SubjectVideo {
position: fixed;
height: 100%;
margin-right: auto;
margin-left: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I need to understand how to connect peers in gun db. I have a socket.io server deployed on heroku but I don't know if it will work with gun. Can anyone with experience with gun db help me with this? I've readed the documentations but it's not clear how the peers are connected and there isn't a clear code example on the documentation.
I've tested the chat example, but it will not work on my localhost server, I will not be able to deploy it on my shared hosting because sockets are not permitted. Also on localhost messages are not delivered between two different browser windows.
UPDATE :
Here is the code with the suggested lib/webrtc added. Still not working.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Converse</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
.chat__heading {
position: fixed;
text-align: center;
z-index: 1;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.chat__form-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 20px;
position: fixed;
z-index: 1;
bottom: 0;
}
.chat__form {
display: flex;
justify-content: center;
height: 50px;
background-color: white;
border: 2px solid white;
max-width: 900px;
width: 100%;
border-radius: 5px;
}
.chat__name-input {
flex: 1;
padding: 10px;
}
.chat__message-input {
flex: 5;
padding: 10px;
}
.chat__submit {
padding: 10px;
color: white;
border-radius: 5px;
}
.chat__submit:hover::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit:focus::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 5px;
transition: background-color 0.3s;
background-color: rgba(0,0,0,0);
}
.chat__message-list {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
overflow-y: auto;
padding: 60px 20px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
min-height: 100vh;
}
.chat__message {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
width: 100%;
position: relative;
max-width: 900px;
}
.chat__name {
margin-right: 20px;
}
.chat__when {
position: absolute;
top: 0;
right: 2em;
padding: 10px;
background: rgba(100%, 100%, 100%, 0.9);
opacity: 0;
border-radius: 5px;
}
.chat__message:hover .chat__when {
opacity: 1;
right: 0em;
}
#media (max-width: 567px) {
.chat__heading {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="chat hue2 page">
<h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
<ul class="chat__message-list">
<li class="none"></li>
</ul>
<div class="chat__form-container hue2">
<form class="chat__form">
<label for="name-input" class="visually-hidden">Name</label>
<input id="name-input" class="chat__name-input" placeholder="Name"></input>
<label for="message-input" class="visually-hidden">Message</label>
<input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
<button class="chat__submit say hue2">say</button>
</form>
</div>
<div class="model">
<li class="chat__message white huet2 box">
<b class="chat__name"></b>
<p class="chat__message-text"></p>
<span class="sort none">0</span>
<div class="chat__when"></div>
</li>
</div>
</div>
<script src="../jquery.js"></script>
<script src="../../gun.js"></script>
<script src="../../nts.js"></script>
<script src="../../lib/webrtc.js"></script>
<script>
var gun = Gun(document.location.host + ':443/gun');
var chat = gun.get('converse/' + location.hash.slice(1));
console.log(chat);
console.log(gun);
console.log(location.hash.slice(1));
$(".chat__submit").on('click', submit);
$(".chat_form").on('keydown', enter);
function enter(e) {
if (e.which !== 13) { return }
submit(e);
}
function submit(e) {
e.preventDefault();
var msg = { when: Gun.time.is() };
msg.who = $('.chat__name-input').val();
if (!msg.who) {
msg.who = 'user' + Gun.text.random(3);
$('.chat__name-input').val(msg.who);
}
msg.what = $('.chat__message-input').val();
if (!msg.what) { return }
chat.set(msg);
$('.chat__message-input').val('').focus();
}
chat.map().val(function (msg, id) {
if (!msg) { return }
var messageList = $('.chat__message-list');
var last = sort(msg.when, messageList.children('li').last());
var li = $("#msg-" + id)[0]; // grab if exists
if (!li) {
li = $('.model li').clone(true) // else create it
.attr('id', 'msg-' + id)
.insertAfter(last);
}
// bind the message data into the UI
li = $(li);
li.find('.chat__name').text(msg.who);
li.find('.chat__message-text').text(msg.what);
li.find('.sort').text(msg.when);
var time = new Date(msg.when);
li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
$('html, body').stop(true, true)
.animate({ scrollTop: messageList.height() });
});
function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
</script>
</body>
</html>
wow #mauro-stepanoski 's comment is so good (it should be the answer)! #jihuuNI when the lib/webrtc adapter is added like in the Todo-Dapp tutorial, it attempts to automatically connect all browsers with all other browsers - in the future, AXE will automatically cut off unnecessary connections. Do note, browser's WebRTC feature is not very reliable, so you still want to also have super peer connections.
Recently I have asked a similar question about transition animation in divs. (See this post)
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage.
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (i.e. displaying an image) to page 3 (i.e. the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */
$(document).ready(function() {
$(".next").click(function() {
if (pos == 1) {
$(".container").removeClass("pos1");
$(".container").addClass("pos2");
pos++;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos3");
pos++;
}
});
$(".prev").click(function() {
if (pos == 3) {
$(".container").removeClass("pos3");
$(".container").addClass("pos2");
pos--;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos1");
pos--;
}
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 100%;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
width: 300%;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}
.ins {
width: 33.33%;
height: 200px;
margin: 0;
padding: 0;
float: left;
transition: transform 0.5s ease-in-out;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.pos2 .ins {
transform: translateX(-100%);
}
.pos3 .ins {
transform: translateX(-200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container pos2">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "-200%";
} else if (current == "0%") {
current = "-100%";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "0%";
} else if (current == "-200%") {
current = "-100%";
}
$(".container").css("left", current);
});
});
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.