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>
Related
I have read the other similar questions, but not found the answer, so here it is:
<?php
function load($page) {
echo "page: ".$page;
}
echo "
<script type='text/javascript'>
var page = 0;
window.addEventListener(...., function(){
var x = .....
......
if(x = ....)
{
page = page + 1;
var runQuery = '<?php load(page); ?>'
}
})
</script>
";
?>
The problem is that <?php load(page); ?> is not executed. If I write load(page); outside the echo, it works. Can anyone help me ?
Change the function to return:
function load($page) {
return "page: ".$page;
}
You're executing PHP with the echo so just use the return of load():
echo "
<script type='text/javascript'>
var page = 0;
window.addEventListener(...., function(){
var x = .....
......
if(x = ....)
{
page = page + 1;
var runQuery = '" . load($page) . "'
}
})
</script>
";
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 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++;
}
?>
I'm new to JS.
I want to write a for-loop in JS that gives out a chosen number of forms.
This is what I got so far. (Maybe I have to write a function. But I have no clue how to continue.)
<!DOCTYPE html>
<html lang="de">
<head>
<title>Survey</title>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<h1><?php echo "Title: ".$_POST["title"];
?></h1>
<script>
var Ausgabe = "";
for (var i = 1; i <= <?php echo $_POST["anzahl"];?>; i++){
Ausgabe = i + ". question: " + <form>
<input type="text" id="title" name="title">
</form>
document.write(Ausgabe)
}
</script>
</body>
</html>
Any tips are welcome.
You could do this with JavaScript:
var Ausgabe = "";
for (var i = 1; i <= <?php echo $_POST["anzahl"];?>; i++){
Ausgabe = i + ". question: " + "<form><input type=\"text\" id=\"title\" name=\"title\"></form>"
document.write(Ausgabe)
}
Adding quotes around the "html" string and escaping the quotes inside it (like type=\"text\").
Anyway I think should be better do the loop directly via PHP, something like:
<?php
for ($i = 1; $i <= anzahl; $i++) {
echo "<form><input type=\"text\" id=\"title\" name=\"title\"></form>";
}
I hope it helps, bye.
I do not know what your goals are, but I think you are trying to do something like this:
var input = prompt('Enter a number (<= 10):'),
html = '';
if (Number(input) <= 10) {
for (var i = 0; i < Number(input); i++) {
html += '<form>';
html += ' <input type="text" placeholder="' + i + '">';
html += '</form>';
}
} else {
console.log('The number is too high!');
}
document.body.innerHTML = html;
I was just wondering is there any option to create a Javascript that pauses a video that is currently playing when You click play on another video.
I've got about 30-40 HTML5 video tags on one page.
Code that I'm using to put videos on page:
function pobierz_klipy($typ) {
$result = mysql_query("SELECT * FROM Klipy WHERE typ = $typ ORDER BY id")
or die("Zapytanie niepoprawne");
//ilosc zwroconych wierszy
$num_rows = mysql_num_rows($result);
$i = 0;
while ($i < $num_rows) {
$id = mysql_result($result, $i, "id");
$nazwa = mysql_result($result, $i, "nazwa");
$nazwa_rob = mysql_result($result, $i, "nazwa_rob");
$typ = mysql_result($result, $i, "typ");
$sprawdzian_hq = $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
if (file_exists($sprawdzian_hq)) {
$sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
} else {
$sciezka = "../video/data/video/" . $nazwa_rob . ".mp4";
}
if (file_exists($sprawdzian_hq)) {
$poster = "../video/data/thumbnails/" . $nazwa_rob . "_fb.mp4.jpg";
} else {
$poster = "../video/data/thumbnails/" . $nazwa_rob . ".mp4.jpg";
}
if (file_exists($sprawdzian_hq)) {
$hq = "../video/data/video/" . $nazwa_rob . ".mp4";
} else {
$hq = null;
}
$i = $i + 1;
echo "<div class=\"klip\">";
echo '<video id="' . $nazwa_rob . '" width="320" height="180" controls poster= "' . $poster . '" preload ="none">';
echo ' <source id="source_' . $nazwa_rob . '" src="' . $sciezka . '" type="video/mp4">';
echo 'Twoja przeglądarka nie obsługuje HTML5.';
echo '</video>';
echo '<br />';
if ($hq != null) {
echo '<button id="videolink' . $i . '" type="button" class="btn btn-danger active" style=" font-size: 10px; padding: 5px; position: absolute; bottom: 2px; left: 11px;">HQ</button>';
}
echo '<div class="nazwa">'.$nazwa.'</div>';
//skrypt zmiany jakosci JS
if (file_exists($sprawdzian_hq)) {
echo '
<script type = "text/javascript">
var videobutton = document.getElementById("videolink' . $i . '");
videobutton.addEventListener("click", function (event) {
';
echo "
var videocontainer$i = document.getElementById('$nazwa_rob');
var videosource$i = document.getElementById('source_$nazwa_rob');
var newmp4$i = '$hq';
var old_mp4$i = '$sciezka';
var aktywne$i = 'btn btn-success active';
var nieaktywne$i = 'btn btn-danger active';
var przycikstatus$i = document.getElementById('videolink$i');
var obecny_klip$i = videosource$i.getAttribute('src');
var czas_klipu$i = videocontainer$i.currentTime;
console.log(czas_klipu$i);
if (obecny_klip$i != newmp4$i) {
var videosource$i = document.getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src', newmp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', aktywne$i);
videocontainer$i.play();
} else {
var videosource$i = document . getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src',old_mp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', nieaktywne$i);
videocontainer$i.play();
}
}, false);
</script>
";
}
you can also use this javascript code.
//external.js
video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currenIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName(className);
return [].indexOf.call(nodes, id);
}
<html>
<head>
</head>
<body>
<video class="video" src="video1.mp4" controls></video>
<video class="video" src="video2.mp4" controls></video>
<video class="video" src="video3.mp4" controls></video>
<video class="video" src="video4.mp4" controls></video>
<script src="external.js"></script>
</body>
</html>
Now i've got another issue with this code :
<script> video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currentIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName("video");
return [].indexOf.call(nodes, id);
}
</script>
I've got about 30 video tags on one page. When i try to play 6 videos one after another, the playback of 7th video doesn't run.
Excuse, i have not been notified. I used them same code to play one after another 30 videos without a problem. try to see if you have not limited the i value to 7 or something like that.
you may have only 7 tags that have 'video' class. if all's right, try to replace. document.getElementsByClassName by document.getElementsByTagName and try again. sorry not to have responded at time.