JQuery: Make hidden span visible and blink - javascript

OK, I know blinking is bad, but I really need this. When recording a phone call, I want the agent screen to blink "Recording." Otherwise I don't want the word to appear. I seem to be able to do one or the other, but not both.
<head>
<style> span { display:none; } </style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="/jquery.js"></script>
<script src="/jquery.modern-blink.js"></script>
<Script>
function StartRecording($user) {
$.get("http://172.16.77.22/script.php?agent_user="+$user+"& _
function=recording&value=START", function( data ) {
$( "#top_hr").show();
$( "#bot_hr").show();
});
jQuery(function($) {
$('.js-top-hr').modernBlink();
$('.js-bot-hr').modernBlink();
});
}
</script>
Here's a span that should be affected:
<span class="js-top-hr" id=top_hr><hr style="color:red"><font style="color:red">
<center>RECORDING </font></span></center>
...
Here's a button that should do the trick:
button id"="StartRec" name="StartRec" onclick="StartRecording('<?php echo _
$user;?>');">Start Recording Now!</button>
(Had to take the open tag off "button because it would not display."
Any help greatly appreciated!
JR

Try this:
function StartRecording($user) {
$.get("http://172.16.77.22/script.php?agent_user="+$user+"& _
function=recording&value=START", function( data ) {
$( "#top_hr").show().modernBlink();
$( "#bot_hr").show().modernBlink();
});
}

You can achieve this with javascript/JQuery:
<script type="text/javascript">
setInterval(function(){
$('.blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
<span class="js-top-hr blink">RECORDING</span>
Alternatively you could also use CSS3:
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite
}
#-webkit-keyframes .blink {
67% { opacity: 0 }
}
#keyframes .blink {
67% { opacity: 0 }
}
Then assign the .blink class when the button is pushed.
Source

Related

rotate image continuously with javascript

I would like to write a javascript to continuously rotate image by clicking on a button. I was able to make a partial rotation with a click. I think I should recursively call the function to obtain a continuously rotation but I don't know how to do this.
The following is my code.
<html>
<head>
<title>Image Rotation</title>
</head>
<body>
<button id="rotate">Rotate</button>
<img src="images/circle.png" id="sample" ;" alt="" />
</body>
<script>
var rotation = 0;
document.querySelector("#rotate").addEventListener('click', function() {
rotation += 90;
document.querySelector("#sample").style.transform = 'rotate(' + rotation + 'deg)';
});
</script>
</html>
add a class in your css file like
.rotating {
animation: rotate 1s infinite;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
and then add that class by javascript to your element
document.querySelector("#rotate").addEventListener('click', function() {
document.querySelector("#sample").classList.add('rotating')
});

How to fade out text using JavaScript or jQuery and then bring it back

I am new to JavaScript/jQuery and what I want to do is to fade out text and when the opacity is zero, I want to bring back the text with the same effect. I am leaning towards some kind of if statement and the fade in effect, but don't manage to understand how to put it all together. Any tips for how this could be done using jQuery would be appreciated.
function hideText() {
var fadeText = document.getElementById("fadeTextp");
fadeText.style.opacity = 0;
fadeText.addEventListener("transitionend", function(e) {
alert("The text is hidden, but how can I now get it back with same effect?")
}, false);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>
I'm not sure what your overall goal is, but there are lots of ways to do this kind of thing. Some could use only CSS, some could use JavaScript, some could use both. I'll do a "both" example.
Note: It would probably be better to use one or the other - so you don't define the transition time in both places.
Note: jQuery has animation support built in. See the answer from #Twisty for a jQuery example and links to their docs.
var transitionTime = 2250;
var faderTimeout = null; // keep track of this to cancel it if multiple events happen
var fadeText = document.getElementById("fadeTextp");
function hideText() {
fadeText.classList.remove('out');
fadeText.classList.add('out');
window.clearTimeout(faderTimeout);
faderTimeout = window.setTimeout(() => {
fadeText.classList.remove('out');
}, transitionTime);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
.fade.out {
opacity: 0;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>
Here's a jQuery example since you asked for jQuery. You need a container with some height to be able to click again for the text to come back. If you don't have this container then the thing you add a "click" event listener to is not available to click anymore.
I use the :visible selector to see if the text is visible and if so fadeOut and if it's not visible then fadeIn.
let fadeTextp = $("#fadeTextp");
$("#fadeTextContainer").on("click", () => {
if (fadeTextp.is(":visible")) {
fadeTextp.fadeOut()
} else {
fadeTextp.fadeIn()
}
});
#fadeTextContainer {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fadeTextContainer">
<p id="fadeTextp">
Fade out this text and then bring it back when clicked again.
</p>
</div>
Here is a quick jQuery Example.
$(function() {
$(".fade").click(function() {
var $this = $(this);
$this.fadeOut(600, function() {
$this.fadeIn(600);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">
Fade out this text and then bring it back when clicked again.
</p>
This uses .fadeOut() and cascades a callback to .fadeIn().
See more:
https://api.jquery.com/fadeout/
https://api.jquery.com/fadein/
You can also animate the visibility.
$(function() {
$(".fade").click(function(e) {
var t = $(this);
if (t.hasClass("out")) {
t.animate({
opacity: 1
}, 600);
t.removeClass("out");
} else {
t.animate({
opacity: 0
}, 600);
t.addClass("out");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">Fade out this text and then bring it back when clicked again.</p>

Combining addClass with fadeIn on mouseenter

So, I have written JavaScript code that uses the JQuery library to swap classes on hover.
$("#workBG").on({
mouseenter : function() {
$("#workplay").addClass("workBG", 200);
$("#workplay").removeClass("diagR", 200);
}
,
mouseleave : function() {
$("#workplay").addClass("diagR", 200);
$("#workplay").removeClass("workBG", 200);
}
})
This code works but I would like to have the class fadeIn and fadeOut considering that it swaps background images but it does so harshly without the fadeIn and fadeOut. I have seen similar questions but they were all from five or six years ago and I would like to know if there is any better way to do this now.
From one of the older questions, I saw that they had answered with
.addClass("workBG", 200);
where the 200 is the time for the class to fadeIn. As far as I can tell, this does not work now or I am doing something wrong. I did check the JQuery documentation and there was nothing about this under the addClass API documentation.
In Addition:
HTML code:
<div id="workplay" class ="row text-center mt-5 diagR">
<div class ="col-sm-6 align-self-center changework">
<p id= "workBG" class ="display-1 font-weight-bold text-warning">WORK.</p>
</div>
<div class ="col-sm-6 align-self-center">
<p id= "playBG" class ="display-1 font-weight-bold">PLAY.</p>
</div>
</div>
This is the html code that is related to the JS and the backgrounds are applied through the classes.
just add transition property on your element don't use 2nd parameter with addClass / removeClass function
$("#workBG").on({
mouseenter: function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
},
mouseleave: function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
}
})
#workplay {
transition: 2s;
}
.workBG {
background: red;
}
.diagR {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workBG">
<div id="workplay">asdasdasd</div>
</div>
/* This is working fine for me, Please try this solution */
$("#workplay").on({
mouseenter: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
});
},
mouseleave: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
});
}
});
/* You can run this file as it is (It is working fine) */
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#workplay").on({
mouseenter: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
});
},
mouseleave: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
});
}
})
});
</script>
<style>
#workplay {
transition: 2s;
}
.workBG {
background: red;
}
.diagR {
background: blue;
}
</style>
</head>
<body>
<div id="workplay">
Please move cursor on me.
</div>
</body>
</html>

