Change in the JavaScript code timer - javascript

I have used the timer in the project. Do not have much familiarity with JavaScript.
I want to add one minute to timer when an event Happened. (without Refresh the page).
JavaScript code:
<div class="auto-due">
<div id="auction">
<div style="float: left;width: auto;" class="soon" id="soon-glow"
data-layout="group overlap"
data-face="slot doctor glow"
data-padding="false"
data-scale-max="l"
data-visual="ring color-light width-thin glow-progress length-70 gap-0 offset-65">
</div>
<div id="auction-info">
<span>Time reminding to end</span> <div class="livicon" data-s="48" data-c="#fff" data-hc="0" data-n="clock"></div>
</div>
</div>
<script>
(function(){
var i=0,soons = document.querySelectorAll('.auto-due .soon'),l=soons.length;
for (;i<l;i++) {
soons[i].setAttribute('data-due','<?= $endDateCountDown ?>');
soons[i].setAttribute('data-now','<?= date("Y-m-d")."T".date("H:i:s") ?>');
}
}());
</script>
<script src="<?= $this->theme->getUrl('js/soon.min.js'); ?>" data-auto="false"></script>
<script>
if ('addEventListener' in document) {
var showDemo = function(e){
var btn = e.target;
btn.style.display = 'none';
var wrapper = e.target.parentNode;
var panel = wrapper.querySelector('.el-sample');
panel.style.display = 'block';
var nodes = e.target.parentNode.querySelectorAll('.soon');
for(var i=0;i<nodes.length;i++){
Soon.create(nodes[i]);
}
};
var buttons = document.querySelectorAll('.demo-button');
for(var i=0;i<buttons.length;i++) {
buttons[i].addEventListener('click',showDemo);
}
}
var soons = document.querySelectorAll('.auto-due .soon');
for(var i=0;i<soons.length;i++) {
Soon.create(soons[i]);
}
</script>
</div>
$endDateCountDown variable show the end time and date of timer.
date & time for this timer must have this format:
2015-11-09T23:10:09
How do I add one minute to the timer without Refresh the page?

Related

Javascript button to show on condition

I am trying to make the button visible only when there's a table shown, but it doesn't seem to be working, the button is not hiding.
PS: Sorry for not clarifying, my javascript runs onload
HTML:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc == "") {
DLButtons.style.visibility = 'hidden';
} else if (DLFunc != "") {
DLButtons.style.visibility = 'visible';
}
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>
Full HTML:
<body ng-controller="DataController">
<header ng-include="'FixedPages/header.html'"></header>
<div ng-include="'FixedPages/mapAHH.html'"></div>
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>
<footer ng-include="'FixedPages/footer.html'"></footer>
<script src="js\DownloadCSV.js"></script>
</body>
Check if there is a table shown by counting the number of table tags. Instead of checking empty string, check for the length of the array:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc.length == 0) {
DLButtons.style.visibility = 'hidden';
} else {
DLButtons.style.visibility = 'visible';
}
Also check when the code runs (maybe add an alert) as the tables may not have been created at the time your JS is running.
UPDATE:
Your JS won't pick up the table as it is run on page load, whereas AngularJS probably creates the elements later.
You can add something like the following to your DLButtons HTML:
<button class="btnCSV" *ngShow="hasTable()">CSV file</button>
Then in your Angular Component.ts/js:
hasTable() {
return document.getElementsByTagName("table").length > 0;
}
You can do the following;
// you can check directly in the condition
const DLFunc = document.getElementsByTagName("table");
const DLButtons = document.getElementById("tableToCsv");
if (DLFunc)
{
DLButtons.style.visibility = 'hidden';
}
else
{
DLButtons.style.visibility = 'visible';
}
Try this:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc.length == 0) {
DLButtons.style.visibility = 'hidden';
} else {
DLButtons.style.visibility = 'visible';
}
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>

How to assigned different url link when a particular button from groups of button is selected?

