www.webdeveloper.com
Page 2 of 4 FirstFirst 1234 LastLast
Results 16 to 30 of 58

Thread: Interested in a challenge?

  1. #16
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    @gil, Now I understand.

    In order to use this in the "real world," how would you write it to place it in a certain location (order) within a form?

  2. #17
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I agree with gil: JavaScript should add functionality to the form.
    A few changes:
    • The html is dependent on the DTD; make it a complete document.
    • Removing the 'Select Month' from the options is more logical, it's not a month, and by placing it in a fieldset-legend makes it a valid document.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>autoMonth</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function autoMonth() {
    var dt = new Date();
    var mo = dt.getMonth();
    var ary = [];
    for (var i=0; i<=12; i++)  {
    	ary[i] = document.f1.s1.options[i];
    	}
    var j = mo;
    for (i=0; i<=12; i++) {
    	document.f1.s1.options[i] = ary[j];
    	j = (mo + i) % 12;
    	}
    document.f1.s1.options[0].selected=true;
    }
    window.onload=autoMonth;
    </script>
    
    </head>
    <body>
    <form name="f1" action="#">
    <fieldset><legend>Select Month</legend>
     <select name="s1">
      <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>
    </fieldset>
    </form>
    </body>
    </html>

  3. #18
    Join Date
    Nov 2002
    Posts
    4,473
    Quote Originally Posted by Fang
    Removing the 'Select Month' from the options is more logical, it's not a month, and by placing it in a fieldset-legend makes it a valid document.
    I think it is there as a remnant of someone expecting an onchange event being added to the <SELECT> element. If that is not a requirement, then the legend is better. It would be a waste of space if js wasn't enabled (as would all of this actually ).

  4. #19
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by gil davis
    It would be a waste of space if js wasn't enabled (as would all of this actually ).
    Without JavaScript the options are still available.

  5. #20
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    I hadn't thought of it that way. Good point.

  6. #21
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Thanks, guys. They are all good and perform the intended task. I appreciate your help. I'll post here when I have another.

  7. #22
    Join Date
    Feb 2004
    Location
    London UK
    Posts
    248
    LeeU I learned JavaScript from javascript.internet.com if you have any goos scripts that need an update dump them here and I will have a look

  8. #23
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410
    Since I'm not yet comfortable with the 'createElement' and 'addChild' syntax,
    and because I obviously code a lot slower that others, here is my 2 cents.

    I added a little more so that someone could see the value of the selected box should the need arise.
    PHP Code:
    <html>
    <
    head>
    <
    title>autoMonth() JS function</title>
    <
    script type="text/javascript">
    // suggest putting following script into separate file named 'autoMonth.js'

    monthName = new Array 
      (
    'January','February','March','April','May','June','July','August','September','October','November','December');

    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 id='autoMonthSelect'><option value=\"\">Select Month");
      do {
          
    month date;
          if (
    month >= 12) { month month 12; }
          if (
    month 0) { month month 12; }
          
    date++;
          var 
    dateName monthName[month];
          
    month++;
          
    realJavaScriptMonth++;
          
    document.write ("<option value=\"" realJavaScriptMonth "\">" dateName "");
          
    realJavaScriptMonth++;
        }
      while (
    date future)
      
    document.write ("</select></form>");
    }

    // ------------------------------------------------------------------------------
    // Demonstration Action (Not required for function above to work):
    function autoMonth_Info(elem) {
      return 
    document.getElementById(elem).options[document.getElementById(elem).selectedIndex].text;
    }
    function 
    Demo() {
      
    document.writeln("<button onClick=document.getElementById('autoMonthSelected').value=autoMonth_Info('autoMonthSelect')>");
      
    document.writeln('Show Selected Value</button><br />');
      
    document.writeln("<input type='text' id='autoMonthSelected' value=''>");
    }
    // ------------------------------------------------------------------------------
    </script>
    </head>
    <body>
    <h1>autoMonth() JS funtion</h1>
    <script type="text/javascript">
      autoMonth();
      document.writeln('<p />Demonstraton:<br />');Demo();
    </script>
    </body>
    </html> 
    The 'challenge' is a neat idea.
    Simple. Useful. Full of alternative coding methods.
    Hopefully helpful for both the new and experienced coder.

  9. #24
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by JMRKER
    Since I'm not yet comfortable with the 'createElement' and 'addChild' syntax.
    Pity. You must be comfortable with DOM methods if you want to be a javascript coder. document.write() is an old fashioned and non-dynamic method. But if you want anything else than standard DOM, you should have used innerHTML instead of document.write()...

  10. #25
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Anything else, LeeU? (I missed the start for the first contest)

  11. #26
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Opinion

    Kor:
    Pity. You must be comfortable with DOM methods if you want to be a javascript coder. document.write() is an old fashioned and non-dynamic method. But if you want anything else than standard DOM, you should have used innerHTML instead of document.write()...
    Should I assume I should not submit to the challenge if I am not yet familiar with the latest and greatest javascript syntax?
    Sorry, I'm not sure the accepted method was up to this criteria either, but I will still appreciate the attempt!
    (I had not seen the code by 'gil Davis' at the time of my submission ... I might have recommended modications to that script instead).

    While I agree my solution may not be the best,
    perhaps you could show how to improve it further for me and other 'coders' that would like to learn better techniques using javascripts?
    While I cannot speak for 'LeeU', I believe this is what was in mind when invisioning the challenge concept in a forum presentation.

    IMHO: I still learn from the other methods submitted, and so long as they work with the "most compatible" number of browsers,
    I'll use (and modify) them until the challenge comes up with a 'better' script that stretches my level of expertise.
    I'm willing to accept criticism and corrections if they improve my understanding,
    but please show me the errors of my ways rather than a brief (incomplete sentences) remarks of your
    'Pity.' of my attempts to participate in this forum.

    jmrker
    www.nova.edu/~rumsey

  12. #27
    Join Date
    Nov 2002
    Posts
    4,473
    Quote Originally Posted by Fang
    Without JavaScript the options are still available.
    I can't get your page to work right. For some reason, it starts at February instead of April. IE 6 on XP SP2.

  13. #28
    Join Date
    Aug 2006
    Posts
    68
    looks like an interestign challenge

    i just tested it:

    in opera 9: there are about 4 extra blank elements left at the bottom
    - presumably 1 for each month we have changed the order of

    in ie7, it just removes january

    in firefox2, it works fine

    screenshots are attached

    ill have a look for the cause and ill post if i find it
    Attached Images Attached Images

  14. #29
    Join Date
    Aug 2006
    Posts
    68
    okay, this works in my 3 browsers, but it might be a bit hacky for some people:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>autoMonth</title>
    <script type="text/javascript" language="javascript">
    // Multiple onload function created by: Simon Willison
    // http://simon.incutio.com/archive/2004/05/26/addLoadEvent
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    // reorders a select element given by selectForm so that the first element is the current month and the rest of the months are in order
    function autoMonth(selectForm){
    	// get the month
    	var month = new Date().getMonth();
    	// store the options for reordering
    	var optionsArray = [];
    	// populate the optionArray
    	for (var o=0; o<12; o++){
    		optionsArray.push([selectForm.options[o].value, selectForm.options[o].text]);
    	}
    	
    	// set the options in the select list: starting at the current month
    	for (var m=month; m<month+12; m++){
    		// set this month as an option
    		var curOption = selectForm.options[m-month];
    		curOption.value = optionsArray[m%12][0];
    		curOption.text = optionsArray[m%12][1];
    	}
    	
    //	selectForm.options[0].value = optionsArray[month];
    	selectForm.options[0].selected=true;
    }
    
    // set the select form to reorder when the window loads
    addLoadEvent(function(){
    	autoMonth(document.getElementById("monthSelect"));
    });
    </script>
    
    </head>
    <body>
    <form name="f1" action="#">
    <fieldset><legend>Select Month</legend>
     <select name="s1" id="monthSelect">
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="3">April</option>
      <option value="4">May</option>
      <option value="5">June</option>
      <option value="6">July</option>
      <option value="7">August</option>
      <option value="8">September</option>
      <option value="9">October</option>
      <option value="10">November</option>
      <option value="11">December</option>
     </select>
    </fieldset>
    </form>
    </body>
    </html>
    also, it currently doesn't work if you have other attributes on your select tags

    looking to fix it, gimme a few minutes

    EDIT: What's with my code colouring?

  15. #30
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by s.b37
    EDIT: What's with my code colouring?
    You put your code inbetween HTML CODE tags and not just regular CODE tags.

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