I can't get my animation to work on load of my website using jquery

So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!
jQuery
$(document).ready(function(){
window.onload = function render(){
$('.title .sub-title').addClass('render');
}
});
CSS
.render {
animation-name: render;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
#keyframes render {
0% { transform: translateX(-800px); }
100% { transform: translateX( 0px ); }
}
HTML
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1><!--Need To add animation
<h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to-->
</div>
Please can someone help?
It would be very beneficial!
Try the following:
$(document).ready(function(){
$('.title, .sub-title').addClass('render');
});
The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.
Your .sub-title class is commented out. Try this:
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1>
<h4 class="sub-title">- Here is a Template Slogan -</h4>
</div>

Stop CSS animation with jQuery?

Does anyone know why this isn't working? I just want my button to stop the background animation when it is clicked. Please help me.
$(document).ready(function(){
$("#togglebackgroundbutton").click(function(){
$("-webkit-keyframes bg").toggleclass("paused");
});
});
</script>
<style>
body {
background-color:green;
-webkit-animation-name:bg;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:2s;
}
#-webkit-keyframes bg {
from{background-color:green;}
50%{background-color:yellow;}
to{background-color:green;}
}
.paused {
-webkit-animation-play-state:paused;
}
$(document).ready(function(){
$("#togglebackgroundbutton").click(function(){
$("body").toggleClass("paused");
});
});
You should toggle class on body. Also its toggleClass and not toggleclass

Categories