I have a list of divs, i want that every clicked div will:
play sound &
Change it's color for 3 secs.
My code
Sounds:
<?php
$x = 1;
while($x <= 24) {
echo "<audio id='$x' src='samples/s$x.wav'></audio>";
$x++;
}
?>
Divs:
<?php
$x = 1;
echo "<tr>";
while($x <= 24) {
echo "<div id='lupad' onclick='style.backgroundColor = "#FF0000"; setTimeout(function(){style.backgroundColor = '#000000';}, 320); document.getElementById('$x').play()'>$x</div>";
$x++;
}
?>
The function works with html but not with php.
Thanks
You have an error with your syntax.
Your double quotes have double quotes inside.
You can add a backslash before the double quotes of the background color in order to make it work.
<?php
$x = 1;
echo "<tr>";
while($x <= 24) {
echo "<div id='lupad' onclick='style.backgroundColor = \"#FF0000\"; setTimeout(function(){style.backgroundColor = \"#000000\";}, 320); document.getElementById(\"$x\").play()'>$x</div>";
$x++;
}
?>
בהצלחה
Here is the script function show that call so your problem is solved.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
function show(x){
//alert(x);
var colors = ['red','blue','green'];
//alert(colors[Math.floor(Math.random() * colors.length)]);
$('#lupad_'+x).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
setTimeout(function(){
$('#lupad_'+x).css('background-color','blue');
}, 320);
document.getElementById(x).play();
}
</script>
</head>
<body>
<?php
$x = 1;
while($x <= 24) {
echo "<audio id='$x' src='samples/s$x.wav'></audio><br/>";
$x++;
}
?>
<?php
$x = 1;
while($x <= 24) {
echo "<div id='lupad_".$x."' onclick='show(\"".$x."\")'>".$x."
</div>";
$x++;
}
?>
</body>
</html>
please check this code
<?php
$x = 1;
while($x <= 24) {
echo "<div id='lupad' onclick='style.backgroundColor =
".'"'."#FF0000".'"'.";setTimeout(function(){style.backgroundColor =
".'"'."#000000".'"'.";}, 320);
document.getElementById(".$x.").play()'>".$x."
</div>";
$x++;
}
?>
Related
I would like to add a running time/ stopwatch for every row showing the time spent in each process. The timer just shows at the first row and nothing on the rest.
The date to be used would come from a database.
Here's a snippet of my code for reference:
<?php
echo "<h2>On-Going Repairs</h2>";
$query = "SELECT tca_ro, tca_csplate, tca_name, tca_start, tca_process FROM tcs.tca_bp_process WHERE date(tca_start) = curdate() AND tca_status = 'Started'";
if($query_result = mysqli_query($link,$query)){
if(mysqli_num_rows($query_result) > 0)
{
echo "<div class='card-body'>";
echo "<div class='table-responsive'>";
echo "<table class='table table-bordered' id='dataTable' width='100%' cellspacing='0'>";
echo "<thead>";
echo "<tr>";
echo "<th>RO NUMBER</th>";
echo "<th>CS NUMBER</th>";
echo "<th>TECHNICIAN</th>";
echo "<th>START</th>";
echo "<th>PROCESS</th>";
echo "<th>DURATION</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = mysqli_fetch_array($query_result))
{
echo "<tr>";
echo "<td>".$row['tca_ro']."</td>";
echo "<td>".$row['tca_csplate']."</td>";
echo "<td>".$row['tca_name']."</td>";
echo "<td><input type='text' id='date' value='".$row['tca_start']."'</td>";
echo "<td>".$row['tca_process']."</td>";
echo"<td><div id='data'></div></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";
echo "</div>";
}
}
?
<script type="text/javascript">
function func(){
var dateValue = document.getElementById("date").value;
var date = Math.abs(new Date(dateValue).getTime() / 1000).toFixed(0);
var currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
var diff = currentDate - date;
var hours = Math.floor(diff/3600) % 24;
var minutes = Math.floor(diff/60) % 60;
var seconds = diff % 60;
var time_str = hours + " : " + minutes +" : "+ seconds
document.getElementById("data").innerHTML =hours+":"+minutes+":"+seconds;
}
func();
setInterval(func, 1000);
</script>
Hope you can help me out. Thank you in advance
You have no need for Timer as they are in the Java programming language. All you need to do is display the values from a database.
Assuming you have start and end times in tca_start and tca_end, and duration in tca_duration just add lines as
echo "<td>".$row['tca_start']."</td>";
echo "<td>".$row['tca_end']."</td>";
echo "<td>".$row['tca_duration']."</td>";
If that is not what you are looking for, maybe enhance you question.
I am trying to figure out a php counter. I have added Number format in a php function to print counter digits separated with a comma after first 3 digits. But Comma doesn't show up permanently after page load, When I reload the page, Comma shows for a moment but immediately hides. Below is the code i have used to get this result and please review the counter page.
<?php
$bg = get_field('counter_bg');
$init_value = get_field('init_value');
$init_date = get_field('init_date');
$seconds = strtotime("now") - strtotime($init_date);
$countup_value = get_field('countup_value');
$number = round((($seconds * $countup_value) + $init_value) * 100) / 100;
if($number) :
$title = get_field('counter_title');
$text = get_field('counter_text');
?>
<section class="home-section" id="home-counter" <?php if($bg['url']) echo "style='background-image: url({$bg['sizes']['slide-thumb']})'"; ?>>
<div class="container">
<?php
if($title) echo "<h3 class='counter-title'>{$title}</h3>";
echo "<div id='counter-number'>";
echo Number_format ($number);
echo "</div>";
if($text) echo "<div class='counter-text'>{$text}</div>";
?>
</div><!--containr-->
</section><!--home-section-->
<script>
(function($) {
$(document).ready(function(){
var counter = $('#counter-number');
var coutUp = Number(<?= $countup_value ?>);
setInterval(function() {
counter.text(calculate_value);
}, 1000)
function calculate_value() {
var initDate = moment('<?= $init_date ?>').format('x');
var nowDate = moment().format('x');
var dif = Number((nowDate - initDate) / 1000);
var value = Number(dif * coutUp);
// console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
return value.toFixed(2)
}
});
})(jQuery);
</script>
<?php endif; ?>
Please check the current Comman display issue at: http://airlite.designase.com/it/
According to the php number_format, you want to group the number by thousands. You can to that by changing the return of the calculate_value function like this:
return value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
The regex will add a comma every 3 digits, like this:
(function($) {
$(document).ready(function(){
var counter = $('#counter-number');
var coutUp = Number(1);
setInterval(function() {
counter.text(calculate_value);
}, 1000)
function calculate_value() {
var initDate = moment(20111031).format('x');
var nowDate = moment().format('x');
var dif = Number((nowDate - initDate) / 1000);
var value = Number(dif * coutUp);
// console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
return value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="counter-number"></span>
Now it should keep the comma. You can set the number of decimals by changing the (2) parameter in toFixed() function in the end of the JS function.
<?php
$bg = get_field('counter_bg');
$init_value = get_field('init_value');
$init_date = get_field('init_date');
$seconds = strtotime("now") - strtotime($init_date);
$countup_value = get_field('countup_value');
$number = round((($seconds * $countup_value) + $init_value) * 100) / 100;
if($number) :
$title = get_field('counter_title');
$text = get_field('counter_text');
?>
<section class="home-section" id="home-counter" <?php if($bg['url']) echo "style='background-image: url({$bg['sizes']['slide-thumb']})'"; ?>>
<div class="container">
<?php
if($title) echo "<h3 class='counter-title'>{$title}</h3>";
echo "<div id='counter-number'>";
echo Number_format ($number);
echo "</div>";
if($text) echo "<div class='counter-text'>{$text}</div>";
?>
</div><!--containr-->
</section><!--home-section-->
<script>
(function($) {
$(document).ready(function(){
var counter = $('#counter-number');
var coutUp = Number(<?= $countup_value ?>);
setInterval(function() {
counter.text(calculate_value);
}, 1000)
function calculate_value() {
var initDate = moment('<?= $init_date ?>').format('x');
var nowDate = moment().format('x');
var dif = Number((nowDate - initDate) / 1000);
var value = Number(dif * coutUp);
// console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
return value.toFixed(2).replace(".", ",")
}
});
})(jQuery);
</script>
<?php endif; ?>
I made a line chart with chart.js. For the values is some PHP script added. The axis only displayed the timestamp numbers. When I use a PHP function for timestamp conversion:
<?php echo date('H:i', $time); ?>
It totally crashes.
This is my code for the PHP time echo. How can I display HH:ii on my X axis of the chart?
<?php
$total = (count($data)) - 1;
if ($total > 100) {
$start = $total - 100;
$end = $total;
}
else {
$start = 0;
$end = $total;
}
for ($x = $start; $x < $end; $x++) {
if ($x % 5 == 0) {
//echo $x; //5th element
$row = $data[$x];
$time = intval($row->{'time'});
echo $time;
} else{
echo ' '; //prints empty for other than 5th element
}
echo ', '; //prints ',' for every element
Fixed it with:
echo '\'' . date('H:i', $time) . '\'';
I have an array that is printed in a javascript graph. Now is taken the first measurement until the last measurement. I wan't to display the first 100 measurements and if the measurements get over 100 (lets say 130) to display measurement 30 until 130, etc. How can I fix this in my code?
<?php
for ($x = 0; $x < (count($data) - 1); $x++) {
if($x % 5 == 0){
//echo $x; //5th element
$row = $data[$x];
$time = intval($row->{'time'});
echo $x;
} else{
echo ' '; //prints empty for other than 5th element
}
echo ', '; //prints ',' for every element
}
?>
change the start of your code to:
$total=count($data);
if($total>100){
$start= $total-100;
}else{
$start=0;
}
for ($x = $start; $x <= $total; $x++) {
The code below generates and loops a randomized number of iterations of some .ogg files. They play as soon as the page loads.
The commented-out bits are my attempt to add a 'start' button. What am I doing wrong here, and how can I start this with a button rather than on page load?
(Also: I am suspecting that it is bad practice to combine php and javascript as I have done. I did it because randomization in php is so easy, and I am still new to js/jquery.)
(EDIT: see the edit below. I just forgot to close the tag.)
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php
$randC = rand(2,4);
$C = $randC * 4;
$G = $C / 2;
echo "
<script type=\"text/javascript\">
$(document).ready(function()
{
// $(\"#start\").click(function()
// {
var time = 0;
var riff_time = 2920;
var base = 'riff';
for(i = 0; i < $C; i++)
{
var id = base + ((i + 1) );
window.setTimeout (\"document.getElementById('\" + id + \"').play()\", time);
time += riff_time;
}
var timeG = 0;
var riff_time = 2920;
var baseG = 'riffG';
for(iG = 0; iG < $G; iG++)
{
var idG = baseG + ((iG + 1) );
window.setTimeout (\"document.getElementById('\" + idG + \"').play()\", timeG);
timeG += riff_time;
// }
} // EDIT: This should be }); ... that fixes it.
});
</script>
"?>
<style type="text/css">
</style>
</head>
<body style="background-color: #999;">
<!--<button id="start">Start</button>
<br> -->
<?php
echo "C:<br>";
for ($i=1; $i<= $C; $i++) {
echo '<audio controls id="riff'.$i.'">
<source src="loopC.ogg" type="audio/ogg">
</audio>';
}
echo "<br>G:<br>";
for ($i=1; $i<= $G; $i++) {
echo '<audio controls id="riffG'.$i.'">
<source src="loopG.ogg" type="audio/ogg">
</audio>';
}
?>
</body>
</html>
You can give a class start as well as and data-id to the start buttons.
So your html for start button would be like,
<img src="start-button.jpg" class="start" data-id="riff1">
//So this is start button for audio elementwith id riff1.
How will this work?
$('.start').click(function(){
$("#"+$(this).data('id')).play(); //This should do.
}
And yes in your php file should be type of this,
<!DOCTYPE html>
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php
$randC = rand(2,4);
$C = $randC * 4;
$G = $C / 2;
<script type="text/javascript">
$(document).ready(function()
{
// $("#start").click(function()
// {
var time = 0;
var riff_time = 2920;
var base = 'riff';
<?php for(i = 0; i < $C; i++)
{
echo " var id = base + ((i + 1) );
window.setTimeout (\"document.getElementById('\" + id + \"').play()\", time);
time += riff_time; ";
}
?>
var timeG = 0;
var riff_time = 2920;
var baseG = 'riffG';
<?php for(iG = 0; iG < $G; iG++)
{
echo " var idG = baseG + ((iG + 1) );
window.setTimeout (\"document.getElementById('\" + idG + \"').play()\", timeG);
timeG += riff_time; ";
// } ?>
}
});
</script>
<style type="text/css">
</style>
</head>
<body style="background-color: #999;">
<!--<button id="start">Start</button>
<br> -->
<?php
echo "C:<br>";
for ($i=1; $i<= $C; $i++) {
echo '<audio controls id="riff'.$i.'">
<source src="loopC.ogg" type="audio/ogg">
</audio>';
}
echo "<br>G:<br>";
for ($i=1; $i<= $G; $i++) {
echo '<audio controls id="riffG'.$i.'">
<source src="loopG.ogg" type="audio/ogg">
</audio>';
}
?>
</body>
</html>