Develop Reference

Simple play/pause CSS animation button with switching icon

Could anyone help me by adding a simple play/pause button to my text scrolling animation?. I need the button to work as an icon only using <i class="fa-regular fa-circle-play"></i> and <i class="fa-regular fa-circle-pause"></i> but display only one icon at a time according to the animation state.
I'm using the js code for flipping from #guradio
// for selecting the input field on clicking over the flip text
function selectText() {
const input = document.getElementById('searchInput');
input.focus();
input.select();
}
// for flipping the text
$('#searchInput').keyup(function() {
if ($(this).val().length == 0) {
$('#text-flip').show();
} else {
$('#text-flip').hide();
}
}).keyup();
#text-flip {
height:20px;
overflow:hidden;
margin-top: -20px;
}
#text-flip > div > div {
color: rgb(43, 43, 43);
padding-left: 60px;
height:45px;
margin-bottom:45px;
display:inline-block;
font-size: inherit
}
#text-flip div:first-child {
animation: show 10s linear infinite;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="get">
<input id="searchInput" placeholder="Search: "/>
<div id="text-flip" onclick="selectText()">
<div><div>Third Text</div></div>
<div><div>Second Text</div></div>
<div><div>First Text</div></div>
</div>
</form>

I updated your code.
let isPlayed=true;
// for flipping the text
$('#searchInput').keyup(function() {
if ($(this).val().length == 0) {
$('#text-flip').show();
} else {
$('#text-flip').hide();
}
}).keyup();
function btnClicked() {
if(isPlayed)
$(".controlBtn").html("<i class='fa-solid fa-circle-play' onclick='btnClicked()'></i>");
else
$(".controlBtn").html("<i class='fa-solid fa-circle-pause' onclick='btnClicked()'></i>");
$("#text-flip div:first-child").toggleClass("flip-animation");
isPlayed = !isPlayed;
}
function selectText() {
const input = document.getElementById('searchInput');
input.focus();
input.select();
}
#text-flip {
height:20px;
overflow:hidden;
margin-top: -20px;
}
#text-flip > div > div {
color: rgb(43, 43, 43);
padding-left: 60px;
height:45px;
margin-bottom:45px;
display:inline-block;
font-size: inherit
}
#text-flip div:first-child {
animation: show 10s linear infinite;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
.controlBtn {
margin-top: 10px;
}
#text-flip div.flip-animation:first-child {
animation-play-state: paused !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="get">
<input id="searchInput" placeholder="Search: "/>
<div id="text-flip" class="flip-animation" onclick="selectText()">
<div><div>Third Text</div></div>
<div><div>Second Text</div></div>
<div><div>First Text</div></div>
</div>
</form>
<div class="controlBtn"><i class="fa-solid fa-circle-pause" onclick="btnClicked()"></i></div>

Auto load and unload element

The below snippet will load an element on page load using jquery,css, and javascript.
$('.callqueue').click(function(){
$('#dddnav').toggleClass('menu-open');
$('body').toggleClass('menu-open');
});
$(window).load(function (){
$('#dddnav').toggleClass('menu-open');
});
#man {
display:none;
}
#dddnav {
height:30%;
background:#333;
position:fixed;
top:0;
right:-270px;
width:300px;
transition:right .5s;
-webkit-transition:right .5s;
}
#dddnav.menu-open {
right:0;
transition:right .5s;
-webkit-transition:right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="http://placehold.it/200" />
</div>
However, I want the element to load after 3 seconds after the page load, and to unload it after 5 seconds without having to click on the button. How can I get this done using javascript? I found this link: https://css-tricks.com/forums/topic/toggle-classes-with-delays/ but i cant seems to make it work.
Would appreciate any response, example. Thank you!

async and await
To avoid race conditions and ensure that each call to functions go in proper order (although order isn't that important with a method like toggleClass()), use async and await keywords with setTimeout().
Demo
$(window).load(openClose);
$('.callqueue').click(slideNav);
async function openClose() {
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
var open = await slideNav();
await new Promise((resolve, reject) => setTimeout(resolve, 2000));
var close = await slideNav();
};
function slideNav() {
$('#dddnav').toggleClass('menu-open');
}
#man {
display: none;
}
#dddnav {
height: 30%;
background: #333;
position: fixed;
top: 0;
right: -270px;
width: 300px;
transition: right .5s;
-webkit-transition: right .5s;
}
#dddnav.menu-open {
right: 0;
transition: right .5s;
-webkit-transition: right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="https://placehold.it/200" />
</div>

