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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2009
    Location
    SLC, UT
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Select Menu (onClick simulation)

    I am trying to simulate a simple onClick function with a select menu. The below code does not work but explains what I am trying to achieve.

    Code:
    <select name="get_quote" id="get_quote">
    <option selected id="tab1" onClick="javascript:show_tab('tab1')">Yes</option>
    <option id="tab2" onClick="javascript:show_tab('tab2')">No</option>
    </select>
    Is there anyway to achieve this by using the onChange function with the select tag?

    Here is the javascript function:

    Code:
    <script language="JavaScript">
    last_tab = 'tab1';
    function show(layerName) {
    document.getElementById(layerName).style.display = '';
    }
    
    function hide(layerName) {
    document.getElementById(layerName).style.display = 'none';
    }
    function show_tab(tab_name) {
    document.getElementById(last_tab).className = 'tab';
    var curr = document.getElementById(tab_name);
    curr.className='tab_hover';
    hide(last_tab+'_info');
    show(tab_name+'_info');
    last_tab=tab_name;
    }
    </script>
    Thanks,
    Ian
    Last edited by sternTOOL; 01-20-2009 at 11:20 PM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by sternTOOL View Post
    Is there anyway to achieve this by using the onChange function with the select tag?
    I presume that you refer to the onchange attribute of the select element.

    I don’t know if this works for you, but the following code utilizes the onchange event without using the HTML attribute:

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    
    <html lang="en-Latn">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta http-equiv="Content-Script-Type" content="application/ecmascript">
    		<title>Demo</title>
    		<style type="text/css" media="all">
    			* { margin: 0; padding: 0; }
    			html { background: white; color: black; }
    			div { margin: 1em; }
    			select { font: inherit; } /* Mozilla Firefox */
    			p { margin: 1em; padding: 1em; line-height: 2em; }
    			*#tab1 { background: lightblue; }
    			*#tab2 { background: pink; }
    			*.tab.active { display: block; }
    		</style>
    		<script type="text/ecmascript">
    			function script() {
    				var d = document;
    				var styleSheet1 = d.styleSheets.item(0);
    				var selectElement = d.getElementById("selectTab");
    				var activeTab = d.getElementById("tab1");
    				var classAttr = "class";
    				if (d.implementation.hasFeature("CSS", "2.0") && d.implementation.hasFeature("Events", "2.0")) {
    					styleSheet1.insertRule("*.tab { display: none; }", styleSheet1.cssRules.length);
    					selectElement.addEventListener("change", setNewActiveTab, false);
    				}
    				else { // Windows Internet Explorer
    					styleSheet1.addRule("*.tab", "display: none;", -1);
    					classAttr = "className";
    					selectElement.attachEvent("onchange", setNewActiveTab);
    				}
    				function setNewActiveTab() {
    					activeTab.setAttribute(classAttr, activeTab.getAttribute(classAttr).replace(/ active/, ""));
    					activeTab = d.getElementById(selectElement.value);
    					activeTab.setAttribute(classAttr, activeTab.getAttribute(classAttr) + " active");
    				}
    			}
    		</script>
    
    	</head>
    	<body onload="script();">
    
    		<div>
    			<label for="selectTab">Select Tab</label>
    			<select id="selectTab">
    				<option value="tab1" selected="selected">1</option>
    				<option value="tab2">2</option>
    			</select>
    		</div>
    		
    		<p id="tab1" class="tab active">This is the first “tab”.</p>
    		<p id="tab2" class="tab">This is the second “tab”.</p>
    
    	</body>
    </html>
    Verified to work in Mozilla Firefox 3.0.5, Opera 9.63, Safari 3.2.1 (525.27.1), and Windows Internet Explorer 7.0.6001.18000.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Jan 2009
    Location
    SLC, UT
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This works great, but is there anyway to work a third tab into this function?

    There are some areas on my site where I will need this to cycle through 3 tabs instead of 2.

    Thanks,
    Ian

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by sternTOOL View Post
    This works great, but is there anyway to work a third tab into this function?
    Yes, add a new option element referencing the third tab.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    sternTOOL (01-22-2009)

  • #5
    New Coder
    Join Date
    Jan 2009
    Location
    SLC, UT
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried that originally, but looking over my code I found a typo on the third option (I'm an idiot). Works perfectly!

    Thank you for all of your help.
    -Ian

  • #6
    New Coder
    Join Date
    Jan 2009
    Location
    SLC, UT
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi again, I've been using this code for a while now and it works great. The only problem is that in Internet Explorer the <body onload="tabs();"> takes a little too long to load which results in the hidden tabs being visible until all of the images on the page have finished loading. Granted it is only for about a second or two but still is a problem.

    I have experimented using window.onload function but I am not very smart when it comes to javascript.
    Code:
    <script language="JavaScript" type="text/javascript">
    
    window.onload = tabs(); {
        // load tab function on window load
    }
    </script>
    This ultimately worked but created a javascript error " 'null' is null or not an object " and points to line 39.

    here is line 39 from the script:
    Code:
    selectElement.attachEvent("onchange", setNewActiveTab);
    What am I doing wrong here? Can I achieve this without the javascript error?

    Thanks in advance - sorry I'm stupid

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    interesting post. very informative.




  •  

    Tags for this Thread

    Posting Permissions

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