We Keep Coding

How to make a infinite transition effect on a click slider when arriving at one end ? (transition issue)

I am making a custom slider (photo slider) when you click you go to the next slide. I arrived to pretty descent result BUT
When arriving at one end (right & left) of the slider I can't figure how to make it transition as if it was an infinite slider, mine just go over all the slide up to the other end.
I thought of making a duplicate slider to transition but can't make it work.
Do you have any suggestions?
Many thanks
var countslider = 0;
var nombreslide = 3;
var nbslidecachee = nombreslide - 1;
var limitslider = nbslidecachee * 100;
function sliderright() {
if (countslider == -limitslider) {
jQuery(".container-slider").css({"transform":"translateX(0vw)"});
countslider = 0;
}
else {
var translatevalue = countslider - 100;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});
countslider = translatevalue;
}
}
jQuery('#btnslider-right').on('click', function(){sliderright()});
$(document).on("pagecreate",function(){
$("#bloc-divi").on("swipeleft",function(){sliderright()
});
});
function sliderleft() {
if (countslider == 0) {
var translatevalue = -limitslider;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});
countslider = translatevalue;
}
else {
var translatevalue = countslider + 100;
jQuery(".container-slider").css({"transform":"translateX( " + translatevalue + "vw)"});
countslider = translatevalue;
}
}
jQuery('#btnslider-left').on('click', function(){sliderleft()});
jQuery('#btnslider-left').on('click', function(){console.log(countslider);});
$(document).on("pagecreate",function(){
$("#bloc-divi").on("swiperight",function(){sliderleft()
});
});
#bloc-divi{
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.container-slider {
position: absolute;
width: 100vw;
height: 100vh;
background-color: grey;
transition: 0.7s ease;
}
#photo1 {
width: 50%;
height: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-color: blue;
}
#photo2 {
width: 50%;
height: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-color: purple;
}
#photo3 {
width: 50%;
height: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-color: green;
}
#photo3bis {
width: 50%;
height: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-color: green;
}
.legende1 {
width: 50%;
height: 10%;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
background-color: red;
}
.legende2 {
width: 50%;
height: 10%;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
background-color: red;
}
#slider-2 {
left: 100%;
}
#slider-3 {
left: 200%;
}
#slider-3bis {
left: -100%;
}
.btn-sliderS{
height: 40px;
width: 30px;
position: absolute;
margin-top: calc((100vh - 40px)/2);
background-color: yellow;
}
.btn-sliderS:hover {
cursor: pointer;
}
#btnslider-left{
left: 0;
}
#btnslider-right{
right: 0;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="bloc-divi">
<div id="slider-1" class="container-slider">
<div id="photo1">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>
<div id="slider-2" class="container-slider">
<div id="photo2">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>
<div id="slider-3" class="container-slider">
<div id="photo3">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>
<div id="slider-3bis" class="container-slider">
<div id="photo3bis">
</div>
<div class="legende1">
</div>
<div class="legende2">
</div>
</div>
<div id="btnslider-left" class="btn-sliderS"><
</div>
<div id="btnslider-right" class="btn-sliderS">>
</div>
</div>

I hope such a question has already been asked.
source-1
source-2
or only css:
source-3
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
Click on source-3 to continue

HTML/CSS Animation - JavaScript

I've been trying to animate a sliding door that is triggered on the click of a button.
Here is my fiddle
I've got two sides of the sliding door. Left side is blue, right side is red. The left side should slide to the left and the right door should slide to the right.
First of all, I'm trying to position the button to the middle of the door. I'm using
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
but still the button appears kind of sideways
But secondly when the button is clicked, both sides of the door should slide out at the same time, but unfortunately only the red door functions correctly.
The blue door is stuck. What am I doing wrong?

You can use simple JQuery animation to do what you require.
FIDDLE
Here is the code:
$("button").click(function() {
$(".one").animate({
left: '0'
});
$(".three").animate({
left: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div>
<div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;">
</div>
<div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div>
<button style="position:absolute;left:110px;top:50px;">
CLICK ME
</button>

It should be like this
function myMove() {
var elem = document.getElementById("myAnimationRight");
var elem_l = document.getElementById("myAnimationLeft");
var elem_R = document.getElementById("myAnimationRight");
elem_l.className += " opened";
elem_R.className += " opened";
}
#container {
width: 800px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display:inline-block;
width: 810px;
overflow:hidden;
}
#left {
display:inline-block;
width: 400px;
}
#right {
display:inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
transition:linear all 0.5s;
left:0;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
transition:linear all 0.5s;
right:0;
}
#myAnimationRight.opened{
right:-100%;
transition:linear all 0.5s;
}
#myAnimationLeft.opened{
left:-100%;
transition:linear all 0.5s;
}
<div id="container">
<div id ="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id ="left">
<div id ="myContainer">
<div id ="myAnimationLeft"></div>
</div>
</div>
<div id ="right">
<div id ="myContainer">
<div id ="myAnimationRight"></div>
</div>
</div>
</div>
</div>
You can handle animation via CSS and just add class opened to elements on button click.

You need to minus half the button width and height to bring it to the center.
If button's width is fixed, its correct to use calc(50% - 50px) as Icewine's answer.
For elements with dynamic widths and heights u can always use:
position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%) translateY(-50%);
The above code will center the element even if you dont know the height and width of the element.
Example:
body {
padding: 0px;
margin: 0px;
}
div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: red;
}
<div></div>
As for animation, why not use classes and let the CSS handle the animation?
function myMove() {
document.getElementById("myAnimationLeft").className = "DoorOpenLeft";
document.getElementById("myAnimationRight").className = "DoorOpenRight";
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#container {
width: 100%;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
#wrapper {
z-index: 1;
position: absolute;
width: 100%;
overflow-x: hidden;
clear: both;
}
#left {
display: inline-block;
width: 50%;
float: left;
}
#right {
display: inline-block;
width: 50%;
float: right;
}
#myContainer {
width: 100%;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 100%;
height: 300px;
left: 0px;
position: absolute;
background-color: blue;
transition: all 1s ease;
}
#myAnimationRight {
width: 100%;
height: 300px;
left: auto;
right: 0px;
position: absolute;
background-color: red;
transition: all 1s ease;
}
.DoorOpenLeft {
left: -100% !important;
}
.DoorOpenRight {
right: -100% !important;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

Defining same vars causing issues and for the left door you need to decrease value _pos--
Solution for button
left: calc(50% - 38px);
#container {
width: 810px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>
<script>
function myMove() {
var _elem = document.getElementById("myAnimationLeft");
var _pos = 0;
var _id = setInterval(_frame, 5);
function _frame() {
if (_pos == 410) {
clearInterval(_id);
} else {
_pos--;
_elem.style.right = _pos + 'px';
_elem.style.left = _pos + 'px';
}
}
var elem = document.getElementById("myAnimationRight");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 410) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
elem.style.right = pos + 'px';
}
}
}
</script>
JQuery Solution created on #shubhamagrawal's answer.
$(document).ready(function() {
$('button').click(function() {
$("#myAnimationLeft").offset({
left: 0
})
$("#myAnimationRight").offset({
left: $("#myAnimationRight").width()
})
$("#myAnimationLeft").animate({
left: -$("#myAnimationLeft").width()
}, 2000);
$("#myAnimationRight").animate({
left: $("#myAnimationRight").width()
}, 2000);
})
})
body,
html {
margin: 0;
padding: 0;
}
#container {
width: 810px;
position:relative;
overflow:hidden;
height:300px;
}
#button {
z-index: 2;
position: absolute;
top: calc(50% - 11px);
left: calc(50% - 34px);
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="button">
<button>Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

For the button, you need to minus the width and height of the button to center it.
left: calc(50% - 50px); if button width is 100px;
Also, you need to set the parent div above button to position: relative; or the absolute wont work. You should also set a height of the parent div while you are at it.

Mouseover Mouseout with overlapping content

