Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dropdowns,when clicked,opens at a new window

    Hi Let me ask that when we click in dropdowns there is a new window that opens (a href's).
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <TITLE>As if worked...</TITLE>
    <style type="text/css">
    select{background-color: darkcyan;font-family: verdana;font-size:10px;font-weight: bold}
    select:hover {background-color: cyan; font-family:verdana;font-size: 10px;font-weight: bold}
    .one {border: 1px solid #ffffff}
    a:link,a:visited {color: darkcyan;text-decoration: none}
    a:hover{color: cyan}
    hr.one {border-top: inset #ffffff}
    hr.two {border-bottom: inset #ffffff}
    </style>
    </HEAD>
    <BODY bgcolor="#000000" text="#000000">
    <IMG src="01049.gif" width="798" height="22" align="top" alt="As if worked..." style="position:absolute;left:0px;top:0px;width:798px;height:22px;z-index:0" class="one">
    <DIV style="position:absolute;left:9px;top:24px;width:787px;height:23px;background-color:#000000;z-index:1" align="left">
    <MARQUEE direction="right" height="23" scrolldelay="90" scrollamount="6" behavior="scroll" loop="0" style="font-family:Verdana;font-size:11px;font-weight:bold;text-decoration:none;color:#00FF00;background-color:#000000;">Welcome to my site---Works best in firefox!!!</MARQUEE>
    </DIV>
    <DIV style="position:absolute;left:13px;top:72px;width:618px;height:39px;z-index:2" align="left">
    <FONT style="font-size:11px" color="#FFFF00" face="Verdana"><B>Whaaaaaaaaaaaaaaaaaaaaat now...Where will I go...What is the content???</B></FONT><FONT style="font-size:11px" color="#FFFFFF" face="Verdana"><B><BR>
    Just click on one of the links in the <BR>
    combobox and tell you a lot of info about them...</B></FONT>
    </DIV>
    <HR width="383" color="#000000" style="position:absolute;left:13px;top:52px;width:383px;height:3px;z-index:3" class="one">
    <HR noshade size="3" width="383" color="#000000" style="position:absolute;left:15px;top:114px;width:383px;height:3px;z-index:4" class="two">
    <DIV style="position:absolute;left:535px;top:71px;width:277px;height:155px;z-index:5" align="left">
    <select>
    <option onclick="location.href=''">Improve your browser</option>
    <option onclick="location.href=''">Games I play</option>
    <option onclick="loction.href=''">Coding (e.g. HTML CSS)</option>
    <option onclick="location.href=''">Getting to know your browser</option>
    </select>
    </DIV>
    </BODY>
    </HTML>
    ALWAYS remember to validate your code

  • #2
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    At line 30-35 is where u'll find the select and options...
    ALWAYS remember to validate your code

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not sure whether anchors can be children of options, but if you do that, with a target of '_blank', it should work.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    You would code the select list something like this:

    Code:
    JavaScript\:
    function newWindow() {
      if (this.value) {
        var w = window.open();
        w.location = this.value;
        }
      }
    
    HTML:
    <select onchange="newWindow()">
      <option value="" selected="selected">— Select Destination —</option>
      <option value="URI">Improve your browser</option>
      <option value="URI">Games I play</option>
      <option value="URI">Coding (e.g. HTML CSS)</option>
      <option value="URI">Getting to know your browser</option>
    </select>
    Note that I added a dummy element at the top. This is because onchange requires a change. If the user wants to go to the first destination, and the initially selected option is the one that refers to that destination, then selecting that option will result in no change and the change event will not be triggered. If you don’t want a dummy option and would like to circumvent that issue, you could add a submit/go‐to button.

    And just so you know, a select list is not a very good way to implement site navigation. The user cannot control whether they want the destination to open in the current window, a new window, a new tab, to save the file, etc. Without anchor elements, the user also doesn’t see the link destination in their browser’s status bar. Finally, the user can’t navigate at all when JavaScript is disabled.

    Forcing the user to open a new window without good reason (i.e., to keep them on your site) is also not very user‐friendly especially when you don’t give a warning (text, icon, etc) indicating that a new window will be (forcibly) opened.

    Quote Originally Posted by 1212jtraceur View Post
    I'm not sure whether anchors can be children of options, but if you do that, with a target of '_blank', it should work.
    They can’t.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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