window.open popup blocking issue

Question

I am fairly inexperienced with code being a support technician but it is down to us to "support" our website. We have many documents which have to be available to download so we use a drop down select menu (if that is what they're called?) to open a pdf in a new tab when a item is clicked in the list. However we have recently discovered this dose not work with IOS Safari because it uses popup blocking so I was just wondering if you can see a way around this?

Here is our code currently.

<li>
   <label for="newsletters" >School Newsletters</label>

   <select name="newsletters" class="newsletters"  id="newsletters" onchange="window.open(this.value)">
    <option value="#">Please Select</option>
    <option value="newsletters/201612.pdf"> December 2016</option>
    <option value="newsletters/201607.pdf"> July 2016</option>
    <option value="newsletters/201603.pdf"> March 2016</option>
    <option value="newsletters/201512.pdf"> December 2015</option>
    <option value="newsletters/201507.pdf"> July 2015</option>

   </select>
</li>

Any advice would be greatly appreciated.

Thanks J Tech

You can try using a standard `` and have the browser use its own settings. (open tab, open new window, direct download, etc) You can't nest tags into options though, so you'll either have to 'fake' a select using a
or
. Or not use a select at all. — Shilly, Feb 14 '17 at 13:55
To understand what is happening, read this: http://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers . TL;DR: The browser allows popups as a direct result of user action (i.e. click). For some reason, the website code loses the trust associated with the user action. I agree that changing the UI so that you can use normal anchor tags is the best way to solve this. — Raphael Rafatpanah, Feb 14 '17 at 14:01
Thank you for your responses I have been reading around about why this happens. I just dont now understand how to layout the code e.g. where I would insert the etc. I have a very limited understanding of this but am always trying to learn. — J Tech, Feb 14 '17 at 14:12

Shilly · Answer 1 · 2017-02-14T14:55:11.727

1

Worked out alternative to the select, if you can't fix the IOS issues with the link to the other question.

<html>
<head>
    <style>
    ul {
        border: 1px solid black;
        list-style: none;
    }
    #dropdown > * {
        display: none;
    }
    #dropdown > *:first-child, #dropdown.active > * {
        display: block;
    }
    </style>
</head>
<body>
<ul id="dropdown">
    <li>
        <span>Please Select</span>
    </li>
    <li>
        <a href="newsletters/201612.pdf" target="_blank">December 2016</a>
    </li>
    <li>
        <a href="newsletters/201607.pdf" target="_blank">July 2016</a>
    </li>   
    <li>
        <a href="newsletters/201603.pdf" target="_blank">March 2016</a>
    </li>
    <li>
        <a href="newsletters/201512.pdf" target="_blank">December 2015</a>
    </li>
    <li>
        <a href="newsletters/201507.pdf" target="_blank">July 2015</a>
    </li>
</ul>   
<script>
var dropdown = document.querySelector('#dropdown');
dropdown.addEventListener('click', function( event ) {
    if (dropdown.className === 'active') dropdown.className = '';
    else dropdown.className = 'active';
});
</script>
</body>
</html>

edited Feb 14 '17 at 14:55

answered Feb 14 '17 at 14:09

Shilly

8,511
1
18
24

Thanks Shilly However this is not formatting correctly for me also it opens in the same tab. – J Tech Feb 14 '17 at 14:35
Just shown the principle. You can edit the formatting any way you want and update the css to fit in with the rest of the page. To open in a different tab, just add the standard attribute `target="_blank"`. – Shilly Feb 14 '17 at 14:53
mine is just displaying with all the documents in a horizontal line under please select – J Tech Feb 14 '17 at 14:57
Then the styling css isn't being handled correctly. Yeah sorry, I'm not really a good teacher. But there's alot of tutorials out there to learn the basics of html, css and javascript so you can create something you like. – Shilly Feb 14 '17 at 15:01
I was wondering if there if you could just have a Open button next to where you could select the document? – J Tech Feb 14 '17 at 15:33

window.open popup blocking issue

1 Answers1

Linked