The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> drop down menu
CharlesEF
post Sep 9 2016, 10:18 AM
Post #21


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



When using the audio tag, there was a time when IE didn't support .wav files. You should use .mp3 files to ensure compatibility with most browsers. Audio doesn't support .onerror and .onload, and .preload is not meant to be used as you are trying. I would try something like this:
CODE
var audio = new Audio();
audio.addEventListener('canplaythrough', function()
  {
    audio.play();
  }, false);
audio.addEventListener('ended', function()
  {
    alert('ended');
  }, false);
audio.src = soundfilepath;
OR
CODE
var audio = new Audio(soundfilepath);
audio.addEventListener('canplaythrough', function()
  {
    audio.play();
  }, false);
audio.addEventListener('ended', function()
  {
    alert('ended');
  }, false);
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 9 2016, 01:46 PM
Post #22


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



BTW, you never answered my question. Why do you insist on using PHP to build so much of the page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 10 2016, 11:46 PM
Post #23


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



QUOTE(CharlesEF @ Sep 10 2016, 04:16 AM) *

BTW, you never answered my question. Why do you insist on using PHP to build so much of the page?



To be honest, I am still learning.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 11 2016, 06:52 AM
Post #24


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(tudsy @ Sep 10 2016, 11:46 PM) *

QUOTE(CharlesEF @ Sep 10 2016, 04:16 AM) *

BTW, you never answered my question. Why do you insist on using PHP to build so much of the page?



To be honest, I am still learning.

IMO you should get out of that habit, fast. It only makes your code hard to read and debug. Since you say you are learning you should drop your bad habits. Yes, thee may be a time when you need to build some of the page with PHP but 99% of the time you don't.

Did you ever see the survey page I re-wrote for you? You remember, it's the one you tried using javascript for. Check post #8 here. That's the reason you should always come back to your thread for a few days. You might not have anything to add but other people might.

This post has been edited by CharlesEF: Sep 11 2016, 06:55 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 13 2016, 11:13 AM
Post #25


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



QUOTE(CharlesEF @ Sep 11 2016, 09:22 PM) *

QUOTE(tudsy @ Sep 10 2016, 11:46 PM) *

QUOTE(CharlesEF @ Sep 10 2016, 04:16 AM) *

BTW, you never answered my question. Why do you insist on using PHP to build so much of the page?



To be honest, I am still learning.

IMO you should get out of that habit, fast. It only makes your code hard to read and debug. Since you say you are learning you should drop your bad habits. Yes, thee may be a time when you need to build some of the page with PHP but 99% of the time you don't.

Did you ever see the survey page I re-wrote for you? You remember, it's the one you tried using javascript for. Check post #8 here. That's the reason you should always come back to your thread for a few days. You might not have anything to add but other people might.



Hi

Thanks for that.

I have rewritten the code in javascript with a small section of php. The output reaches the php section but it does not execute it.
Can anyone please help?

Thanks.


Attached File(s)
Attached File  codejsandphp.txt ( 8.01k ) Number of downloads: 797
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 13 2016, 11:57 AM
Post #26


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Does the page have a .php extension? Have you looked in the PHP error log? The only problem I can see is a problem we have already gone over. This line of code is wrong:
CODE
$options  = "<option value=".$files1.">".$files1."</option>";
The value attribute will not have the required quotes. It should be:
CODE
$options  = "<option value='".$files1."'>".$files1."</option>";
I would write it like this:
CODE
echo "<option value='{$files1}'>{$files1}</option>";
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 16 2016, 12:03 AM
Post #27


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

Thanks for that.

I m trying to let the user play the sound on the webpage. I used the 'click' word in your code but it did not work.
Can you please help?

ThanksAttached File  codesound.txt ( 7.85k ) Number of downloads: 979
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 16 2016, 08:50 AM
Post #28


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm not sure where you came up with 'click'. I never used it in any sample audio code. The audio event should be 'canplaythrough'.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 19 2016, 12:33 PM
Post #29


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

I am still having problems with the 'sound' code you wrote. It does not work. Can you please help?

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 19 2016, 04:56 PM
Post #30


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I've never used javascript's Audio command but from what I understand you will never get instant sound. When you use the 'new Audio(pathtosoundfile)' the sound file will start to download. After it reaches a certain point the event 'canplaythrough' will fire. The event listener will catch that event and issues the 'play' command. Remember, only 3 audio formats are supported, .mp3, .wav and .ogg.

