/    Sign up×
Community /Pin to ProfileBookmark

Any Javascript code for a dyanmic directory list?

Hello,

I was wondering if anyone had any javascript code that could build a dynamic list of files in a web directory.

For example, I want to build a dyanamic drop down list navigator of images I’ve placed in an image directory. The intent is so a user could select an image from the drop down list, and the chosen picture would display in an <img> tag on the current page.

I already know how to code the javascript to update the <img> when a different drop down option is chosen, but so far, the only way I know how to add new options to the drop down list when new images are added to the image directory is to add the new “options” to the .html file with the drop down select. So every time I add a new image, I have to update the .html file as well.

It would be nice if there was some code that could look in the image directory and dynamicaly add those select options so I only had to add the image into the directory without having to update the .html page as well.

So, is there any javascript code that I could use that would be functionally equivalent to

For Each file In folder.Files
// create select option
Next

Or, does anyone have any other ideas?

Thanks for the help!

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@SomatoseauthorApr 12.2004 — You know, I'd even be happy with any vbscript that could do that too. I'm not necessarily looking for javascript only, but I know this is a javascript forum. ?
Copy linkTweet thisAlerts:
@TheBearMayApr 12.2004 — Not possible with a client side script. You'll need to look server side.
Copy linkTweet thisAlerts:
@SomatoseauthorApr 12.2004 — I was afraid of that. Thanks for the help though.
Copy linkTweet thisAlerts:
@SomatoseauthorApr 12.2004 — A-HA!!!

I discovered a way to get it to work. Granted, it's a really [B]sneaky[/B] and [B]cumbersome[/B] way to go about it. But if someone wants to make a dynamic file list out of JUST client-side javascript, without relying on any server-side code, here it is:

First, I made an .html file that was just a frameset for two frames. I'll call those frames "folder" and "main".

The "folder" frame will be set to a width (or hieght) of 0 so it doesn't display. The source for this frame will reference the directory you want the file list of. For example, "http://www.mysite.com/images/".

The "main" frame will have a width (or hieght) of * so it fills up the rest of the page. This frame's source will go to whichever .html page you want to build the dynamic list of files on.

Then you place javascript on the "main" frame's .html page to reference the "folder" frame's document.links objects. Loop through all of these links (ignoring the first five links which are the standard "Name", "Last Modified", "Size", "Description", and possibly "Parent Directory" links).

Voila! The rest of the links will be the files in the chosen directory! Use them however you see fit. I'm going to build them into a select dropdown and add a javascript function to change the src of an img tag so that it moves through the images in the directory. This way, I can just place a new image into the directory and not have to worry about updating the .html page that links to the images!

If you want to dynamicaly change to a different directory you can set the "folder" frame's location with a client-side javascript command:

parent.frames['folder'].document.location.href = "<new url>";

And then refresh the folder list in whatever fashion you're using it.

Now, as I said this is a combersome way to go about this, and if you have any server-side code you can use to get the same results easier, go for it. I don't have this luxury on my site (as far as I know).

And my method definately has its drawbacks too. Frames must be enabled on the user's browser. The folder's permissions have to be set so that a list of files can be generated. Also, this method might be very browser sensitive as well, I've only tried it on IE6 so far.

If anyone would like to see the code I used, I'll be glad to post it once I get it cleaned up and put some pretty documentation in there as well.
×

Success!

Help @Somatose spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...