SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Norwich
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Making a drop down list selection pop up

    Hi everyone,

    I have a drop down list with several items in it. Is there a way to make one of those items pop up in a window, if selected? (Only on one of the items.)

    Thanks in advance!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <yawns and emerges from hibernation looking for a jam sandwich />

    What do you mean exactly by "items"?
    Does your drop-down (select box) contain URLs?


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Norwich
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An item being an <option> tag.

    There are 5 option tags. Somehow, I need to find a way to make three of the <option> tags redirect the page to their URLs, when selected. The other two <option> tags need to load a popup when selected.

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this: DEMO
    Code:
    <html>
      <head>
    	<title>Pop-or-Not</title>
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	  function redirect(){
    		/* Detects selected option */
    		var Sel_Ind = document.getElementById('changeURL').selectedIndex;
    		/* Returns value of selected option */
    		var Sel_Option_Value = document.getElementById('changeURL').options[Sel_Ind].value;
    		
    		/* Splits value into display location and URL */
    		splitValue = Sel_Option_Value.split(",");
    		/* Displays new URL in Pop-up Window */		
    		if(splitValue[0] == "pop"){
    		  window.open(splitValue[1]);
    		}
    		/* Displays new URL in Current Window */		
    		else{
    		  document.location.href=splitValue[1];
    		}
    	  }
    	//-->
    	</script>  
      </head>
      <body>
    	Options 1-3 open in current window.<br>
    	Options 4-5 open in pop-up window.<br>
    	<br>
    	<form>
    	  <select name="changeURL" size="1" onchange="redirect()">
    		<option value="nopop,newpage1.html">New Page 1</option>
    		<option value="nopop,http://www.mydomain.com/newpage2.html">New Page 2</option>
    		<option value="nopop,/newpage3.html">New Page 3</option>
    		<option value="pop,newpage4.html">New Page 4</option>
    		<option value="pop,http://www.mydomain.com/newpage5.html">New Page 5</option>
    	  </select>
    	</form>
      </body>
    </html>
    It would be a minor change to display the URL as the selectable option and have this used literally as the target.


    Andy
    From the English nation to a US location.

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    
    function goToUrl(oSelect)
    {
    	var opt = oSelect.options[oSelect.selectedIndex], url = opt.value;
    	if (!url)
    		return false;
    	if (opt.className != 'popup')
    		location = url;
    	else
    	{
    		var popwidth = 760; //adjust
    		var popheight = 480; //adjust
    		var features = 'menubar,location,status,resizable,scrollbars'; //adjust
    		var w = 'width=' + popwidth + ',';
    		var h = 'height=' + popheight + ',';
    		var l = 'left=' + ((screen.availWidth - popwidth) / 2) + ',';
    		var t = 'top=' + ((screen.availHeight - popheight) / 3) + ',';
    		goToWin = open(url,'goToWin',w+h+l+t+features);
    		if (goToWin && !goToWin.closed)
    			goToWin.focus();
    	}
    	return false;
    }
    
    </script>
    </head>
    <body>
    <form>
    <select onchange="return goToUrl(this)">
    <option selected="selected" value="">- choose -</option>
    <option value="http://abcnews.go.com/">abc</option>
    <option value="http://www.nbc.com/nbc/NBC_News/">nbc</option>
    <option value="http://www.cbsnews.com/sections/home/main100.shtml">cbs</option>
    <option value="http://edition.cnn.com/">cnn</option>
    <option class="popup" value="http://news.bbc.co.uk/">bbc</option>
    </select>
    </form>
    </body>
    </html>
    ::: certified wild guess :::


Bookmarks

Posting Permissions

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