Develop Reference

Play and Stop Audio File with Javascript onmouseenter & onmouseleave

Looking to use just Javascript without any libraries to start and stop audio on mouse enter and mouse leave. Also want the audio to loop while the div is being hovered. Right now I have two divs because I'm unsure of how to add multiple onmouseenter events and if this is even possible. Is all of this possible? Dropping my code snippet below.
document.addEventListener("mousemove", function(){
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e){
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX-55) + "px";
cursor.style.top = (mouseY-55) + "px";
}
function play() {
var audio = new Audio('https://www.figurefoundry.xyz/metal/metaldrums.mp3');
audio.play();
}
body {
background: #fffdfa;
}
#cursor {
height: 100px;
width: 100px;
position: absolute;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
animation: spincursor infinite 1.5s steps(1, end);
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
#keyframes spincursor {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
}
25% {
transform: rotate(90deg);
}
37.5% {
transform: rotate(135deg);
}
50% {
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor" hidden></img>
<div onmouseenter="play()">
<div onmouseenter="cursor.hidden = false" onmouseleave="cursor.hidden=true">
</div> <!--make cursor invisible on leave and visible on enter-->
</div>

I think you're going to get an error in console if you do this in Chrome: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first You need to interact ( click) something for audio to be played .
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Is it possible to combine translateX/translateY and scale in single CSS transition?

I have been playing around with looping of CSS transitions (following this article).
The transition itself could be divided into 4 (looped) phases:
shrinked2=>expanded=>expanded2=>shrinked
These states are represented by 4 classes:
shrinked2 - stateOne
expanded - stateTwo
expanded2 - stateThree
shrinked2 - stateFour
I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes, listed above.
Up to his point it basically works fine for me, here is demonstration on JSFiddle.
Now, as the next step I would like to center the transitioned element, vertically and horizontally, on the page (and keep it there). I am doing so by adding the following, to the element id:
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
as well as appending each transform:, in the state classes, with translateX(-50%) translateY(-50%). Now this way the scale is not applied to the element (i.e. size is not changed on transition) - only background property is affected, transition only happens once (i.e. it is not looped anymore), as if transitionend was never fired.
Here is the result on JSFiddle. Changing of expected property name (in loopTransition function) to background, has not effect (JSFiddle).
I am totally aware that there are lots of other ways to center the element. What I would like to understand is:
Is it possible to combine translateX/translateY and scale in the same CSS transition (if yes, what am I doing wrong?)
If element centering with top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); is not compatible with transitions in general or scale in particular, what is the recommended method to use?
var the_circle = document.getElementById('circle');
the_circle.addEventListener("transitionend", loopTransition);
function startTransition() {
var the_circle = document.getElementById('circle');
if (the_circle.className === 'stateOne paused') {
the_circle.style.transitionDuration = 1;
the_circle.className = 'stateTwo animated';
} else {
stopTransition();
}
}
function stopTransition() {
var the_circle = document.getElementById('circle');
the_circle.style.transitionDuration = "0.5s"
the_circle.className = "stateOne paused"
}
function loopTransition(e) {
var the_circle = document.getElementById('circle');
if (e.propertyName === "transform") {
if (the_circle.className.indexOf('paused') !== -1) {
stopTransition()
} else {
if (the_circle.className === "stateTwo animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateThree animated";
} else if (the_circle.className === "stateThree animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateFour animated";
} else if (the_circle.className === "stateFour animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateOne animated";
} else if (the_circle.className === "stateOne animated") {
the_circle.style.transitionDuration = "1s";
the_circle.className = "stateTwo animated";
}
}
}
}
#circle {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
width: 10%;
padding-top: 10%;
border-radius: 50%;
transition: all 1s;
}
.stateOne {
background: #800080;
transform: scale(1.0001, 1.0001) translateX(-50%) translateY(-50%);
}
.stateTwo {
background: #ffe6ff;
transform: scale(2, 2) translateX(-50%) translateY(-50%);
}
.stateThree {
background: #ffe6ff;
transform: scale(2.0001, 2.0001) translateX(-50%) translateY(-50%);
}
.stateFour {
background: #800080;
transform: scale(1, 1) translateX(-50%) translateY(-50%);
}
<div id='circle' class="stateOne paused" onclick=startTransition()></div>