Maybe you should look into HTML5 <audio> tag. You could use javascript to load, play, pause, etc...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 19 2016, 09:40 PM
Post #31


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

Thanks for that.

After some manipulation, I am trying to return the selectedgraphicfilename (graphic that people buy) to pass through the query string when the user presses buy.

But I am not getting anything from the functions changePic and for that matter, linkSound.

Also, the variable Priceofart is nothing in the query string.


Can anyone help?

Here is the code:


<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-908952-3', 'auto');
ga('send', 'pageview');
ga('require','linkid');
</script>






<script>



var personsnamejs ='AdrianTudini';

var personpicture = personsnamejs + '.jpg';

var Priceofart = 2;

function setVar(){

var personpath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personsnamejs + '/' + personpicture;

document.getElementById('Price').innerHTML= 'Price of Art ( without a watermark )(USD): $' + Priceofart;

var x = document.getElementById('Title');
x.style.color = '#00FF00';
x.style.fontSize ='36px';

document.getElementById('PersonImage').src = personpath;

var y = document.getElementById('Price');
y.style.color = '#00FF00';
y.style.fontSize ='36px';

var z = document.getElementById('PlaySound');
z.style.color = '#00FF00';
z.style.fontSize ='24px';

var t = document.getElementById('paypal');
t.style.color = '#00FF00';
t.style.fontSize ='24px';

var u = document.getElementById('freename');
u.style.color = '#00FF00';
u.style.fontSize ='20px';

var v = document.getElementById('freeaddress');
v.style.color = '#00FF00';
v.style.fontSize ='20px';


document.getElementById('def').innerHTML = 'Click-Tap dropdown menu to view/select ' + personsnamejs + ' 's Art';




};
</script>


<script type='text/javascript'>

function linkSound(picname,personname)
{

if(picname != 'default')
{

var soundfile = picname.replace('w.bmp','.mp3');





var soundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/' + soundfile;



return soundfilepath;



}


};</script>


<script>

function changePic(picname,personname)
{

if(picname != 'default')
{


var path = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphicw/' + picname;

var myimg = document.getElementById('myImage');


var selectedgraphicfilename = picname.replace('w.bmp','.bmp');


var newImage = new Image();
newImage.src = path;



newImage.onerror = function()
{
alert('There was a problem loading the Image file! - Please try again');
myimg.style.height = '';
myimg.src = '';
}
newImage.onload = function()
{
myimg.src = path;

}
return selectedgraphicfilename;
}

};

</script>





<title>ECOVIB2D&copy;</title>
</head>
<body onload='setVar();' style='background-color: #660000'>








<table align='centre' border='0' width='965'>
<tbody>
<tr>
<td bgcolor='#660000' width='189px'><img height='90' src='http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/ecovib2d1.jpg' width='90' /></td>
<td bgcolor='#660000' width='500px'>
<p align='center' id ='Title'>ECOVIB2D&copy;</p>
</td>
</tr>
</tbody>
</table>





<table align='center' style=' background-color: #660000'>
<tbody>


<br>


<tr>

<center> <p id='Price'> </p></center>


<td align='left'>


<img src= 'personpath' id='PersonImage' width='450' height='450'>


</td>


<td align='top'>

<script> alert(personsnamejs)</script>


<select name='Graphic_select' id='Graphic_select' onchange='changePic(this.value,personsnamejs);linkSound(this.value,personsnamejs);'/>





<option value ='default' id = 'def' style='height:120px;'></option>


<?php

$pname = "AdrianTudini";

foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphicw/*.bmp") as $files1){

$files1 = basename($files1);


echo "<option value='{$files1}'>{$files1}</option>";
}

?>

</select>




<img id='myImage' src='' height='450' width='450'>

<p align='center' id='PlaySound' >Play the sound with my art in mind</p>


<center><audio id='audiotag1' controls='controls'><source='soundfilepath' type='audio/mpeg'>You cannot play the sound in browser.</audio></center>

</td>
</tr>
</table>

<script>alert(selectedgraphicfilename);</script>

<form action='http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/process.php?Price=Priceofart&Graphic=selectedgraphicfilename' method='POST'>

<p align='center' id='freename'>Enter Full Name:</p>

<p align='center'><input id='Nameofperson' maxlength='50' name=username size='50' type='text' /></p>

<p align='center' id='freeaddress'>Enter Email-Address:</p>

<p align='center'><input id='e-address' maxlength='50' name=email size='50' type='text' /></p>

<p align='center'><input type='submit'style='height:65px;width:220px;font-size:36px' value='Buy*' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='reset'style='height:65px;width:220px;font-size:36px;' value='Clear' /></p>
</form>

<p align='center' id='paypal'>* You will be requested by email to pay by Paypal&copy;. Your name and email address will not be sold or traded</p>

<p align='center' class='style8'><a href='http://ecovib2d.blogspot.com.au'>Back to Ecovib2d's blog</a></p>


<p align='center'><span class='style8'><a href='mailto:tudsy@ecovib2d.com.au'>Send me Mail</a></span></p>









</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 20 2016, 09:25 AM
Post #32


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



This line of code is wrong:
CODE
document.getElementById('def').innerHTML = 'Click-Tap dropdown menu to view/select ' + personsnamejs + ' 's Art';
You need to learn to use your browsers debugging tools. This error would have been caught. The line should be:
CODE
document.getElementById('def').innerHTML = 'Click-Tap dropdown menu to view/select ' + personsnamejs + " 's Art";
Can you tell me why?

Also, this line of code is wrong:
CODE
<img src= 'personpath' id='PersonImage' width='450' height='450'>
personpath is a javascript variable. When you put quotes around it you turn it into a string. So, the 'src' attribute will contain the word personpath not the value of the variable. If you want the value of the variable then you need to use <script> tags.

In a previous post you stated you had the image change working but not the sound. This message makes it sound like nothing is working. Which is it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 21 2016, 04:14 AM
Post #33


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi again

Thanks for that.

I have got the image working but the sound is still loading the soundfile.

when it first loads, the display on the audio tag says 'loading'

I have checked the sizes of the MP3 files and they are reasonable.

Here is the code:

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-908952-3', 'auto');
ga('send', 'pageview');
ga('require','linkid');
</script>






<script>



var personsnamejs ='AdrianTudini';

var personpicture = personsnamejs + '.jpg';

var Priceofart = 2;

function setVar(){

var personpath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personsnamejs + '/' + personpicture;

document.getElementById('Price').innerHTML= 'Price of Art ( without a watermark )(USD): $' + Priceofart;

var x = document.getElementById('Title');
x.style.color = '#00FF00';
x.style.fontSize ='36px';

document.getElementById('PersonImage').src = personpath;

var y = document.getElementById('Price');
y.style.color = '#00FF00';
y.style.fontSize ='36px';

var z = document.getElementById('PlaySound');
z.style.color = '#00FF00';
z.style.fontSize ='24px';

var t = document.getElementById('paypal');
t.style.color = '#00FF00';
t.style.fontSize ='24px';

var u = document.getElementById('freename');
u.style.color = '#00FF00';
u.style.fontSize ='20px';

var v = document.getElementById('freeaddress');
v.style.color = '#00FF00';
v.style.fontSize ='20px';


document.getElementById('def').innerHTML = 'Click-Tap dropdown menu to view/select ' + personsnamejs + " 's Art";




};
</script>


<script type='text/javascript'>

function linkSound(picname,personname)
{

if(picname != 'default')
{

soundfile = picname.replace('w.bmp','.mp3');


var soundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/' + soundfile;



return soundfilepath;



}


};</script>


<script>

function changePic(picname,personname)
{

if(picname != 'default')
{


var path = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphicw/' + picname;

var myimg = document.getElementById('myImage');


var selectedgraphicfilename = picname.replace('w.bmp','.bmp');


var newImage = new Image();
newImage.src = path;



newImage.onerror = function()
{
alert('There was a problem loading the Image file! - Please try again');
myimg.style.height = '';
myimg.src = '';
}
newImage.onload = function()
{
myimg.src = path;

}
return selectedgraphicfilename;
}

};

</script>





<title>ECOVIB2D&copy;</title>
</head>
<body onload='setVar();' style='background-color: #660000'>








<table align='centre' border='0' width='965'>
<tbody>
<tr>
<td bgcolor='#660000' width='189px'><img height='90' src='http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/ecovib2d1.jpg' width='90' /></td>
<td bgcolor='#660000' width='500px'>
<p align='center' id ='Title'>ECOVIB2D&copy;</p>
</td>
</tr>
</tbody>
</table>





<table align='center' style=' background-color: #660000'>
<tbody>


<br>


<tr>

<center> <p id='Price'> </p></center>


<td align='left'>


<img src= personpath id='PersonImage' width='450' height='450'>


</td>


<td align='top'>


<select name='Graphic_select' id='Graphic_select' onchange='changePic(this.value,personsnamejs);linkSound(this.value,personsnamejs);'/>





<option value ='default' id = 'def' style='height:120px;'></option>


<?php

$pname = "AdrianTudini";

foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphicw/*.bmp") as $files1){

$files1 = basename($files1);


echo "<option value='{$files1}'>{$files1}</option>";
}

?>

</select>




<img id='myImage' src=path height='450' width='450'>

<p align='center' id='PlaySound' >Play the sound with my art in mind</p>

<script> alert(soundfilepath);</script>
<center><audio controls><source src= soundfilepath type='audio/mpeg'>You cannot play the sound in browser.</audio></center>

</td>
</tr>
</table>

<script>alert(selectedgraphicfilename);</script>

<form action='http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/process.php?Price=Priceofart&Graphic=selectedgraphicfilename' method='POST'>

<p align='center' id='freename'>Enter Full Name:</p>

<p align='center'><input id='Nameofperson' maxlength='50' name=username size='50' type='text' /></p>

<p align='center' id='freeaddress'>Enter Email-Address:</p>

<p align='center'><input id='e-address' maxlength='50' name=email size='50' type='text' /></p>

<p align='center'><input type='submit'style='height:65px;width:220px;font-size:36px' value='Buy*' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='reset'style='height:65px;width:220px;font-size:36px;' value='Clear' /></p>
</form>

<p align='center' id='paypal'>* You will be requested by email to pay by Paypal&copy;. Your name and email address will not be sold or traded</p>

<p align='center' class='style8'><a href='http://ecovib2d.blogspot.com.au'>Back to Ecovib2ds blog</a></p>


<p align='center'><span class='style8'><a href='mailto:tudsy@ecovib2d.com.au'>Send me Mail</a></span></p>









</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 21 2016, 05:53 AM
Post #34


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



This line of code is still wrong:
CODE
<img src= personpath id='PersonImage' width='450' height='450'>
Actually, there are 2 problems. Problem 1: there needs to be quotes around the 'src' attribute. Problem 2: the javascript variable 'personpath' will not get converted to the value of the variable. In fact, I'm not even sure you can put javascript code inside HTML tag attributes, like you can with PHP. The best way to write this line is:
CODE
<img src='' id='PersonImage' width='450' height='450'>
And let this line of code set the 'src' attribute:
CODE
document.getElementById('PersonImage').src = personpath;
which is found in the setVar() function.

As for the sound problem, I can't help with that at this time. The computer I'm using has no sound (the motherboard sound system died). I may buy a add-in sound card or maybe even a new computer. But, for now I have no sound.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 21 2016, 06:19 AM
Post #35


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

Thanks for that.

I got the sound working with the appropriate graphic.


I put


document.getElementById('Sound').src = soundfilepath;

in the function linkSound.

It works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 21 2016, 06:42 AM
Post #36


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Great news, glad you got it working.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 21 2016, 07:21 AM
Post #37


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

I was wondering how do I pass JavaScript variables through a query string?

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 21 2016, 01:07 PM
Post #38


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(tudsy @ Sep 21 2016, 07:21 AM) *
Hi

I was wondering how do I pass JavaScript variables through a query string?

Thanks.

Do you mean a URL query string? Do you want to use javascript or PHP? Doing a google search for 'javascript build url query string' might help you before I can reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 14 2022, 04:38 AM
Post #39


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



New post moved to its own thread:

Drop down menu
https://forums.htmlhelp.com/index.php?showt...mp;#entry143749
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:08 AM