www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 58

Thread: Interested in a challenge?

Hybrid View

  1. #1
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453

    Interested in a challenge?

    As I update the Web pages over at JavaScript Source, I am also trying to update some of the scripts. I know that some of the scripters here like a challenge so, being that I myself am still learning, here is what I am proposing:

    Using this thread, I would post a script from JSS that seems like it could be written more efficiency. Then one (or more) of the forum members could suggest a more efficient, workable way to write it and submit it here. I would add your name to the credits with a link to your Web site. I'm not talking about real complicated ones.

    By doing this, it helps to raise the quality of the scripts and gives you credit and a link in return. In addition. it also would help other forum members to learn different ways of coding.

    Do I have any takers? Suggestions, ideas, and comment are welcome.

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Sounds like fun to me. If I have time I'll probably bite on a few tidbits...
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Great! I'll wait for some others to reply before I start.

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    I wouldn't mind looking at a few and helping out.

  5. #5
    Join Date
    Aug 2004
    Posts
    140
    One of them is mine, and you're more than welcome to "update" it. It's a modified script of Ronnie's and since it's now 6+ years old it could prolly do with some revision.

  6. #6
    Join Date
    Jan 2005
    Posts
    3,067
    I will give it a go while online . . . although that isnt much these days.

  7. #7
    Join Date
    Feb 2005
    Location
    Tauranga
    Posts
    2,062
    Yep Good idea!

  8. #8
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Great! It looks like this could be fruitful. I appreciate the input.

    For starters, I have a pretty simple one (at least I think it's simple). This pulldown menu will automatically adjust the range of months so that the current month is at the top. The remaining months are placed in order after the current month. It seems like the script could be written better than using document.writeln. Maybe placing it in a DIV, perhaps. Well, anyway, have a go. Remember, just be sure to give me the name and link you want credit listed for (I'll try to keep track so you won't have to do it in the future). Also, feel free to add/change certain portions of these scripts. If they become completely different, I'll just post them as new instead of updated.

    Here is the script:
    Code:
    function autoMonth() {
      var time = new Date();
      var month = time.getMonth();
      var date = month - 12;
      var realJavaScriptMonth = month;
      var future = month + 0;
    
      month = month + 1; /* Compensate for "January" being "0" */
    
      document.writeln ("<form><select><option value=\"\">Select Month");
      do {
          month = date;
          if (month >= 12) {
          month = month - 12;
        }
          if (month < 0) {
          month = month + 12;
        }
        date++;
        var dateName ="";
    
        switch (month) {
          case 0:
            dateName = "January";
            break;
          case 1:
            dateName = "February";
            break;
          case 2:
            dateName = "March";
            break;
          case 3:
            dateName = "April";
            break;
          case 4:
            dateName = "May";
            break;
          case 5:
            dateName = "June";
            break;
          case 6:
            dateName = "July";
            break;
          case 7:
            dateName = "August";
            break;
          case 8:
            dateName = "September";
            break;
          case 9:
            dateName = "October";
            break;
          case 10:
            dateName = "November";
            break;
          case 11:
            dateName = "December";
            break
        }
    
        month++;
        realJavaScriptMonth++;
        document.write ("<option value=\"" + realJavaScriptMonth + "\">" + dateName + "");
        realJavaScriptMonth++;
        }
    
      while (date < future)
      document.write ("</select></form>");
    }
    And it's called by this (obviously):
    Code:
    autoMonth();

  9. #9
    Join Date
    Dec 2006
    Location
    Bethesda, MD
    Posts
    23

    A Sample Implementation

    Here's an implementation using the JavaScript DOM:

    Code:
    function autoMonth() {
    	var months = new Array("January", "February", "March", "April", "May", "June", "July",
    		"August", "September", "October", "November", "December");
    	var curMonth = (new Date()).getMonth();
    
    	// Create the form element.
    	var form = document.createElement("form");
    	document.body.appendChild(form);
    
    	// Create the dropdown.
    	var select = document.createElement("select");
    	form.appendChild(select);
    
    	// Add the "Select Month" default value.
    	select.options[0] = new Option("Select Month", "");
    
    	// Using j as an index to the select.options length,
    	// add months, starting with the current month.
    	var j = 1;
    	for (var i=curMonth; i<12; i++) {
    		select.options[j] = new Option(months[i], i);
    		j++;
    	}
    
    	// Add the remaining months, starting with January.
    	for (var i=0; i<curMonth; i++) {
    		select.options[j] = new Option(months[i], i);
    		j++;
    	}
    }
    You're right - you generally shouldn't use document.write (or document.writeln) - since you're just writing out raw HTML. The preferred method is to use the DOM, using createElement() calls as per above.

    Note also that you can just use a months names array, and access it via the index.

  10. #10
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Well just converting it to use DOM:
    Code:
    function autoMonth() {
      var time = new Date();
      var month = time.getMonth();
      var date = month - 12;
      var realJavaScriptMonth = month;
      var future = month + 0;
    
      month = month + 1; /* Compensate for "January" being "0" */
    
      var newForm = document.createElement("form");
      var newSelect = document.createElement("select");
      var newOpt = document.createElement("option");
      var newTxt = document.createTextNode("Select Month");
      newOpt.appendChild(newTxt);
      newSelect.appendChild(newOpt);
      do {
          month = date;
          if (month >= 12) {
          	month = month - 12;
    	   }
          if (month < 0) {      
          	month = month + 12;
        	}
          date++;
        	var dateName ="";
    
        switch (month) {
          case 0:
            dateName = "January";
            break;
          case 1:
            dateName = "February";
            break;
          case 2:
            dateName = "March";
            break;
          case 3:
            dateName = "April";
            break;
          case 4:
            dateName = "May";
            break;
          case 5:
            dateName = "June";
            break;
          case 6:
            dateName = "July";
            break;
          case 7:
            dateName = "August";
            break;
          case 8:
            dateName = "September";
            break;
          case 9:
            dateName = "October";
            break;
          case 10:
            dateName = "November";
            break;
          case 11:
            dateName = "December";
            break
        }
    
        month++;
        realJavaScriptMonth++;
    	 newOpt = document.createElement("option");
    	 newOpt.value=realJavaScriptMonth;
      	 var newTxt = document.createTextNode(dateName);
      	 newOpt.appendChild(newTxt);
    	 newSelect.appendChild(newOpt);
        realJavaScriptMonth++;
        }
      while (date < future)
    	newForm.appendChild(newSelect);
    	document.getElementsByTagName("body")[0].appendChild(newForm);
    }
    window.onload = autoMonth;
    54 68 65 42 65 61 72 4D 61 79

  11. #11
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    and then if we substitute an array for the switch..case:
    Code:
    function autoMonth() {
      var time = new Date();
      var month = time.getMonth();
      var date = month - 12;
      var realJavaScriptMonth = month;
      var future = month + 0;
    
      month = month + 1; /* Compensate for "January" being "0" */
      var dateName ="";
      var newForm = document.createElement("form");
      var newSelect = document.createElement("select");
      var newOpt = document.createElement("option");
      var newTxt = document.createTextNode("Select Month");
      newOpt.appendChild(newTxt);
      newSelect.appendChild(newOpt);
      var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
      do {
      	 month = date;
          if (month >= 12) {
          	month = month - 12;
    	   }
          if (month < 0) {      
          	month = month + 12;
        	}
      	 date++;
        realJavaScriptMonth++;
    	 newOpt = document.createElement("option");
    	 newOpt.value=realJavaScriptMonth;
      	 var newTxt = document.createTextNode(monthArray[month]);
      	 newOpt.appendChild(newTxt);
    	 newSelect.appendChild(newOpt);
        month++;    
        realJavaScriptMonth++;
        }
      while (date < future)
    	newForm.appendChild(newSelect);
    	document.getElementsByTagName("body")[0].appendChild(newForm);
    }
    window.onload = autoMonth;
    54 68 65 42 65 61 72 4D 61 79

  12. #12
    Join Date
    Nov 2002
    Posts
    4,473
    I didn't understand how it would be used, so I went in a different direction altogether.
    Code:
    <form name="f1">
     <select name="s1">
      <option value="">Select Month
      <option value="0">January
      <option value="1">February
      <option value="2">March
      <option value="3">April
      <option value="4">May
      <option value="5">June
      <option value="6">July
      <option value="7">August
      <option value="8">September
      <option value="9">October
      <option value="10">November
      <option value="11">December
     </select>
    </form>
    <script type="text/javascript">
    var dt = new Date();
    var mo = dt.getMonth();
    var ary = new Array();
    for (i=1; i<=12; i++)
      {ary[i-1] = document.f1.s1.options[i];}
    document.f1.s1.length = 1;
    j = mo;
    for (i=1; i<=12; i++)
      {document.f1.s1.options[i] = ary[j];
       j = (mo + i) % 12;}
    </script>
    Name: Gil Davis
    Link: http://gil.davis.home.att.net

  13. #13
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Thanks guys, nice work. Just a few questions/observations:

    @Bear: How would you implement it on the page? What you have locates it at the bottom. How could it be implemented within a form?

    @Chugster: This looks great. Nice and compact. Let me ask you also, how would you implement it on the page, without using the script tag to call the function? How could it be implemented within a form?

    @Gil: I'm not really sure what that one does.

  14. #14
    Join Date
    Nov 2002
    Posts
    4,473
    Quote Originally Posted by LeeU
    @Gil: I'm not really sure what that one does.
    It just takes what is there in the HTML and rearranges it so that the current month is first followed by the rest.

    The other codes are good examples of js creating html. Mine is an example of rearranging existing HTML. So if you already had the HTML code, you could just add the script (after the form tag, or in an onload handler) to reorder the months.

  15. #15
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Easiest way is to give the form an ID and use that instead of creating the form.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function autoMonth() {
      var time = new Date();
      var month = time.getMonth();
      var date = month - 12;
      var realJavaScriptMonth = month;
      var future = month + 0;
    
      month = month + 1; /* Compensate for "January" being "0" */
      var dateName ="";
      var newSelect = document.createElement("select");
      var newOpt = document.createElement("option");
      var newTxt = document.createTextNode("Select Month");
      newOpt.appendChild(newTxt);
      newSelect.appendChild(newOpt);
      var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
      do {
      	 month = date;
          if (month >= 12) {
          	month = month - 12;
    	   }
          if (month < 0) {      
          	month = month + 12;
        	}
      	 date++;
        realJavaScriptMonth++;
    	 newOpt = document.createElement("option");
    	 newOpt.value=realJavaScriptMonth;
      	 var newTxt = document.createTextNode(monthArray[month]);
      	 newOpt.appendChild(newTxt);
    	 newSelect.appendChild(newOpt);
        month++;    
        realJavaScriptMonth++;
        }
      while (date < future)
      document.getElementById("myForm").appendChild(newSelect);
    }
    window.onload = autoMonth;
    </script>
    </head>
    
    <body>
    <form id="myForm">
    </form>
    </body>
    </html>
    54 68 65 42 65 61 72 4D 61 79

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