www.webdeveloper.com
Results 1 to 15 of 58

Thread: Interested in a challenge?

Threaded View

  1. #13
    Join Date
    Dec 2006
    Location
    Scotland
    Posts
    450
    s.b37, got to say, that is an odd function you have for the onload. Wouldn't you be better doing it with event handlers? It would also not work if someone had set the onload attribute of the <body> tag.

    Either way, not being picky, just seemed a little odd to me.

    ok, I thought I would give this a shot, however I had to think of a different way to do it compared to everyone else's, so it's probably not the most ideal way (and certainly isn't accessible) however it is different and we all know kids that that's what matters! :P

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>:: w00t ::</title>
    	<script type="text/javascript">
    		function monthGenerator(parentContainer, selectName, shortDateFormat) {
    			// parentContainer can be either a string or an object reference (required)
    			// selectName is the name attribute of the element (optional - default="month")
    			// shortDateFormat will output using 3 characters or the full name( optional - default=false;)
    			this.months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    			this.date = new Date();
    			this.init = function(container, name, format) {
    				// allows the user to pass an object or an id string for the parent container
    				if (typeof(container)=="string") 
    					container = document.getElementById(container);
    				// ok, if the string id was wrong or the element was null, we need to return a null value;
    				if (!container) return false;	
    				// declare the variables required			
    				var oSelect = document.createElement("select"), oOption, monthText;
    				// as this is a form element, it will need a name for submission, if none is given a default is set
    				oSelect.name = name?name:"month";
    				// loop through the months and append the month <option>'s
    				for (var monthIndex=0;monthIndex<this.months.length;monthIndex++) {
    					oOption = document.createElement("option");
    					monthText = this.months[(this.date.getMonth()+monthIndex)%this.months.length];
    					if (shortDateFormat) monthText = monthText.substr(0,3);
    					oOption.value = monthText;
    					// this should just be the .text property but thanks to IE, I need to do it differently
    					oOption.appendChild(document.createTextNode(monthText));
    					oSelect.appendChild(oOption);
    					if (!monthIndex) oOption.selected = true;
    				}
    				// finally add the select into it's container.
    				container.appendChild(oSelect);
    				// return a reference to our select
    				return oSelect;
    			}
    			// call the function to generate the select, returning either a null value or our select.
    			return this.init(parentContainer, selectName, shortDateFormat);
    		}
    		
    		// I am declaring this as a global for this example, obviously it all depends on the scope of where you call it from.
    		// and in fact, if you are never going to reference the select again it's not needed at all.
    		var mySelect;
    		
    		window.onload = function() {
    			mySelect = monthGenerator("container","mySelect",true);
    		}
    	</script>
    	</head>
    	<body>
    		<!-- the container for the select -->
    		<div id="container"></div>
    		<!-- a simple example showing that the referece was returned from the generation function -->
    		<input type="button" onclick="alert(mySelect.innerHTML)" value="click me!"/>
    	</body>
    </html>
    Flame away! It's longer than other's (hell, that's what all the girls say!) but if you removed the comments it would be cut down a fair bit.

    One annoyance with IE is that you can't set the .text property when dynamically adding content into an <option>, so that's why I used the createTextNode method. I could as easily used .innerHTML too but the DOM method looked a little nicer..


    Edit: Tested on WinXP using FF2/IE6/Op9 without problems.
    Last edited by ricp; 04-15-2007 at 07:27 AM.

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