We Keep Coding

I want to create a vote system with jQuery but not working

I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>

Full css ticker : making a loop

I have this code for full css ticker.
Currently, item 1 appears once the list is fully passed, so the list start again.
I'd like to make a "loop". I mean I'd like to get item 1 just after item 4.
Sorry if I'm not clear...
I'd like to know if there is a way to improve with some jquery ?
* {
box-sizing: border-box;
}
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 4em;
background-color: #ffc846;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 4em;
line-height: 4em;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 20s;
animation-duration: 20s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 3em;
font-size: 2em;
color: #333;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">item 1</div>
<div class="ticker__item">item 2</div>
<div class="ticker__item">item 3</div>
<div class="ticker__item">item 4</div>
</div>
</div>

jquery each div add remove class infinity

want to create infinity loop that adds class to each div with some timeout
for know have like this:
$(document).ready(function() {
$('.small-bordered-box').each(function(i) {
var $t = $(this);
setTimeout(function() {
$t.addClass('active');
}, 2000 * i);
});
});
.small-bordered-box {
display: block;
height: 118px;
width: 100px;
border: 2px solid #3e3b38;
border-radius: 5px;
float: left;
margin-right: 35px;
}
.small-bordered-box.active {
animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-bordered-box ">
test1
</div>
<div class="small-bordered-box ">
test2
</div>
<div class="small-bordered-box ">
test3
</div>
want to keep effect like this, just that it would go infiny time..
that users would always sees this effect no matter what or where they are on the page..

You can use setInterval to shake it with an interval of element's-length*Timeouts-interval i.e. 3*2000 like,
$(document).ready(function() {
function shakeIt() {
$('.small-bordered-box').each(function(i) {
var $t = $(this);
setTimeout(function() {
$t.addClass('active');
}, 2000 * i);
});
}
shakeIt();
setInterval(function() {
shakeIt();
$('.small-bordered-box').removeClass('active');
}, $('.small-bordered-box').length*2000);
});
.small-bordered-box {
display: block;
height: 118px;
width: 100px;
border: 2px solid #3e3b38;
border-radius: 5px;
float: left;
margin-right: 35px;
}
.small-bordered-box.active {
animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-bordered-box ">
test1
</div>
<div class="small-bordered-box ">
test2
</div>
<div class="small-bordered-box ">
test3
</div>

use $t.toggleClass('active'); keep this inside setInterval()
$(document).ready(function() {
$('.small-bordered-box').each(function(i) {
var $t = $(this);
setInterval(function() {
$t.toggleClass('active');
}, 2000 );
});
});
.small-bordered-box {
display: block;
height: 118px;
width: 100px;
border: 2px solid #3e3b38;
border-radius: 5px;
float: left;
margin-right: 35px;
}
.small-bordered-box.active {
animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-bordered-box ">
test1
</div>
<div class="small-bordered-box ">
test2
</div>
<div class="small-bordered-box ">
test3
</div>

Change your CSS into:
.small-bordered-box.active {
animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

Strange css transform animation on MS edge

I made a tile animation to flip my tile with a button.
It's working on Chrome, Safari, but in MS Edge browser, flip animation appear strange.
I just want an y-rotation and not a rotation-like as in Edge.
You can find my code behind and example to show my problem on MS Edge.
Does any one has an idea to fix Edge behaviour ?
EDIT : I suppose it's not a problem with transform-style:preserve-3D compatibility because it's Edge compatible.
document.getElementById("btn-front").addEventListener("click", function(){
document.getElementById("flip").className = "flipped";
});
document.getElementById("btn-back").addEventListener("click", function(){
document.getElementById("flip").className = "";
});
#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}
#front {
background-color: red;
transform: translate3d(0px, 0px, 2px);
}
#back {
background-color: green;
transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
.tile {
height: 200px;
width: 200px;
position: absolute;
top: 50px;
left: 50px;
backface-visibility: hidden;
}
.button {
height: 30px;
width: 100px;
margin: 75px 50px;
}
#flip.flipped {
transform: translate3d(0, 0, 0) rotateY(-180deg);
}
<div id="flip">
<div id="front" class="tile">
<button id="btn-front" class="button">Go to back</button>
</div>
<div id="back" class="tile">
<button id="btn-back" class="button">Go to front</button>
</div>
</div>

The problem is in that block:
#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}
If you change the property transform: "translate3d(0, 0, 0);" to transform: translate3d(0, 0, 1) it will work fine.

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>