I want to create a group of buttons that when clicked will return different download link to the user email. I am trying to do it with javascript switch but I not sure how to return the download link so that the download link can be retrieved using PHP get to send in the email.
<div class="row">
<div class="col-md-3">
<div class="text-center">
<i class="fa fa-file" style="font-size:48px; color:#00ffff;"></i>
<span><h6>User Manual:Accounting</h6></span>
<button class="downloadButton" id="401" type="button" data-toggle="modal" data-target="#downloadModal" style="border-radius:5px; outline:none; background-color:Transparent;">
<i class="fa fa-download" style="font-size:24px; color:#737373;"></i>
</button>
</div>
</div>
<script>
function linkFunction(){
var buttonClass = document.getElementsByClassName["download-button"];
var buttonId = buttonId.attr('id');
var link;
Is this maybe what you're looking for? Hope it helps!
<html>
<head>
<script>
window.onload = doThis;
/* This one would work well and allow you to pass arguments */
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
buttonClass.addEventListener('click', buttonClickedCaller);
function buttonClickedCaller(){
buttonClicked(buttonLinkId);
}
function buttonClicked(foo) {
console.log('http://localhost/?' + foo);
window.location = 'http://localhost/?' + foo;
// window.open('http://localhost/?'+foo);
}
}
/*
// here's a simpler example
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
buttonClass.addEventListener('click', buttonClicked);
function buttonClicked() {
console.log('http://' + buttonLinkId);
}
}
// careful though, this won't work.
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
// Passing a Variable in Below Here
buttonClass.addEventListener('click', buttonClicked(buttonLinkId));
// Will Break Here & It's executed onload, but the above one isn't
function buttonClicked(foo) {
console.log('http://' + foo);
}
}
*/
</script>
</head>
<body>
<div class="row">
<div class="col-md-3">
<div class="text-center">
<span><h6>User Manual:Accounting</h6></span>
<button id="download_button" data-linkId="401">
Click Here
</button>
</div>
</div>
</body>
<html>

create multiple arrays on different elements

