adding counter to my page in pure javascript by the following code:
window.onload = function () {
var subs = 663965;
setInterval(function() {
var ftr = getElementById('subscribers');
subs++;
ftr.innerHTML(subs);
}, 3000);
}
<footer id = "subscribers">663965</footer>
You forgot the document in document.getElementById('subscribers'); and also setting the text content of ftr using ftr.textContent = subs;
<html>
<head></head>
<body>
<script>
window.onload = function () {
var subs = 663965;
setInterval(function() {
var ftr = document.getElementById('subscribers');
subs++;
ftr.textContent = subs;
}, 3000);
}
</script>
<footer id="subscribers">663965</footer>
</body>
</html>
Related
I'm new to JavaScript and I want to create a button that, when clicked, will change the position of the object. But after clicking once, nothing else works. Below I have provided the code with the very essence of the problem, and my code where I want to apply it. Maybe someone will tell you how to make a restart button correctly, instead of constantly creating new divs.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
button {
position: relative;
}
</style>
</head>
<body>
<button>Add new position</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
btn.style.top = '50px';
});
</script>
</body>
</html>
MY PROJECT
const yes = document.getElementById('yes');
const no = document.getElementById('no');
const body = document.querySelector('.body');
const message = document.querySelector('.message');
const reset = document.querySelector('.panel__close')
const bodyMessage = document.querySelector('.body__message')
const randomNum = Math.floor(Math.random() *100) +1;
yes.addEventListener('click', () => {
body.innerHTML = '';
const paraLox = document.createElement('p');
paraLox.textContent = 'Congratulation, Jaba Loshara Ebaniy!';
paraLox.style.fontSize = '3rem';
paraLox.style.textAlign = 'center';
paraLox.style.fontWeight = '1000';
paraLox.style.color = 'red';
body.appendChild(paraLox);
reset.addEventListener('click', () => { // reset button
paraLox.parentNode.removeChild(paraLox);
const bodyError = document.createElement('div');
bodyError.setAttribute('class', 'body__error-image');
bodyMessage.appendChild(bodyError);
const bodyErrorImage = document.createElement('img');
bodyErrorImage.setAttribute('src', 'error.png')
bodyErrorImage.style.width = '50px';
bodyErrorImage.style.height = '50px';
bodyError.appendChild(bodyErrorImage);
const bodyText = document.createElement('div');
bodyText.setAttribute('class', 'body__text');
bodyText.textContent = 'Jaba Lox?';
bodyMessage.appendChild(bodyText);
const bodyButtons = document.createElement('div');
bodyButtons.setAttribute('class', 'body__buttons');
bodyMessage.appendChild(bodyButtons);
const bodyButton1 = document.createElement('div');
bodyButton1.setAttribute('class', 'body__button');
bodyButton1.setAttribute('id', 'yes');
bodyButton1.textContent = 'Yes';
bodyButtons.appendChild(bodyButton1);
const bodyButton = document.createElement('div');
bodyButton.setAttribute('class', 'body__button');
bodyButton.setAttribute('id', 'no');
bodyButton.textContent ='No';
bodyButtons.appendChild(bodyButton);
});
});
no.addEventListener('click', () => {
no.style.position = 'relative';
no.style.top = randomNum + 'px';
no.style.bottom = randomNum + 'px';
no.style.left = randomNum + 'px';
no.style.right = randomNum + 'px';
});
From what I understand, you want the button to keep moving down with each click. In that case, the callback currently keeps setting the distance from the top to 50px. All you need to do is have the function add 50 to the current value.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
button {
position: relative;
}
</style>
</head>
<body>
<button>Add new position</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
btn.style.top = ((parseInt(btn.style.top,10) || 0) + 50) + 'px';
});
</script>
</body>
</html>
Test it here
Things to note:
The value is saved as a string with a pixel suffix, i.e. "50px", so we'll use parseInt() to convert it to an int we can add to.
Before setting the style, AKA before the first click, its value is "" not 0, which doesn't work with parseInt(), hence the OR || operator.
How can I efficiently write a JavaScript while loop code to automatically play a one hour video while playing for three seconds and pausing for six seconds to allow me time to transcribe? This is what I have tried but I have not succeeded.
<!DOCTYPE html>
<html>
<head>
<title> Video transcription</title>
</head>
<body>
</body>
<video id = 'myVideo' >
<source src = 'testVideo.mp4'>
</video>
<script>
var pauseTime = 6000 // six seconds
var initialTime = 0
var timeUpdate = 3
var timeIncrement = initialTime + timeUpdate
var wasPausedBefore1 = 0;
var wasPausedBefore2 = 0;
var wasPausedBefore3 = 0;
while (video.duration > 0) {
var video = document.getElementById('myVideo');
video.play();
video.ontimeupdate = function() {
let currentTime =video.currentTime;
if (currentTime > initialTime && currentTime < timeIncrement && wasPausedBefore1 == 0) {
video.pause();
wasPausedBefore1 = 1;
setTimeout(function() {
video.play();
}, pauseTime);
} else if(currentTime > initialTime && currentTime < timeIncrement && wasPausedBefore2 == 0){
video.pause();
wasPausedBefore2 = 1;
setTimeout(function() {
video.play();
}, pauseTime);
}
initialTime += timeUpdate
timeIncrement += timeUpdate
}
}
</script>
</body>
</html>
I did the following to create a control logic of your application:
Created a Petri Net diagram of the control logic. I used Notepad to create the diagram as PDF form XObject.
Created an interactive prototype of the control logic as a PDF form application.
Created the control logic of the application based on the prototype. I used the setTimeout API instead of a loop structure.
For me this is an effective way to create the control logic of many applications because creating the interactive prototype based on a Petri Net diagram is a systematic activity.
The interactive prototype plus details on its construction and additional sample source codes are available in a dynamic and interactive PDF at https://www.academia.edu/43005182/How_to_Automatically_Play-and-Pause_a_Video_A_Reply_to_a_Request_at_Stack_Overflow.
The following HTML code is an example of how to use the control logic.
<!DOCTYPE html>
<head>
<title>Play-and-Pause Example</title>
</head>
<body>
<video id = 'video0'>
<source src = '1956Pepto_512kb.mp4'>
</video>
<script>
/* Copyright 2020 John Frederick Chionglo */
var tObject;
var vTime = 64000;
var vID = document.getElementById('video0');
function PlayAndPause(parms) {
this.videoID = parms.videoID;
this.videoTime = parms.videoTime;
this.tObject = undefined;
}
PlayAndPause.objs = [];
PlayAndPause.play = function(id) {
PlayAndPause.objs[id].playSegment(id);
};
PlayAndPause.pause = function(id) {
PlayAndPause.objs[id].pauseSegment(id);
};
with (PlayAndPause) {
prototype.window = this;
prototype.playTime = 3000;
prototype.pauseTime = 6000;
prototype.playSegment = function(id) {
this.videoID.play();
this.videoTime -= this.playTime;
this.tObject = setTimeout("PlayAndPause.pause("+ id + ")", this.playTime);
};
prototype.pauseSegment = function(id) {
if (this.videoTime<0) {}
else {
this.videoID.pause();
this.tObject = setTimeout("PlayAndPause.play(" + id + ")", this.pauseTime);
}
};
}
var ppobj = new PlayAndPause({videoID: vID, videoTime: vTime});
PlayAndPause.objs[0] = ppobj;
ppobj.playSegment(0);
</script>
</body>
</html>
I am attempting to replicate the loading page at http://www.alessioatzeni.com/ but the percentage loaded text on my page will not display until the loading line animation completes. You can see my project page at https://jaredblumer.github.io/atzeniStudy/
If you inspect the HTML using Chrome Developer Tools, you'll see that the #loader-percentage span text is dynamically updating, but for a reason unbeknownst to me the text is not displaying until after the line animation ends.
The code I am currently using for this is as follows:
HTML
<div id="loader" class="loader">
<span id="loader-line" class="loader-line">
<span id="loader-percentage" class="loader-percentage"></span>
</span>
</div>
Javascript (loader.js)
$(document).ready(function() {
//Loading Page
var pageLoader = function() {
var $elements = $('body').find('img[src]');
$('body [style]').each(function(){
var src = $(this).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
if(src) {
$elements = $elements.add($('<img src="' + src + '"/>'));
}
});
var $loading = $('#loader');
var $loadPercentageLine = $('#loader-line');
var $loadPercentageText = $('#loader-percentage');
var elementsLoaded = 0;
var speed = 5000;
var animatePercentage = function(e) {
console.log(e);
$loadPercentageText.text(parseInt(e));
};
var loading = function() {
var percentage = 0;
if ($elements.length) {
percentage = parseInt((elementsLoaded / $elements.length) * 100);
}
$loadPercentageLine.stop().animate({
height:percentage + '%'
}, speed);
$loadPercentageText.stop().animate({
percentage:percentage
}, {
duration: speed,
step: animatePercentage
});
};
if($elements.length) {
loading();
$elements.each(function() {
elementsLoaded++;
loading();
});
}
};
pageLoader();
});
here is solution:
.loader-line{
overflow: visible !important;
}
Hi there I am trying to have a video autoplay and mute. But on mobile devices it doesn't show due to flash.
here is my code.
<div id="vimeo"> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function vimeo_player_loaded() {
moogaloop3 = document.getElementById('vimeo');
moogaloop3.api_setVolume(0);
}
var flashvars = {
'clip_id': '138036294', // <--vimeo video ID
'server': 'vimeo.com',
'show_title': 0,
'show_byline': 0,
'show_portrait': 0,
'fullscreen': 0,
'autoplay': 1,
'js_api': 1,
'js_onload': 'vimeo_player_loaded'
}
var parObj = {
'swliveconnect':true,
'fullscreen': 1,
'allowscriptaccess': 'always',
'allowfullscreen':true
};
var attObj = {}
attObj.id="vimeo";
swfobject.embedSWF("http://www.vimeo.com/moogaloop.swf", "vimeo", "343", "193", "9.0.28", '',flashvars,parObj, attObj );
</script>
How would I go about making it default to html5?
Found another way of doing it using
<div id="vimeo"> <div>
<script>
// URL of the video
var videoUrl = 'http://www.vimeo.com/76979871';
var endpoint = 'http://www.vimeo.com/api/oembed.json';
var callback = 'embedVideo';
var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
function embedVideo(video) {
document.getElementById('vimeo').innerHTML = unescape(video.html);
}
function init() {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(js);
}
window.onload = init;
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="practise.css"/>
<script type="text/javascript" src="practise.js"></script>
</head>
<body>
<div id="items"><p id="help">Hello World</p></div>
<script>
var para=document.getElementById('help');
var check=true;
//want to return these styles whenever mouse is clicked
function toggle(){
if(check){
para.style.color="#EEFFCC";
para.style.textAlign="center";
para.style.fontSize="1em";
}else{
para.style.color="#223311";
para.style.textAlign="center";
para.style.fontSize="4em";
}
check=!check;
}
para.onclick=toggle();
</script>
</body>
</html>
The code i want to make is that it toggles between two sets of Styles whenever mouse is licked on 'para' element. But i couldn't figure out how to return the styles to the 'para.onclick' call below the function.
Currently you are doing:
para.onclick = toggle();
which means that para.onclick will be the result of executing toggle().
What you want to do is assign toggle to para.onclick:
para.onclick = toggle;
The difference is this:
function result() {
return 2;
}
var res = result();
// res = 2
var fnRes = result;
// fnRes = function() { return 2; }
Just create a little function when you click the onClick it calls your toggle, like so para.onclick = function() {}.
var para = document.getElementById('help');
var check = true;
function toggle() {
if (check) {
para.style.color = "blue";
para.style.textAlign = "center";
para.style.fontSize = "1em";
} else {
para.style.color = "red";
para.style.textAlign = "center";
para.style.fontSize = "4em";
}
check = !check;
}
para.onclick = function() {
toggle()
};
<div id="items">
<p id="help">Hello World</p>
</div>