What about doing
$('.callqueue').click(function(){
$('#dddnav').toggleClass('menu-open');
$('body').toggleClass('menu-open');
});
// Let's define a callable to be used inside setTimeout.
toggleIt = function(){
$('#dddnav').toggleClass('menu-open')
};
$(window).load(function(){
setTimeout(
function(){
toggleIt()
setTimeout(toggleIt, 2000) // 5s as 3 + 2
}, 3000
)
})
#man {
display:none;
}
#dddnav {
height:30%;
background:#333;
position:fixed;
top:0;
right:-270px;
width:300px;
transition:right .5s;
-webkit-transition:right .5s;
}
#dddnav.menu-open {
right:0;
transition:right .5s;
-webkit-transition:right .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="callqueue"> CLICK </button>
<div id="dddnav" style="background: red; top: 10%;">
<img id="man" src="http://placehold.it/200" />
</div>

Try this:
$(window).load(function (){
var start_time = new Date().getTime();
while (true) {
if(new Date().getTime() - startTime > 3000){
$('#dddnav').toggleClass('menu-open');
break;
}
}
});

Singular hover will not work

var totalMoney = 0;
var clickMultiplier = 1;
var incomeSecond = 0;
var totalVirus = 0;
var totalTrojan = 0;
var totalWorm = 0;
var totalServer = 0;
function totalMoneyText() {
totalMoney = totalMoney + 1 * clickMultiplier;
}
setInterval(function() {
totalMoney = incomeSecond + totalMoney;
incomeSecond = (totalWorm) + (totalTrojan * 2) + (totalVirus);
}, 1000);
setInterval(function() {
updateText();
}, 100);
setInterval(function() {
totalTrojan = totalTrojan * 1.001;
totalWorm = totalWorm * 1.01;
}, 5000);
function updateText() {
document.getElementById("totalMoney").innerHTML = totalMoney.toLocaleString("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
document.getElementById("buyablenum1").innerHTML = Math.round(totalVirus * 1000) / 1000;
document.getElementById("buyablenum2").innerHTML = Math.round(totalTrojan * 1000) / 1000;
document.getElementById("buyablenum3").innerHTML = Math.round(totalWorm * 1000) / 1000;
}
function buyable1() {
if (totalMoney > 49) {
totalMoney = totalMoney - 50;
totalVirus = totalVirus + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable2() {
if (totalMoney > 149) {
totalMoney = totalMoney - 150;
totalTrojan = totalTrojan + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable3() {
if (totalMoney > 499) {
totalMoney = totalMoney - 500;
totalWorm = totalWorm + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable4() {
if (totalMoney > 99) {
totalMoney = totalMoney - 100;
totalServer = totalServer + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
#font-face{
font-family:HackingT;
src:url(assets/HackingTrashed-Regular.ttf);
}
#font-face{
font-family:Currency;
src:url(assets/Currency.ttf);
}
#font-face{
font-family:Hacker;
src:url(assets/Hacker.tff);
}
body,
html {
overflow-x:hidden;
overflow-y:hidden;
}
html {
background:url(assets/background.png) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
head {} body {} #meme {
color:transparent;
}
.globalcontainer {
position:relative;
margin:0% 0;
min-height:100vh;
}
.buyablecontainer {
position:relative;
z-index:2;
}
.clickablecontainer {
margin:26.5% auto;
position:relative;
z-index:2;
}
#Money {
font-size:50px;
color:whitesmoke;
text-align:center;
font-family:"HackingT";
text-shadow:1px 1px grey;
margin:0 auto;
}
#totalMoney {
font-size:40px;
color:whitesmoke;
text-align:center;
font-family:"Currency";
letter-spacing:3px;
text-shadow:1px 1px grey;
margin:0 auto;
}
.column {
position:absolute;
}
.buyImg {
width:15%;
border:2px grey solid;
}
.noselect {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#imgComputer {
width:15%;
}
.clickable {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-user-drag:auto | element | none;
-moz-user-select:none | text | all | element -ms-user-select:none | text | all | element
}
.number {
color:snow;
padding:1px;
}
#buyImg:active {} .buyable1 {
position:relative;
}
.tooltip {
position:absolute;
margin:0% 1%;
padding:14% 44%;
border:4px grey solid;
background-color:black;
background-blend-mode:difference;
}
.tooltipheader {
font-family:"Hacker";
color:forestgreen;
position:absolute;
display:inline;
top:-10%;
left:0;
}
.tooltiptext {
color:forestgreen;
position:absolute;
font-family:"Hacker";
display:inline;
text-align:center;
font-size:15px;
left:0%;
top:50%
}
.tooltipincome {
position:absolute;
font-size:20px;
left:5%;
margin:-13% 24%;
font-family:"Hacker";
color:forestgreen;
}
#tooltip1 {
display:none;
}
#tooltip2 {
display:none;
}
#tooltip3 {
display:none;
}
#tooltip4 {
display:none;
}
#virus:hover~#tooltip1 {
display:inline;
}
#trojan:hover~#tooltip2 {
display:inline;
}
#worm:hover~#tooltip3 {
display:inline;
}
#server:hover~tooltip4 {
display:inline;
}
#server {
width:25%;
padding:1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hacker Clicker</title>
<link rel=stylesheet type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class=noselect>
<div class=globalcontainer>
<div class="header">
<a id=meme href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click me</a>
<h1 class=noselect id=Money>Money</h1>
<h1 class=noselect id=t otalMoney>$0</h1>
</div>
<!-- Numbers and Buyables -->
<div class="container buyablecontainer noselect">
<div class="column">
<div class="buyable1">
<h2 class=number id=buyablenum1>0</h2>
<img draggable="false" id=virus onclick="buyable1()" class=buyImg src="assets/virus.png" />
<div id=tooltip1 class=tooltip>
<h1 class=tooltipheader>"Virus"</h1>
<h2 class=tooltipincome>Income: $1 per second Price:50</h2>
<p class=tooltiptext>A virus tries to infect anyone and everyone that it can, it's usually used as a way to collect revunue through email spam, aswell to fuck your life up.</p>
</div>
</div>
<div class="buyable2">
<h2 class=number id=buyablenum2>0</h2>
<img draggable="false" id=trojan onclick="buyable2()" class=buyImg src="assets/trojan.png" />
<div id=tooltip2 class=tooltip>
<h1 class=tooltipheader>"Trojan"</h1>
<h2 class=tooltipincome>Income:$2 per second 0.01% replication Price:150</h2>
<p class=tooltiptext>A trojan creates a backdoor to your computer and gives confidential or personal information to the creator.</p>
</div>
</div>
<div class="buyable3">
<h2 class=number id=buyablenum3>0</h2>
<img draggable="false" id=worm onclick="buyable3()" class=buyImg src="assets/worm.png" />
<div id=tooltip3 class=tooltip>
<h1 class=tooltipheader>"Worm"</h1>
<h2 class=tooltipincome>Income:$1 per second 1% replication Price:500</h2>
<p class=tooltiptext>A worm self replicates through the interwebs and lives inside everyone which it is allowed. They are used to do any ill-biddings that the creator wants.</p>
</div>
</div>
<div class="buyable4">
<h2 class=number id=buyablenum4>0</h2>
<img draggable="false" id=server onclick="buyable4()" class=buyImg src="assets/server.png" />
<div id=tooltip4 class=tooltip>
<h1 class=tooltipheader>"Server"</h1>
<h2 class=tooltipincome>Income:$0 +2 on click Price:100</h2>
<p class=tooltiptext>The more servers you got, the more you can hack. Get it foo?</p>
</div>
</div>
</div>
</div>
<div class=clickablecontainer align="center">
<img draggable="false" onclick="totalMoneyText()" id=imgComputer class=clickable src="assets/hacking.gif" />
</div>
</div>
</body>
</html>
Jsfiddle
What's supposed to show up
I apologize in advance for not being able to see the images, but if you try to hover over the 4 icons to the left they work except the last one, hopefully it isn't a simple mistake as I started HTML CSS and Javascript 2 days ago, but it is entirely possible and I'm sorry if that's the case :p.
Also, I'm having a hard time with CSS positioning things exactly where I want them, for example if I want to have an image in the center no matter what ever is around it how do I do that?
Any tips?