I'm trying to set a function in my application which allows the user to click on a button and then click the submit button which displays an image, but I want the buttons to hold more than one image and randomly select an image from the array.
How can I do this?
<div id='prefPage'>
<header id='header2pref'>
<div id='title2pref'>PREFERENCES</div>
</header>
<div id='body'>
<div id='leftAlign'>
<div id="foodpicloc">
</div>
</div><button id='myBtn2'>SET PREFRENCES</button>
<div id='rightAlignPref'>
<div id=fixed>
<div>
<button id="button1">BURGER</button>
<button id="button2">HOTDOG</button>
</div>
</div>
</div>
</div>
</div>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var preference = document.getElementById("preference");
var foodpic = document.getElementById("foodpiclocation");
var foodpic;
button1.addEventListener('click', function() {
foodpicurl = 'burger.svg';
});
button2.addEventListener('click', function() {
foodpicurl = 'hotdog.svg';
});
preference.addEventListener('click', function() {
var foodpic = document.createElement('img');
foodpic.src = foodpicurl;
foodpiclocation.innerHTML = '';
foodpiclocation.appendChild(foodpic);
});
Clean solution using vanilla Javascript. NOTE: I suggest you add this to your HTML code <div id="foodpicloc"><img id="foodpic"></div> in your HTML first. Changing the image's src is quicker and cleaner than appending a new image element everytime the image changes.
Define
function mapClickToImage(imageSelector, updateBtnSelector, btnSectorToImageSrcMapping) {
var currentImageSrc = null;
var imageElement = document.querySelector(imageSelector);
for (var btnSelector in btnSectorToImageSrcMapping) {
var buttonElement = document.querySelector(btnSelector);
buttonElement.addEventListener('click', function() {
currentImageSrc = btnSectorToImageSrcMapping[btnSelector];
});
var updateButtonElement = document.querySelector(updateBtnSelector);
updateButtonElement.addEventListener('click', function() {
if (currentImageSrc) {
imageElement.src = currentImageSrc;
}
});
}
Usage
mapClickToImage('#foodpic', '#preference', {
'#button1': 'burger.svg',
'#button2': 'hotdog.svg'
});

Append audio in every exercise to div using JQUERY

how are you doing?
I am trying to build a quiz app, and i can't discover how I append the audio of a specific question to the screen.
Basically, the user sees a question, three answers, and an audio.
How would I point each audio to the current exercise?
It is recognizing the first audio, but when I jump to the second question, it shows two audio players aligned and then they disappear.
The HTML file:
<div id="navContent">
<div id="game1"></div>
<div id="game2"></div>
<div id="audioContainer"></div>
<div id="audioContainer2"></div>
</div>
The JS
$(document).ready(function () {
var questionNumber=0;
var audioNumber=0;
var questionBank=new Array();
var stage="#game1";
var stage2=new Object;
var evento = "#audioContainer";
var evento2 = new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;
$.getJSON('../../core/part1.json', function(data){
numberOfQuestions = data.primeiro.length;
for(i = 0; i < numberOfQuestions; i++){
questionBank[i] = [];
questionBank[i].push(data.primeiro[i].question);
questionBank[i].push(data.primeiro[i].option1);
questionBank[i].push(data.primeiro[i].option2);
questionBank[i].push(data.primeiro[i].option3);
questionBank[i].push(data.primeiro[i].audio);
}
displayQuestion();
});
function displayQuestion(){
var q1;
var q2;
var q3;
var audioFile = questionBank[questionNumber][4];
var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
var wordsShow = $('<li class= "center_txt"><div id="1" class="word-pt bluedark_txt">'+q5+'</div><div id="2" class="bluish_txt word-EN">'+q4+'</div></li>')
var audioShow = $('<audio controls id="audioPlayer"><source src='+audioFile+' type="audio/mp3"></audio>');
if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}
$(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div>');
//here is where I try to append the audio, not working
$("#audioContainer").append(audioShow);
$('.option').click(function(){
if(questionLock==false){questionLock=true;
//correct answer
if(this.id==rnd){
// $("#feedbackBox").append('<div class="feedback1">CORRECT</div>');
score++;
}
//wrong answer
if(this.id!=rnd){
// $("#feedbackBox").append('<div class="feedback2">WRONG</div>');
}
setTimeout(function(){changeQuestion()},1000);
}})
}//display question
function changeQuestion(){
questionNumber++;
wordNumber++;
audioNumber++;
if(stage=="#game1"){stage2="#game1";stage="#game2";}
else{stage2="#game2";stage="#game1";}
if(evento=="#audioContainer"){evento2="#audioContainer";evento="#audioContainer2";}
else{evento2="#audioContainer2";evento="#audioContainer";}
if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}
$(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
$(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
$(evento2).animate({"right": "+=800px"},"slow", function() {
$(evento2).css('right','-800px');
$(evento2).empty();});
$(evento).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
}//change question
THANK YOU!

JavaScript function to hide buttons if specific text shows

I have a function called hideButtons that i want to hide buttons if certain text is present in the paragraph.
The paragraph goes through a list of names that the user either likes or dislikes and then when there are no more names then the buttons disappear.
Obviously this is sudo at the moment:
function hideButtons(){
if namespace.indexOf("Out of people"){
#likeButton = hidden;
#dislikeButton = hidden;
}
}
This is a working function
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
And the html:
<body>
<p id='namespace'> Namelist </p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
You are sort of mixing up javascript and jQuery.
In javascript, to get the value of a p tag:
var ns = document.getElementById('namespace').innerHTML;
the same thing in jQuery:
var ns = $('#namespace').text();
jQuery uses the CSS selectors to identify elements, javascript does not.
Here is a semi-working version of your code.
var lb = document.getElementById('likebutton');
lb.addEventListener('click', hideButtons, false);
var db = document.getElementById('dislikebutton');
db.addEventListener('click', hideButtons, false);
function hideButtons(){
var ns = document.getElementById('namespace').innerHTML;
alert(ns);
if (ns.indexOf("Namelist") > -1 ){
lb.style.display = 'none';
db.style.display = 'none';
}
}
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
Here is the same code in jQuery:
$('#likebutton, #dislikebutton').click(function(){
var ns = $('#namespace').text();
if ( ns.indexOf('Namelist') > -1 ){
$('#likebutton').hide();
$('#dislikebutton').hide();
}else{
alert('P tag does not contain the word namespace');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>

Categories