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 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts

    How can I add the time to my Page Update?

    I am using the following code to show visitors when my page was updated last.

    It seems really cumbersome for what it does, too.

    Right now, it reads:

    Last updated on Monday, December 19, 2011

    I wanted to add code to it so that it reads the hours and is in this format:

    Last updated on Monday, December 19, 2011 at 8:44am

    How can I add the "at hh:mm am/pm" part? Or is there easier code that will do this? Thank you in advance.

    Code:
    function getLongDateString()
    {month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    	dayOfWeek = this.getDay();
    	day = dayNames[dayOfWeek];
    	dateOfMonth = this.getDate();
    monthNo = this.getMonth();
    	month = month[monthNo];
    year = this.getYear();
    	if (year < 2000)
    year = year + 1900;
    dateStr = day+", "+month+" "+dateOfMonth+", "+year;
    	return dateStr;
    }
    //register the  method in the class Date
    Date.prototype.getLongDateString=getLongDateString;
    
    function DocDate()
    { //return the document modification date (excl.time)
    //as a string
    	DateTimeStr = document.lastModified;
    	secOffset = Date.parse(DateTimeStr);
    	if (secOffset == 0 || secOffset == null) //Opera3.2
    			 dateStr = "Unknown";
    	else
    	{
    		aDate = new Date();
    		aDate.setTime(secOffset);
    		//use method defined above
    		datestr = aDate.getLongDateString();
    	}
    	return dateStr;
    }
    
    document.write("<left> Last updated on ");
    document.writeln(DocDate(),"</left>");

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Rick5150 View Post
    It seems really cumbersome for what it does, too.
    Too right! Ancient and deprecated code!

    Try this:-

    Code:
    <body onload = "getDateUpdated()">
    <span id = "lastMod"></span>
    
    <script type = "text/javascript">
    
    function getDateUpdated()  {
    
    var m = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var d = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var AMPM = "am";
    
    var thisDate = new Date(document.lastModified);
    var yr = thisDate.getFullYear();
    var mn = thisDate.getMonth();
    var dy = thisDate.getDay();
    var dt = thisDate.getDate();
    var hr = thisDate.getHours();
    var min = thisDate.getMinutes();
    if (hr >= 12) {AMPM="pm"}
    if (hr>12) {hr-=12}
    if (hr==0) {hr=12};
    if (min<10) {min="0"+min}
    
    var result = "Last updated on " + d[dy] +", " + m[mn] + " " + dt + ", " + yr + " at " + hr +":" + min + AMPM
    document.getElementById("lastMod").innerHTML = result;
    }
    
    </script>

    Label on Sainsbury's peanuts -- "Warning: contains nuts."
    Last edited by Philip M; 12-19-2011 at 03:51 PM. Reason: Corrected

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    That piece of code is pretty bad in that it thoroughly pollutes the global namespace. It's pretty old, too, as it uses the deprecated method getYear, and does some extra work for the almost 15 year old Opera 3.2.

    Generally speaking, you can't easily format dates in Javascript, like you can in PHP for instance, but it doesn't have to be as bad as that script of yours.

    Have a look at this piece of code:

    PHP Code:
    Date.prototype.monthNames = ['January''February''March''April''May''June''July''August''September''October''November''December'];
    Date.prototype.dayNames = ['Sunday''Monday''Tuesday''Wednesday''Thursday''Friday''Saturday'];
    Date.prototype.getLongDateString = function () {
        var 
    pad = function (number) {return number 10 '0' number String(number);};
        var 
    dateString this.dayNames[this.getDay()] + ', ' this.monthNames[this.getMonth()] + ' ' this.getDate() + ' ' this.getFullYear();
        return 
    dateString ' at ' + ((this.getHours() + 11) % 12 1) + ':' pad(this.getMinutes()) + (this.getHours() < 12 'am' 'pm');
    };

    alert('Last updated on ' + new Date(document.lastModified).getLongDateString()); 
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Philip M: Your logic for deciding between am and pm is off: The hour after noon is supposed to be pm, not am.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by venegal View Post
    Philip M: Your logic for deciding between am and pm is off: The hour after noon is supposed to be pm, not am.
    Oh dear! Corrected.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I am sorry - I am not used to new clean code. How do I call this script from the HTML page? I just overwrote my last_update.js file and that was a dismal failure.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Rick5150 View Post
    I am sorry - I am not used to new clean code. How do I call this script from the HTML page? I just overwrote my last_update.js file and that was a dismal failure.
    Just place the code I gave you in post #2 in your webpage. You can best place the script within the <head> section, or if you wish within an external .js file (without the <sciript> </script> tags). It is called by <body onload = "getDateUpdated()">

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I am sorry, I still do not understand. I placed the code between the <script></script> tags into a file called last_update.js

    The old code was placed as follows:

    Code:
    <h2>Welcome to FILMJACKETS.COM! (and pardon our ongoing construction!)</h2>
    		<p style="color:#D9B922"><em><script type="text/javascript" src="website/javascript/last_update.js"></script></em></p>
    And it worked fine. I expect that I have to do something with this code, but I am still not clear what.

    Code:
    <body onload = "getDateUpdated()">
    <span id = "lastMod"></span>
    I just don't want to mess it up any more than I already have...


    Here is the test page if that helps at all... http://www.ricktheriault.net/new/test.html
    Last edited by Rick5150; 12-19-2011 at 10:43 PM. Reason: Added hyperlink to the test page to help demonstrate.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Rick5150 View Post
    I am sorry, I still do not understand. I placed the code between the <script></script> tags into a file called last_update.js

    The old code was placed as follows:

    Code:
    <h2>Welcome to FILMJACKETS.COM! (and pardon our ongoing construction!)</h2>
    		<p style="color:#D9B922"><em><script type="text/javascript" src="website/javascript/last_update.js"></script></em></p>
    And it worked fine. I expect that I have to do something with this code, but I am still not clear what.

    Code:
    <body onload = "getDateUpdated()">
    <span id = "lastMod"></span>
    I just don't want to mess it up any more than I already have...
    I don't really see how to expand on the advice I gave you in post #7.
    Replace your existing external .js file with the script code given to you.
    The external .js file must not contain any HTML (<script>) tags. Just the code in between.

    Change your <body> tag to <body onload = "getDateUpdated()">

    Place <span id = "lastMod"></span> in you webage where you want the message to appear.

    Make sure that your .js file is uploaded to the right directory.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    It is not you. The advice is certainly clear, but the script does not work on the page that I want to use it on. I put the <body onload = "getDateUpdated()"> right into the page template and it appears on both pages if you view the source.

    This page has the <script type="text/javascript" src="website/javascript/last_update.js"></script><span id = "lastMod"> code and it works fine:

    http://www.ricktheriault.net/new/del...cket-page.html

    This page has the same code - copied and pasted from the page above where it works, but it does not show.

    http://www.ricktheriault.net/new/test.html

    If you view the page source code you can see that both pages reference the same javascript file location, so that is not the problem.

    • I tried removing the javascript scroller from the test.html page to see if there was interference, but could find none.
    • I tried removing the paragraph style.
    • I tried locating the code elsewhere.


    It is not the code or your instructions by any means. I have an issue elsewhere that is not allowing this to work, I guess. It nice clean code too and it needs to work on this one page. Figures...

  • #11
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by Rick5150 View Post
    It is not the code or your instructions by any means. I have an issue elsewhere that is not allowing this to work, I guess. It nice clean code too and it needs to work on this one page. Figures...
    Your problem is the fact that Philip's suggestion uses DOM level 0 event handling, which means every element can only have one event handler per event. Some other piece of code in that page overwrites that handler with another one, so that date code will never run.

    Since you were talking about clean code, here are a few things that clean code should not do:

    - It should not interfere with other code. That means it should not put anything into the global namespace (which your current code does), and it should not use DOM level 0 event handling (which your current code does too).

    - It should not require you to make changes to your HTML (apart form putting in a script tag, obviously), and it should not make any assumptions about your HTML and break if they are not met. In your current code you added an inline event to the body tag, which isn't great, and you put that script tag somewhere in the middle of the body (you didn't have to do that), which makes it harder to maintain. Also, if there isn't actually an element with id 'lastMod' in your HTML, the code will break, which isn't great either.

    If you want to do this cleanly, it should absolutely suffice to put the script into the head, without having to do anything else. If some element has the id 'lastMod', it should do its thing without interfering with other code, if not, it shouldn't break anything.

    Here's how such a piece of code could look like (based on the example I gave you earlier):

    PHP Code:
    Date.prototype.monthNames = ['January''February''March''April''May''June''July''August''September''October''November''December']; 
    Date.prototype.dayNames = ['Sunday''Monday''Tuesday''Wednesday''Thursday''Friday''Saturday']; 
    Date.prototype.getLongDateString = function () { 
        var 
    pad = function (number) {return number 10 '0' number String(number);}; 
        var 
    dateString this.dayNames[this.getDay()] + ', ' this.monthNames[this.getMonth()] + ' ' this.getDate() + ' ' this.getFullYear(); 
        return 
    dateString ' at ' + ((this.getHours() + 11) % 12 1) + ':' pad(this.getMinutes()) + (this.getHours() < 12 'am' 'pm'); 
    };

    (function () {

        function 
    addLastModifiedDate() {
            var 
    lastModEl document.getElementById('lastMod');
            if ( ! 
    lastModEl) return;
            
    lastModEl.innerHTML 'Last updated on ' + new Date(document.lastModified).getLongDateString();
        }

        if (
    window.addEventListener) {
            
    window.addEventListener('load'addLastModifiedDatefalse);   
        } else if (
    window.attachEvent) {
            
    window.attachEvent('onload'addLastModifiedDate);
        }

    }()); 
    Edit: Btw, the script that messes yours up by using DOM level 0 event handling is slider_images.js. It's bad that it does that, but as long as it's the only piece of code that does it, and you keep your own code clean, it won't hurt you.
    Last edited by venegal; 12-20-2011 at 12:46 PM.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    Rick5150 (12-20-2011)

  • #12
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Absolutely brilliant. I am new to the forum and have zero knowledge of javescript (as you can see). This is a big help. Now it looks as if I need help with the image scroller? The code was free, and I was so happy I was able to figure it out as I mainly work with HTML and I am just starting to learn CSS. This is all Greek to me and I really appreciate all of the help from everyone here.


  •  

    Posting Permissions

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