In CSS, #id selectors take precedence over .class selectors. Therefore, the transform declarations in your .state classes never get applied. The solution is to either:
increase the specificity of your rule, i.e. #circle.stateTwo,
add the !important flag to your declaration:
transform: scale(2, 2) translate(-50%, -50%) !important;
However this should be avoided and the first method used whenever possible.
An easier method to center elements, that doesn't mix with your animation, is to use flexbox:
.flex-container {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
#circle {
width: 10%;
padding-top: 10%;
border-radius: 50%;
transition: all 1s;
}
.stateOne {
background: #800080;
transform: scale(1.0001, 1.0001);
}
.stateTwo {
background: #ffe6ff;
transform: scale(2, 2);
}
.stateThree {
background: #ffe6ff;
transform: scale(2.0001, 2.0001);
}
.stateFour {
background: #800080;
transform: scale(1, 1);
}

Highlight element using jQuery with scaled transparent element

I'm trying to create the following effect for any element using only jQuery/plugins:
In particular it should use a transform for the scale rather than width and height animation and be usable on any DOM element.
Is there a plugin available for jQuery which will achieve this effect? It should be quite simple: duplicate the dom object with clone(), reposition the clone over the original absolutely then animate a scale transform and opacity on the new element. However, I suspect it's not as simple as this.
Any ideas?

You don't need jQuery to accomplish that animation. You can use CSS3 animations and transform properties. Check out the following example I created:
http://jsbin.com/purik/1/
HTML:
<div class="logos">
<div class="logo"></div>
<div class="logo animated"></div>
</div>
CSS:
.logos {
position: relative;
}
.logo {
width: 100px;
height: 70px;
background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.logo.animated {
position: absolute;
left: 0;
top: 0;
animation: scale-fadeout 2s infinite;
-webkit-animation: scale-fadeout 2s infinite;
}
#keyframes scale-fadeout {
0% {
transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
#-webkit-keyframes scale-fadeout {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
-webkit-transform: scale(1.05);
}
100% {
opacity: 0;
-webkit-transform: scale(1.35);
}
}

This works if the parent element is position: relative, and the element itself is position: absolute.
Clones the element and then animates it to change the size, change the values of left and top, and the set opacity: 0.
Fiddle: http://jsfiddle.net/Ej38P/1/

CSS3 page loading effect trigger by jquery

Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)

Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.

I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.

Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}

How to delay basic HTML tooltip?

I was wondering if there was any way to delay just the classic HTML tooltip (no jQuery plugins like qTip, please). It's just a button as:
<input type="button" title="Click" value="My Button">
I want to know if there is any way to delay the title using pure JavaScript or client-side scripting. From what I have researched, it doesn't seem possible as it is part of the actual OS' GUI programming, which is impossible to access via browser scripting, but if there is any way that I just haven't come across yet, I would love to know! Thanks!

The browser controls the tool tip. If you want to make any changes you will have to create your own. Maybe by using the plug ins your refered to.

I'm 7+ years late, but just stumbled across the same desire and wrote a simple solution to delay tooltips using CSS.
Simply use transition-delay or animation keyframes for opacity. While the transition-delay is easiest, it has the trouble of delaying both reactions in and out of hover, afaik. Animation bypasses that and will only delay the start, for example:
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #444;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 0;
left: 105%;
opacity: 1;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #545 transparent transparent;
}
/*this is the IMPORTANT bit: hover with animation*/
.tooltip:hover .tooltiptext {
visibility: visible;
animation: tooltipkeys 1s 1; //here just change the 1s to you desired delay time!
opacity: 1;
}
#-webkit-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes tooltipkeys {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="tooltip"><span class="tooltiptext">delayed tip</span>Example</div>
For more tips on tooltips you should check w3 schools for plenty of good advice.

This is a feature of the system which you cannot manipulate with HTML, CSS or JavaScript.
Keep in mind that different Operating Systems have different set of delays and styling to these tooltips, the best option to consider for better control (delay,styling,animation,etc) would be to implement your own tooltip.