)Hi
I am still having problems in trying to come up with a drop down menu. I have attached the full code and the resulting output (screenshot).
The main problem is that I am not generating the options in the drop down menu. Can anyone help?
Thanks.
Attached thumbnail(s)
Attached File(s)
code.txt ( 5.36k )
Number of downloads: 890
I have no idea what are valid values for $pname and $person. Have you tried entering this URL into your browser directly? Substitute a valid name for $pname. 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/$pname/Graphicw'. Is the directory accessible? Or do you get a 403 Forbidden error?
Hi
Thanks for that.
Graphicw has permissions set at 0755.
Thanks
So, does that mean the problem was permissions? Or, are you still having the same problem?
Hi
I am having the same problem but I put the url, http://103.........., in the address bar of the browser and got a 403 error.
I since asked my isp to enable directory browsing and was able to see my files.Alas, I am having the same problem.
Thanks
Sorry to hear that. I looked over your code but I don't see any obvious errors. I would suggest you place many echos in your code to be sure the results at each step are what you expect.
Hi
I used glob() and it works!. It creates the menu (drop down) but it still does not load the picture as you select it.
I will work on it.
Thanks.
foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphicw/*.bmp") as $files1){
$files1 = basename($files1);
$options= "<option value=".$files1.">".$files1."</option>";
echo "$options";
}
I think what you need to do is this. The <select> tag needs to have an onchange event fire. The function that is assigned to the onchange event will need to do 1 of 2 things.
1. Use javascript to submit the page back to itself and have some PHP code assign the image path/name.ext to a <img> tag.
OR
2. Use AJAX and PHP to load the selected image into a <img> tag.
You need to decide which option works better for you.
Maybe, since you are not uploading an image to the server, you don't need to use PHP or AJAX at all. You might be able to use Javascript to set the 'src' attribute of the <img> tag.
It's been awhile since I had to do this so I don't remember for sure, but this is another option to try.
Hi
My problem is now using JS to update the image when the user selects a image from the drop down menu.
Attached is the code in what I am trying to do.
code.txt ( 2.15k )
Number of downloads: 890
This is just an outline of what needs to be done. You should do some more research.
In the <select>'s onchange="functionName(image_path);" the actual function should have something like this:
Hi again
I have adopted the changes from the last post but I was wondering what is the effect of having two onchange events in the same script?
Do they execute simultaneously? or what?
Attached is the updated code.
Any help will be appreciated. Thanks.
Attached File(s)
updatedcode.txt ( 2.16k )
Number of downloads: 628
Christian J has already pointed out some problems. Why do you insist on using PHP to build so much of the page? As far as I can see the getText(element) is useless. The <select> tag, by default, will show the selected text. Also, in the .onerror section of the changePic(path) function, why are you using 'var img = new Image();' again? If it failed to load the first time why would it work the second time? Based on what I think you want your code to do I have re-written it. I would still do some things differently but it's a start.
I forgot to say that the code I posted is not tested. In fact, I can already see 1 thing you should add to the code. Everything in the function should be wrapped in an if() statement to prevent the code from running if/when the 'default' value is selected. This means you will have to move the file path to the function itself, like this:
Hi
I got it to work by putting the absolute path (http://......) not the relative path.
Thanks.
Hi
The path was the only problem.
Hi
I was wondering. Can I use the same type of code (with modifications) to link the sound to the graphic (see attached)?
Thanks.
Attached File(s)
codewithsound.txt ( 6.87k )
Number of downloads: 612
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:
BTW, you never answered my question. Why do you insist on using PHP to build so much of the page?
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:
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: 984
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'.
Hi
I am still having problems with the 'sound' code you wrote. It does not work. Can you please help?
Thanks.
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...
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>
This line of code is wrong:
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>
This line of code is still wrong:
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.
Great news, glad you got it working.
Hi
I was wondering how do I pass JavaScript variables through a query string?
Thanks.
New post moved to its own thread:
Drop down menu
https://forums.htmlhelp.com/index.php?showtopic=61059&st=0&#entry143749
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)