Dropdown list of pdfs

HTML & CSS
1

I’m sure I’m going to feel REALLY stupid when someone answers this but for the life of me I can’t figure out how to make a dropdown list to choose a PDF file. Is this even possible? I’ve been reading on this and other forums and simply cannot get it to work. The dropdown looks lovely but when I click on one of the pdfs nothing happens.

<select>
	<option value=><a href="minutes/2018/BCOACoverletter.9.2019.pdf" target="_blank">BCOA Cover Letter</a></option>
	<option value=><a href="minutes/2018/BCOA2019Slate.pdf" target="_blank">2019 Judge Slate</a></option>
</select>

I’m thinking that there should be quote marks in there somewhere after the word ‘value’ but whenever I try to add them they just display and the dropdown still won’t load the pdf.

What on earth am I missing?!

2

It seems like you want the selected PDF to download as soon as the user selects it from the <select> element.

What happens when you change the relative URLs to absolute URLs (i.e., the whole URL of each of the PDFs, including HTTP(S) and whatever other path is necessary)?

3

Are you sure links are valid content for <option> elements?

https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element

Content model:

If the element has a label attribute and a value attribute: Nothing.

If the element has a label attribute but no value attribute: Text.

If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.

If the element has no label attribute and is a child of a datalist element: Text.

Might it be better to have the links inside <li> tags?

1 Like
4

I guess that’s pretty much what I’m asking, hence my “is this even possible?” question. :slight_smile: I already have it as a list inside li tags but there are close to 200 items so I’d like to condense them. I can’t send a link to the current page as the pdfs are not for public dissemination. I’m just hoping that someone can tell me if it’s even possible to make some kind of dropdown list which when clicked will allow the viewer to read the pdf.

5

I don’t know whitewolf. :slight_smile: - I’ll give that a try and see. Thanks!

6

Same thing happens - nothing. :>(

7

An alternative would be to have the URLs as option values - not links.

Then in the server-side file that the form submits to, use the value to open the PDF.

Once that gets working you could add JavaScript that would open the file instead of a form submit if you wanted to.

I suggest you limit the development to only a few instead of the whole batch.

8

This isn’t a “form” though. It’s just a page with a list of files - minutes of the club going back 6 or 7 years. It works just fine the way it is - I have it set up in 3 columns of about 60 items each, separated into years and then quarters within the years. I’d just like to have it take up less space so thought a dropdown list - or some other sort of list that I can’t think of - would be less cumbersome. I’m beginning to think that it’s just not possible.

9

Sounds like a prime candidate for an accordion section for each year. Then when you click on that section it would open up and reveal that year in quarters. That could be done with nested lists or four separate lists. The quarters could be set up as columns.

I would even consider using an ordered list <ol> since the months will come in order.

Here’s an accordion I was looking at recently.

2 Likes
10

Oh wow! Thanks Ray! I didn’t think of doing something like that. Do you know if it’s possible with just html and css or does it have to be done with javascript as well? I’d prefer not to clutter things up with javascript if at all possible.

And as I typed the above I thought, “Just Google it, stupid” - and I found one! Thanks so much for the idea, Ray - greatly appreciated!

1 Like
11

If you use a CSS only method be careful of the one you pick. Give us a link to the one you picked so we can see what method it uses.

There’s been several threads recently about CSS “click to show” methods.

Paul discusses the “Checkbox Hack” here.

There is some discussion on the <details> tag here. It is not supported in IE or Edge so it’s not a good solution just yet. In that same thread I explain some of the problems with the :target selector.

At this point in time I believe the checkbox hack would be the best CSS only solution.

I’m not opposed to using JS in small doses when it is the best tool for the job. It does not clutter up the page as bad as one might think. There is no need to use a JS Library when a few lines of modern JS can do the job efficiently.

12

It’s from the same site as your example: https://codepen.io/Pavan_Yuvan/pen/gPMdxR

I’ll check out the checkbox hack as well. Thanks Ray.

13

That’s what the link you gave uses. You will see the inputs in the html…
<input type="checkbox" checked>

That example uses Less CSS but you can convert it back to standard CSS, or find another example that uses standard CSS.

14

Who knew?! Certainly not me. :slight_smile: Thanks Ray. I’ll see what I can figure out. I did copy/paste that code and uploaded it and it works. I had NO idea there was such a thing as Less CSS.

15

Yeah I think the browser converts it back to std. CSS. You can also log in to codepen and click “Export” in the lower right corner of the demo page.

In the exported zip file you will find the standard CSS version, I did that and here is the CSS file for that demo you linked to.
style.css (3.3 KB)

16

No need. I copied the code and css and it works perfectly. Now I just have to tweak the css to make it look the way I want it to. Thanks so much Ray!

17

Please post the css you are actually using So we can confirm it is ok :slight_smile:

Less css will not work properly unless it’s been compiiled. It may appear to work in some cases but be full of invalid css that could cause problems later.

It may be that you copied the compiled css which would be ok but unlikely you did this by accident :slight_smile:

18

That is absolutely, totally possible. While I HAVE been doing this stuff for many, many years (since the 90s) I don’t do it regularly enough to be able to remember everything, so am constantly having to re-learn things. I am, however REALLY good at trouble-shooting. When I took computer programming back in the 80s (just in BASIC) I couldn’t write a good programme if my life depended on it but as soon as I saw how it ran (or didn’t) I could fix it. Passed the course because my instructor realized that, I guess. :smile:

I’ve been fiddling with two different methods I found and at this point I can’t remember which one we’re talking about here but in any event I need to set this issue aside for a few days and get more of the “easy” parts done. When I get back to the page in question, I’ll report back.

My thanks to all of you for the help!

1 Like
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.