www.webdeveloper.com
Results 1 to 13 of 13

Thread: Drop Down Box Not working in Safari

  1. #1
    Join Date
    Dec 2002
    Posts
    159

    Question Drop Down Box Not working in Safari

    Hi there,

    The drop down box code (below) is designed to open the link in the a new window (called Download). Any other link that is chosen will also open in the same new window.

    It works in IE, Firefox and Chrome – just not Safari. Can someone please tell me why?

    Thank you.

    <!-- Begin - News

    function formlowerlinks(form){
    var URL = document.form.site.options[document.form.site.selectedIndex].value;
    window.open(URL, "Download");
    }

    document.write('<form name="form">');

    document.write('<select name="site" size=1 onChange="javascript:formlowerlinks()" style="background-color:#B5C555; color:#000000; font-family:Verdana, Arial, sans-serif; font-size:10pt;">');

    document.write('<option value="#">Previous lesson downloads:');

    document.write('<option value="2013-09-21.pdf">- Lesson 3 >>');

    document.write('<option value="2013-09-14.pdf">- Lesson 2 >>');

    document.write('<option value="2013-09-07.pdf">- Lesson 1 >>');

    document.write('</select>');

    document.write('</form>');

    // End -->

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,344
    1. don't use document.write, it replaces the current window contents.

    2. in your HTML page <body>, put this
    HTML Code:
    <script>
    function formlowerlinks(form){
    var URL = document.form.site.options[document.form.site.selectedIndex].value;
    window.open(URL, "Download");
    }
    </script>
    <form name="form">
    <select name="site" size=1 onChange="javascript:formlowerlinks()" style="background-color:#B5C555; color:#000000; font-family:Verdana, Arial, sans-serif; font-size:10pt;">
    <option value="#">Previous lesson downloads:</option>
    <option value="2013-09-21.pdf">- Lesson 3 >></option>
    <option value="2013-09-14.pdf">- Lesson 2 >></option>
    <option value="2013-09-07.pdf">- Lesson 1 >></option>
    </select>
    </form>
    when a selection is made then a new window opens with the http://yourdomain/yyy-mm-dd.pdf being requested.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Dec 2002
    Posts
    159
    Hi there,

    Thanks for your response. I failed to mention that the code I gave works from within a .JS file.

    I'm not sure if your code can be added to this file (rather then placed in the body of the actual page where it's being used). I did try…but it's not working in any browser now.

  4. #4
    Join Date
    Dec 2002
    Posts
    159
    Anyone?

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    I don't have Safari to test, but this worked in all the others I have:

    Code:
    document.write(
    	'<select size="1" onchange="window.open(this.options[this.selectedIndex].value, \'Download\');" style="background-color:#B5C555; color:#000000; font-family:Verdana, Arial, sans-serif; font-size:10pt;">',
    		'<option value="#">Previous lesson downloads:</option>',
    		'<option value="2013-09-21.pdf">- Lesson 3 &gt;&gt;</option>',
    		'<option value="2013-09-14.pdf">- Lesson 2 &gt;&gt;</option>',
    		'<option value="2013-09-07.pdf">- Lesson 1 &gt;&gt;</option>',
    	'</select>'
    );
    Last edited by bionoid; 11-06-2013 at 07:42 PM. Reason: Removed the <form>, it was no longer required
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Dec 2002
    Posts
    159
    Hi,

    Thanks for everyone's help. I finally had some time to look in to this. As it turns out...Safari has its pop up blocker turned on by default ...and as I had not activated the status bar...I didn't see it trying to open the link...and so didn't think of this being the problem.

    In any case, I'd prefer not to have to tell visitors to turn off the pop up blocker, so what I did was to add a "go" type button that Safari users could click on to open up the new page. Anyone using IE, Chrome or Firefox will have the page open up as soon as it's selected from the drop down menu.

  7. #7
    Join Date
    Nov 2011
    Posts
    118
    I have the same problem with my site and still not working. Can someone help please?

    http://www.cjwebconsulting.com/newde...tinations.html

  8. #8
    Join Date
    Dec 2002
    Posts
    159
    Hi,

    This is what I did (my code is placed in a .js file)...

    <!-- Begin - Dropdown Box
    function formlowerlinks(form){
    var URL = document.form.site.options[document.form.site.selectedIndex].value;
    window.open(URL, "Download");
    }

    document.write('<form name="form">');
    document.write('<select name="site" size=1 onChange="javascript:formlowerlinks()" style="background-color:#B4C5D5; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt;">');
    document.write('<option value="#">Download...');
    document.write('<option value="1.pdf">- Item 1 >>');
    document.write('<option value="2.pdf">- Item 2 >>');
    document.write('<option value="3.pdf">- Item 3 >>');
    document.write('</select>');
    document.write(' <input type="button" name="test" value=" >> " onClick="javascript:formlowerlinks()">');
    document.write('</form>');

    This will give you a dropdown box, listing items 1, 2 and 3. In all browsers, selecting any item, will result in said document opening in a new window. However, if you're in Safari, and you have not disabled the pop up blocker, you'll need to click on the button next to the drop down button which is labelled " >> ".

    Hope that helps.

  9. #9
    Join Date
    Nov 2011
    Posts
    118
    I did exactly what you did, and nothing happened in any of the browsers. Am I missing something? here is my site with out your changes.

    http://www.cjwebconsulting.com/newde...tinations.html

  10. #10
    Join Date
    Dec 2002
    Posts
    159
    I'm not sure what you've done but for me, your links open up in Google Chrome but not in Safari.

  11. #11
    Join Date
    Nov 2011
    Posts
    118
    Oh mine open as well. but in the same window. Not a new one

    http://www.cjwebconsulting.com/newde...tinations.html

  12. #12
    Join Date
    Dec 2002
    Posts
    159
    Your links open in a new window (in Google Chrome).

    For example, if I select Diamond Resorts, it opens in a new window.

    If I then select Mexico Accessible, that then opens up in the same window as Diamond Resorts.

    In Safari, nothing opens.

  13. #13
    Join Date
    Nov 2011
    Posts
    118
    Thats really strange. Mine all open in same window. google chrome, firefox, and safari

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles