drop down menu |
drop down menu |
tudsy |
Aug 15 2016, 07:41 PM
Post
#1
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
)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: 1562 |
CharlesEF |
Aug 17 2016, 12:05 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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?
|
tudsy |
Aug 17 2016, 12:52 AM
Post
#3
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
Hi
Thanks for that. Graphicw has permissions set at 0755. Thanks This post has been edited by tudsy: Aug 17 2016, 12:53 AM |
CharlesEF |
Aug 17 2016, 02:43 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
So, does that mean the problem was permissions? Or, are you still having the same problem?
|
tudsy |
Aug 18 2016, 05:56 AM
Post
#5
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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 |
CharlesEF |
Aug 18 2016, 08:54 AM
Post
#6
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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.
|
tudsy |
Aug 20 2016, 11:51 AM
Post
#7
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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"; } |
CharlesEF |
Aug 20 2016, 09:37 PM
Post
#8
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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. This post has been edited by CharlesEF: Aug 20 2016, 09:39 PM |
CharlesEF |
Aug 21 2016, 05:20 AM
Post
#9
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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. |
Christian J |
Aug 21 2016, 04:17 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
Maybe, since you are not uploading an image to the server, you don't need to use PHP or AJAX at all. Note that using an onchange event to reload the page might annoy users, especially if the SELECT menu is located a bit down on the page --suddenly the whole page reloads, and the user has lost focus of the SELECT menu and finds himself at the top of the new page. QUOTE You might be able to use Javascript to set the 'src' attribute of the <img> tag. Yes, and it may also be a good idea to preload the images with javascript to avoid any delays. Also, BMP images may not be ideal due to their large file sizes (older browser don't support them either). |
tudsy |
Aug 30 2016, 10:43 PM
Post
#11
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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: 1532 |
CharlesEF |
Sep 1 2016, 01:24 AM
Post
#12
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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: CODE functionName(path) newImage is used to pre-load the image and if there is no error then you set the 'src' attribute of the <img> tag.{ var newPath = path; var newImage = new Image(); newImage.src = newPath; newImage.onerror = function() { code to run if there is an error, like file not found } newImage.onload = function() { document.getElementById('imageId').src = newPath; } } |
tudsy |
Sep 5 2016, 12:01 AM
Post
#13
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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: 1261 |
Christian J |
Sep 5 2016, 06:52 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I have adopted the changes from the last post This is not a valid Doctype: CODE <!DOCTYPE PHP> Also there's no reason to create all the HTML and javascript with PHP, it only complicates things for you. Only use PHP for the parts where actual PHP code is used, like the PHP loop that creates the OPTION elements. QUOTE but I was wondering what is the effect of having two onchange events in the same script? I don't think the onchange event applies to IMG elements, only form elements like SELECT. Use it on the SELECT menu, and let the same javascript function change both text and image. |
CharlesEF |
Sep 5 2016, 09:09 AM
Post
#15
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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.
CODE <!DOCTYPE HTML> If you want the image '260506_2_29w.bmp' to be shown when the page loads then put it back in the 'src' attribute of the <img> tag.<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>ECOVIB2D©</title> <script type="text/javascript"> function changePic(path) { var myimg = document.getElementById('myImage'); var newImage = new Image(); newImage.src = path; newImage.onerror = function() { alert("There was a problem loading the file!"); myimg.style.height = ''; myimg.src = ''; } newImage.onload = function() { myimg.src = path; } } </script> </head> <body> <select name='Graphic_select' id='Graphic_select' onchange='changePic("/home/ecovibdc/public_html/ECOVIB2D/MYART/AdrianTudini/Graphicw/" + this.value)';> <option value ='default' selected style='height:120px;'>Click-Tap dropdown menu to view/select AdrianTudini's Art</option> <?php foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/AdrianTudini/Graphicw/*.bmp") as $files1) { $files1 = basename($files1); echo " <option value='{$files1}'>{$files1}</option>"; } ?> </select> <br> <img id='myImage' src='' alt='Picture'> </body> </html> EDIT: After posting I see that the copyright entity was change to the actual symbol, you will have to put the HTML entity back in. This post has been edited by CharlesEF: Sep 5 2016, 09:13 AM |
CharlesEF |
Sep 5 2016, 12:13 PM
Post
#16
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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:
CODE function changePic(picname) You also need to change the <select> tag to this: { if(picname != 'default') { var path = "/home/ecovibdc/public_html/ECOVIB2D/MYART/AdrianTudini/Graphicw/" + picname; var myimg = document.getElementById('myImage'); var newImage = new Image(); newImage.src = path; newImage.onerror = function() { alert("There was a problem loading the file!"); myimg.style.height = ''; myimg.src = ''; } newImage.onload = function() { myimg.src = path; } } } CODE <select name='Graphic_select' id='Graphic_select' onchange='changePic(this.value);'> This new code is also not tested. |
tudsy |
Sep 6 2016, 07:29 AM
Post
#17
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
Hi
I got it to work by putting the absolute path (http://......) not the relative path. Thanks. |
CharlesEF |
Sep 6 2016, 01:16 PM
Post
#18
|
Programming Fanatic Group: Members Posts: 1,984 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
|
tudsy |
Sep 9 2016, 02:52 AM
Post
#19
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
Hi
The path was the only problem. |
tudsy |
Sep 9 2016, 02:58 AM
Post
#20
|
Advanced Member Group: Members Posts: 248 Joined: 30-September 14 Member No.: 21,611 |
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: 1252 |
Lo-Fi Version | Time is now: 26th September 2024 - 04:26 PM |