Typo in CSS.
#server:hover~tooltip4 {
should read
#server:hover~#tooltip4 {
Many refactoring possibilities here - happy learning!

Expanding search bar not expanding before search

There are 2 problems when running this search.
1: When clicking the magnifier, instead of just opening the search bar, it searches immediately. 2: if more than 2 characters are typed and then the search bar is closed (by click off it) then reopened (by clicking back on it) the search button and search text doesn't align properly. https://jsfiddle.net/mkLj7dap/
HTML:
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<div class=" top-search">
<div class="ty-search-block">
<form action="www.example.com/" name="search_form" method="get" class="cm-processed-form">
<input type="hidden" name="subcats" value="Y">
<input type="hidden" name="pcode_from_q" value="Y">
<input type="hidden" name="pshort" value="Y">
<input type="hidden" name="pfull" value="Y">
<input type="hidden" name="pname" value="Y">
<input type="hidden" name="pkeywords" value="Y">
<input type="hidden" name="search_performed" value="Y">
<input type="text" name="hint_q" value="" id="search_input" title="" class="ty-search-block__input cm-hint"><button title="" class="ty-search-magnifier" type="submit"><i class="material-icons">search</i></button>
<input type="hidden" name="dispatch" value="products.search">
</form>
</div>
</div>
</body>
</html>
CSS:
.cm-processed-form{
position:relative;
min-width:50px;
width:0%;
height:50px;
float:right;
overflow:hidden;
-webkit-transition: width 0.1s;
-moz-transition: width 0.1s;
-ms-transition: width 0.1s;
-o-transition: width 0.1s;
transition: width 0.1s;
}
.ty-search-block__input{
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:100%;
height:50px;
margin:0;
padding:0px 55px 0px 20px;
font-size:20px;
color:red;
}
.ty-search-block__input::-webkit-input-placeholder {
color: #d74b4b;
}
.ty-search-block__input:-moz-placeholder {
color: #d74b4b;
}
.ty-search-block__input::-moz-placeholder {
color: #d74b4b;
}
.ty-search-block__input:-ms-input-placeholder {
color: #d74b4b;
}
.ty-search-magnifier{
width:50px;
height:50px;
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding-top:10px;
margin:0;
border:0;
outline:0;
line-height:30px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}
.cm-processed-form-open{
width:100%;
}
JS:
$(document).ready(function(){
var submitIcon = $('.ty-search-magnifier');
var inputBox = $('.ty-search-block__input');
var searchBox = $('.cm-processed-form');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('cm-processed-form-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('cm-processed-form-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.ty-search-magnifier').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.ty-search-block__input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.ty-search-magnifier').css('display','none');
} else {
$('.ty-search-block__input').val('');
$('.ty-search-magnifier').css('display','block');
}
}

