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
tudsy
post Aug 15 2016, 07:41 PM
Post #1


Advanced Member
****

Group: Members
Posts: 166
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 Image

Attached File(s)
Attached File  code.txt ( 5.36k ) Number of downloads: 340
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 17 2016, 12:05 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,583
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?
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Aug 17 2016, 12:52 AM
Post #3


Advanced Member
****

Group: Members
Posts: 166
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 17 2016, 02:43 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,583
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?
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Aug 18 2016, 05:56 AM
Post #5


Advanced Member
****

Group: Members
Posts: 166
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 biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 18 2016, 08:54 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,583
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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Aug 20 2016, 11:51 AM
Post #7


Advanced Member
****

Group: Members
Posts: 166
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";

}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 20 2016, 09:37 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,583
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
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 21 2016, 05:20 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 1,583
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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 21 2016, 04:17 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,067
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Aug 21 2016, 12:20 PM) *

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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Aug 30 2016, 10:43 PM
Post #11


Advanced Member
****

Group: Members
Posts: 166
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.Attached File  code.txt ( 2.15k ) Number of downloads: 374
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 1 2016, 01:24 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,583
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)
{
  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;
  }
}
newImage is used to pre-load the image and if there is no error then you set the 'src' attribute of the <img> tag.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 5 2016, 12:01 AM
Post #13


Advanced Member
****

Group: Members
Posts: 166
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)
Attached File  updatedcode.txt ( 2.16k ) Number of downloads: 237
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2016, 06:52 AM
Post #14


.
********

Group: WDG Moderators
Posts: 8,067
Joined: 10-August 06
Member No.: 7



QUOTE(tudsy @ Sep 5 2016, 07:01 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 5 2016, 09:09 AM
Post #15


Programming Fanatic
********

Group: Members
Posts: 1,583
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>
<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>
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.

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
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 5 2016, 12:13 PM
Post #16


Programming Fanatic
********

Group: Members
Posts: 1,583
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)
{
  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;
    }
  }
}
You also need to change the <select> tag to this:
CODE
<select name='Graphic_select' id='Graphic_select' onchange='changePic(this.value);'>

This new code is also not tested.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 6 2016, 07:29 AM
Post #17


Advanced Member
****

Group: Members
Posts: 166
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 6 2016, 01:16 PM
Post #18


Programming Fanatic
********

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



QUOTE(tudsy @ Sep 6 2016, 07:29 AM) *

Hi


I got it to work by putting the absolute path (http://......) not the relative path.

Thanks.

Great, good to know. Did my code help? Were there any bugs, besides the path problem?
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 9 2016, 02:52 AM
Post #19


Advanced Member
****

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



Hi

The path was the only problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Sep 9 2016, 02:58 AM
Post #20


Advanced Member
****

Group: Members
Posts: 166
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)
Attached File  codewithsound.txt ( 6.87k ) Number of downloads: 226
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
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2019 - 01:44 PM