When I mouseover the div with class=background (the little green square in the demo) I fade in the div with class=hover (displaying the grey and blue divs in the demo).
The grey partially overlaps the .background and I can move the mouse around inside it without triggering the mouseout on .background.
But..
If I move the mouse outside the grey div (to hover over the blue for example) then the mouseout on .background gets triggered.
How can I prevent this from happening so that as long as I am hovering over the newly displayed .hover div the mouseout on '.background' will not be triggered?
$('.AddDiv').on('click', function() {
var html = '<div class="container"><div class="background"></div><div class="hover"></div></div>';
$('.Wrap').prepend(html);
});
$(".Wrap").on("mouseover", ".background", function() {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function() {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.content {
width: 170px;
height: 120px;
background-color: grey;
position: relative;
left: 15px;
top: 15px;
}
.navigation {
width: 190px;
height: 40px;
background-color: blue;
position: relative;
top: 30px;
left: 5px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background"></div>
<div class="hover">
<div class="content"></div>
<div class="navigation"></div>
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Use mouseleave instead of mouseout:
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

Force or Embed 7 images positioned Absolute into specific div?

so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants.
They get loaded on page loading and they need to be stacked on top of each other.
Here is html:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:
function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}
And here is my CSS on page:
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
float: left;
width: 30%;
}
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.7vh;
color: #0071ff;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
padding: 1vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 68%;
float: left;
font-size: 1.7vh;
padding: 1vh;
height: 100%;
}
#NameObject{
font-size: 3vh;
padding: 0px;
padding-left: 1vh;
}
As you can see in image, with current
#AccountAvatar img{
width: 10%;
position: absolute;
left: 0;
right: 0;
}
Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.
Here is what it should be like:
I am thinking perhaps there is a way to layer images on top of each other without position: absolute?
Thanks.
Tried setting Parent position to relative.
#AccountAvatar{
float: left;
height: 500px;
position: relative;
width: 30%;
}
#AccountAvatar img{
width: 60%;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
}
Character appears below button.
Any way to adjust him to be above button?

Your absolute positioning is fine however, absolute elements are not in the normal content flow so you need to add a height to the container of the absolute elements.
http://jsfiddle.net/rwh3emp2/1/
#AvatarImgFrame is the container of the image
#AvatarImgFrame {
height: 230px;
}
You can remove the height from #AccountAvatar

Adding and Animating DIVs

I'm trying to create div boxes step by step and animate them for several times when a button is pressed. I created a running sample code, and everything is going well. It goes right to the endhost, then it goes left again to its original place.
I want to simulate TCP, exactly as shown at http://histrory.visualland.net/tcp_fast_recovery.html.
Now I want each step when the button is pressed, and that between the DIVs in the same step, there should be delay when they move so one can distinguish them once they are animated. Can anyone help me with that?
$(document).ready(function() {
$("button").click(function() {
var d = $("#t");
var number = $("#number1").val();
var speed = 2000;
// if(state==true){
d.animate({
left: '+=230px'
}, speed);
d.animate({
left: '+=230px'
}, speed);
d.animate({
top: '+=20px',
backgroundColor: "#f09090",
text: '12'
}, speed / 4, "swing", function() {
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500);
});
});
d.delay(1000).animate({
left: '-=230px'
}, speed);
d.animate({
left: '-=230px'
}, speed);
d.fadeOut();
});
});
<body id="myapp">
<img src="https://via.placeholder.com/50" style="left: 0px; width: 50px; height: 50px;" />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; left: 275px; position: fixed; " />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; right: 0px; position: fixed; left: 548px;" />
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 10px; z-index=-1;"></div>
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 30px; z-index=-1;"></div>
<p>
Speed (mS): <input value="1000" id="number1" type="number" style="position: relative"></input>
<button style="position: absolute; top: 150px">Apply!</button>
<!-- dynamic area -->
<div id="t" style="position: absolute; text-align: center; vertical-align: middle; width: 20px; height: 20px; left: 60px; top: 10px; background-color: lightgreen">
<font id="span">
1
</font>
</div>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>