drop down menu |
drop down menu |
CharlesEF |
Sep 9 2016, 10:18 AM
Post
#21
|
Programming Fanatic Group: Members Posts: 1,984 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(); OR audio.addEventListener('canplaythrough', function() { audio.play(); }, false); audio.addEventListener('ended', function() { alert('ended'); }, false); audio.src = soundfilepath; CODE var audio = new Audio(soundfilepath); audio.addEventListener('canplaythrough', function() { audio.play(); }, false); audio.addEventListener('ended', function() { alert('ended'); }, false); |
CharlesEF |
Sep 9 2016, 01:46 PM
Post
#22
|
Programming Fanatic Group: Members Posts: 1,984 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?
|
tudsy |
Sep 10 2016, 11:46 PM
Post
#23
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
|
CharlesEF |
Sep 11 2016, 06:52 AM
Post
#24
|
Programming Fanatic Group: Members Posts: 1,984 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? 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 |
tudsy |
Sep 13 2016, 11:13 AM
Post
#25
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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) codejsandphp.txt ( 8.01k ) Number of downloads: 972 |
CharlesEF |
Sep 13 2016, 11:57 AM
Post
#26
|
Programming Fanatic Group: Members Posts: 1,984 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>"; |
tudsy |
Sep 16 2016, 12:03 AM
Post
#27
|
Advanced Member Group: Members Posts: 248 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? Thanks codesound.txt ( 7.85k ) Number of downloads: 1175 |
CharlesEF |
Sep 16 2016, 08:50 AM
Post
#28
|
Programming Fanatic Group: Members Posts: 1,984 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'.
|
tudsy |
Sep 19 2016, 12:33 PM
Post
#29
|
Advanced Member Group: Members Posts: 248 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. |
CharlesEF |
Sep 19 2016, 04:56 PM
Post
#30
|
Programming Fanatic Group: Members Posts: 1,984 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... |
tudsy |
Sep 19 2016, 09:40 PM
Post
#31
|
Advanced Member Group: Members Posts: 248 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©</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©</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*' /> <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©. 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> |
CharlesEF |
Sep 20 2016, 09:25 AM
Post
#32
|
Programming Fanatic Group: Members Posts: 1,984 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? |
tudsy |
Sep 21 2016, 04:14 AM
Post
#33
|
Advanced Member Group: Members Posts: 248 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©</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©</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*' /> <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©. 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> |
CharlesEF |
Sep 21 2016, 05:53 AM
Post
#34
|
Programming Fanatic Group: Members Posts: 1,984 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. |
tudsy |
Sep 21 2016, 06:19 AM
Post
#35
|
Advanced Member Group: Members Posts: 248 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. |
CharlesEF |
Sep 21 2016, 06:42 AM
Post
#36
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Great news, glad you got it working.
|
tudsy |
Sep 21 2016, 07:21 AM
Post
#37
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
Hi
I was wondering how do I pass JavaScript variables through a query string? Thanks. |
CharlesEF |
Sep 21 2016, 01:07 PM
Post
#38
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
|
Christian J |
Jun 14 2022, 04:38 AM
Post
#39
|
. Group: WDG Moderators Posts: 9,722 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 |
Lo-Fi Version | Time is now: 26th September 2024 - 05:31 PM |