Change the script as bellow to prevent the default click event, when search box not expanded:
submitIcon.click(function (event) {
if (isOpen == false) {
event.preventDefault();
searchBox.addClass('cm-processed-form-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('cm-processed-form-open');
inputBox.focusout();
isOpen = false;
}
});

Vertical distribution of elements (and animation) - jQuery

I like to know the cleanest method to distribute elements vertically with jQuery. I nailed it but it's not very clean right >< ? I would like to get to do it without plugin... Thank you in advance ;-)
Here my JSFiddle
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
if(firstElem.length){
var heightCall = (firstElem.offset().top)+(firstElem.outerHeight())+(gap);
var middleElem = $('#dolore');
middleElem.offset({top : heightCall});
var lastElem = $('#amet');
var NewHeightCall = (middleElem.offset().top)+(middleElem.outerHeight())+(gap);
lastElem.offset({top : NewHeightCall});
/* Animation */
$('#lorem, #dolore, #amet').hover(
function(){
$(this).stop().animate({left: (($(this).offset().left)-(20))+'px',opacity:'0.5'},'slow')
},
function(){
$(this).stop().animate({left: (($(this).offset().left)+(20))+'px',opacity:'1'},'slow')
});
}
});

I have fiddled around with your code:
This is a simplified version:
HTML:
<div id="lorem" class="vertical-block">My first ID div</div>
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<div id="amet" class="vertical-block">My third ID div</div>
CSS:
.vertical-block {
position: absolute;
padding:15px;
}
#lorem{
top:20%;
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
Javascript:
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
var top = 0;
$('.vertical-block').each(function(element){
var $currentElement = $(this);
if (top === 0) {
top = $currentElement.offset().top + $currentElement.outerHeight() + gap;
} else {
$currentElement.offset({top: top});
top = top + $currentElement.outerHeight() + gap;
}
});
});
https://jsfiddle.net/rae2x4e0/1/
Now if you want to go for a purely css solution, then:
HTML:
<div class="container">
<div id="lorem" class="vertical-block">My first ID div</div>
<br />
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<br />
<div id="amet" class="vertical-block">My third ID div</div>
</div>
CSS:
.container {
position-relative;
text-align: right;
padding-top: 10%;
}
.vertical-block {
padding:15px;
display: inline-block;
margin-top: 20px;
}
#lorem{
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
https://jsfiddle.net/ycdwpjxw/1/