Upgrading Dropdown Menus

Question

I am a teacher, and I currently run a blog via blogger.com for my class. The link is http://stmlatin2019.blogspot.com

You'll notice that I have some drop-down menus in the left sidebar of the blog. These work beautifully on my laptop and on my desktop. The problem is that my school is now switching to iPads, and I am having trouble getting the menus to work on most iPad browsers. They open in Chrome, but the security restrictions on campus distort the look of the blog on Chrome.

My question is this: While I know this is not an Apple forum, could anyone show me how to tweak this code so that the dropdown menus work in iPad browsers like Safari? Currently, Safari lets me pull down the menu and make a selection, but then nothing happens once I make a selection.

I guess I should say that I know absolutely nothing about coding. In fact, I stumbled upon that dropdown code on accident a couple of years ago, and, miraculously, I got it to work. Now I'm back to square one.

Here is the code for one of the menus so that you can see what I'm dealing with:

<select style="background-color:#eee9dd"
id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options [0].selected=true" class="text_noresize" name="select">

<option selected />Select a link
<option value="" />
<option value="http://www.stmsaints.com/site1.php" /> StM Homepage
<option value="https://mail.stmsaints.com/owa" /> StM E-mail
<option value="http://www.edmodo.com" /> Edmodo
<option value="" /> ____________________</select>"

Any help you can offer me would be most appreciated.

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

Here is the answer, from Apple docs

The standard window.open() JavaScript method cannot be used to open a new tab and window from a global HTML file or an extension bar. Instead, the global file and extension bars have access to the SafariApplication, SafariBrowserWindow, and SafariBrowserTab classes, whose methods and properties allow you to work with windows and tabs.

Also posted here: link

Safari/Chrome have built-in pop-up blockers that stop this from working. The only Javascript that is allowed to open a new window in Safari/Chrome is Javascript directly attached to click handlers (and other direct user input handlers).

However, you could display an alert showing pop-up blocked.

Try this:

<select id="retailer" class="windowOpen">
    <option value="#">Select one</option>
    <option value="http://amazon.com">Amazon</option>
    <option value="http://ebay.com">eBay</option>
</select>

<script>
$(document).ready(function () {
$('select.windowOpen').change(function () {
    var url = $(this).val();

    var open = window.open(url);
    if (open == null || typeof (open) == 'undefined') alert("Turn off your pop-up blocker!\n\nWe try to open the following url:\n" + url);
});
});
</script>

JSFiddle:

http://jsfiddle.net/utcB9/1

edited May 23 '17 at 11:57

Community

1
1

answered Jun 28 '14 at 22:52

imbondbaby

6,351
3
21
54

I can't get this to work. When I paste the code you provided, I get the drop down menu and then everything else as text. I'm not very polished when it comes to this. Can you tell me what I'm doing wrong? Thanks. – user3786765 Jun 29 '14 at 02:17
Yes, you need to import Jquery onto your webpage. I posted a demo for you on the post. – imbondbaby Jun 29 '14 at 02:24
insert this on top of the page beside the other script tags `` Also check I updated the script in my post a little, so do try the latest one – imbondbaby Jun 29 '14 at 02:26
I know I sound idiotic, but where are the script tags? I am putting this menu in an html/javascript widget in a sidebar on the blog. – user3786765 Jun 29 '14 at 02:33
Updated code once again but this `` anywhere and then copy my updated code and paste it between `` tags – imbondbaby Jun 29 '14 at 02:35
Yes, put the `HTML` part before the `script` though – imbondbaby Jun 29 '14 at 02:40
The updated script being the part that starts with a dollar sign? – user3786765 Jun 29 '14 at 02:43
yes put that below the dropdown `HTML` part make sure this line is the same in your dropdown ` – imbondbaby Jun 29 '14 at 02:44
It's not working. I have no idea what I'm doing. Thanks for your attempts to help me, though. – user3786765 Jun 29 '14 at 02:47
I am trying it on a tester blog so I don't accidentally screw up the real one. stmlatintester.blogspot.com – user3786765 Jun 29 '14 at 02:50
Everything is correct except the part that starts with the dollar sign needs to be inside tag – imbondbaby Jun 29 '14 at 02:51
Does the menu code (amazon, etc) even go in the script at all? – user3786765 Jun 29 '14 at 03:14

Upgrading Dropdown Menus

1 Answers1