I'd like to speed up the fade() function, but the arguments the function accepts are about opacity, not speed. How can I do it?
Thanks
You can set a new tween duration like:
$('slow').set('tween', {duration: 5000});
$('fast').set('tween', {duration: 100});
$$('div').fade();
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
<div id="slow">I'm going to fade slowly!</div>
<div id="normal">I'm going to fade normal speed!</div>
<div id="fast">I'm going to fade fast!</div>
jsFiddle: http://jsfiddle.net/8vjsfpfq/
Related
HTML:
<div class="popup" onclick="myFunction()">
<input type="text" placeholder="Info"/>
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
jQuery:
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
You can see my work: https://jsfiddle.net/t2ywx6ng/4/
I want the popup to be closed when user click anywhere on the screen or otherwise after a specific time. Please help me.
You can set a timer for that, that gets started after the document is readily loaded ;)
$(document).ready(function () {
//Wait 5000 milli seconds then call call the function to close the pop-up;
setTimeout(myFunction, 5000);
});
First load JQuery in your script (of course, you don't have to use a CDN. You can also download JQuery)
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
Then, you can add a hide option to make things easy to see and understand.
.popup .hide {
visibility: hidden;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
Now, you can check if the user clicked anywhere in the screen and hide the popup like doing so:
$(window).click(function() {
popup.classList.toggle("hide");
});
If the user clicks on the button itself it won't close(optinal)
$('.popup').click(function(event){
event.stopPropagation();
});
And for the time you can wait when the doccuemnt is loaded and set a timer to when to close the popup (in this example it's 5 seconds)
$( document ).ready(function(){
setTimeout(function(){ popup.classList.toggle("hide"); }, 5000);
});
I am trying to make a simple educational game for kids, where they will drag and drop pictures of planets and need to put them in the correct boxes in the correct order.
What I'm trying to figure out is the JS needed to let check the element being dropped on a box is the one that will match that box. The code I have so far allows me to drag and drop but has no check. Here is what I have:
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
}
</script>
<section id="planetbox">
<img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>
<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>
Any help would be really great. P.S. needs to use HTML 5, CSS and JS only no libraries :)
I managed to solve my issue using the code below on the function drop(ev):
function drop(ev){
ev.preventDefault();
var image= ev.dataTransfer.getData("content");
if ( image == ev.target.id) {
ev.target.appendChild(document.getElementById(image));
}
else {
}
}
I have a HTML5 drag and drop function. You can drag an item from div1 to div2.
What I want to do is for every item dropped into div2, automatically give it a list number.
At the minute the JS code for adding the text to div2 looks like this:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild( document.getElementById(data));
}
Above drops the element into div2. Below describes the drag function.
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
The html looks like this:
<div id="div1" ondrop="drop(event)">
<div id="title" draggable="true" ondragstart="drag(event)" style="font-family:Metacopy">Text to be Dragged</div>
</div>
<div id="div2" ondrop="drop(event)"></div>
I'd be grateful for any help. Sorry if the answer is glaringly obvious, I'm kind of new to this.
I am using an HTML5 progress bar in my app. I would like to know if there is any way to control the animation speed of the progress bar. I want to show the progress after a certain interval, which I did using the setTimeout method of javascript so that it sets the value after the screen has been rendered. But the animation is too fast. Is there any way to control it?
Thanks.
I'm not sure I understand what you mean by "animation" but here is an example of using the progress bar while controlling the speed of progression: http://jsfiddle.net/526hM/
Html:
<progress max="200" value="1"></progress>
<div id="val"></div>
Script:
$(document).ready(function(){
var interval = 2, //How much to increase the progressbar per frame
updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
progress = $('progress'),
animator = function(){
progress.val(progress.val()+interval);
$('#val').text(progress.val());
if ( progress.val()+interval < progress.attr('max')){
setTimeout(animator, updatesPerSecond);
} else {
$('#val').text('Done');
progress.val(progress.attr('max'));
}
}
setTimeout(animator, updatesPerSecond);
});
Here is example.
JavaScript function:
window.onload = addTenPercent();
function addTenPercent() {
var bar = document.getElementById("progressBar");
setInterval(addTenPercent, 100);
bar.value += 5;
};
HTML:
<progress id="progressBar" max="100" value="0"></progress>
Mantas' answer above looks good and works (without having to use jQuery), but I wonder if we could also use the setTimeout function? Would setTimeout in a recursive function that exits after 100 iterations also work? Copying Mantas' code from above and changing it a little:
JavaScript:
function onWindowLoad(){ // to be called by onload event
var bar = document.getElementById("progressBar");
addOne();
}
function addOne() {
if (bar.value < 100) { // this is the max value of the bar and the # of iterations
setTimeout(addOne, 80); // this literal value controls the speed
bar.value += 1;
}else{
return;
}
}
HTML:
<progress id="progressBar" max="100" value="0"></progress>
I'd like to display continuously updating coordinates when the mouse is over a canvas.
The below Firefox-tested code should produce this, but onmouseover is only called when the mouse enters the canvas. When over it, nothing happens and the coordinates are not updated.
<HTML>
<BODY>
<Canvas width="200" height="200" onmouseover="myMouse(event)">No support</Canvas>
<P id="text"/>
<Script>
function myMouse(event) {
document.getElementById("text").innerHTML = "Position = " + event.clientX + ", " + event.clientY;
}
</Script>
</BODY>
</HTML>
What can I do to have onmouseover be continuous, and not only update when the mouse enters the canvas?
On the web, the closest subject I've found was this, but they did not answer the question on making this work ... I must be missing something.
Instead of onmouseover try onmousemove.
The onmouseover event fires when the mouse moves over an element once. The onmousemove event fires whenever the mouse is being moved.
jsFiddle example.
https://developer.mozilla.org/en/DOM/element.onmousemove