Timesago with jQuery

Posted on 20 January 2012, 16:56, by Engin Aygen, under General.

jquery.timesago-1.0.js

(function( $ ) {
    $.fn.timesago = function(o){

        var settings = $.extend({
            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            firstday: 0,
            refresh: 1,
            hoursago: '%d hours ago',
            minutesago: '%d minutes ago',
            secondsago: '%d seconds ago',
        }, o);

        this.each(function(){

            var that = $(this);
            var timestamp = that.html();

            var d1 = new Date(timestamp*1000);
            var d1Year = d1.getFullYear();
            var d1Month = d1.getMonth();
            var d1MonthDay = d1.getDate();
            var d1WeekDay = d1.getDay();
            var d1Hours = d1.getHours();
            var d1Minutes = d1.getMinutes();
            var d1Seconds = d1.getSeconds();
            var d1Time = d1.getTime();

            var calculate = function () {

                var d2 = new Date();
                var d2Year = d2.getFullYear();
                var d2Month = d2.getMonth();
                var d2MonthDay = d2.getDate();
                var d2WeekDay = d2.getDay();
                var d2WeekFirst = d2MonthDay - d2WeekDay + settings.firstday;
                var d2Hours = d2.getHours();
                var d2Minutes = d2.getMinutes();
                var d2Seconds = d2.getSeconds();
                var d2Time = d2.getTime();

                var leftSeconds = Math.floor((d2Time-d1Time)/1000);
                var leftMinutes = Math.floor(leftSeconds/60);
                var leftHours = Math.floor(leftMinutes/60);

                if (d2Year > d1Year) {
                    that.html(
                        d1MonthDay +' '+
                        settings.months[d1Month] +' '+
                        d1Year +' '+
                        settings.days[d1WeekDay] +' '+
                        pad2(d1Hours) +':'+ pad2(d1Minutes));
                    return;
                }

                if (d2Month > d1Month || d2WeekFirst > d1MonthDay) {
                    that.html(
                        d1MonthDay +' '+
                        settings.months[d1Month] +' '+
                        settings.days[d1WeekDay] +' '+
                        pad2(d1Hours) +':'+ pad2(d1Minutes));
                    return;
                }

                if (d2MonthDay > d1MonthDay) {
                    that.html(
                        settings.days[d1WeekDay] +' '+
                        pad2(d1Hours) +':'+ pad2(d1Minutes));
                    return;
                }

                if (leftHours > 0) {
                    that.html(settings.hoursago.replace('%d', leftHours));
                    return;
                }

                if (leftMinutes > 0) {
                    that.html(settings.minutesago.replace('%d', leftMinutes));
                    return;
                }

                if (leftSeconds > 0) {
                    that.html(settings.secondsago.replace('%d', leftSeconds));
                    return;
                }
            }

            that.attr('title',
                d1MonthDay +' '+
                settings.months[d1Month] +' '+
                d1Year +' '+
                settings.days[d1WeekDay] +' '+
                d1Hours +':'+ pad2(d1Minutes) +':'+ pad2(d1Seconds));

            calculate();

            setInterval(function() {
                calculate(); }, 1000*settings.refresh);

        });

        function pad2(number) {
             return (number < 10 ? '0' : '') + number
        }
    }
})( jQuery );

test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-timesago-1.0.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.timestamp').timesago({
                /*
                months: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
                days: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
                firstday: 1,
                refresh: 1,
                hoursago: '%d saat önce',
                minutesago: '%d dakika önce',
                secondsago: '%d saniye önce',
                */
            });
        });
    </script>
  </head>
  <body>
  <div class='timestamp'><?php echo time(); ?></div>
  <div class='timestamp'><?php echo time()-(60); ?></div>
  <div class='timestamp'><?php echo time()-(60*60); ?></div>
  <div class='timestamp'><?php echo time()-(60*60*24); ?></div>
  <div class='timestamp'><?php echo time()-(60*60*24*7); ?></div>
  <div class='timestamp'>1326329605</div>
  <div class='timestamp'>0</div>
  </body>
</html>
No Comments »

Auto growing textarea with jQuery

Posted on 30 December 2011, 14:44, by Engin Aygen, under Javascript, jQuery.

This is the tutorial about the smoothest auto-growing textarea I have developed.
To see a working example please click here.

autogrow.css

textarea.autogrow {
    margin: 0;
    padding: 0;
    border: 0;
    resize: none;
    outline: none;
    overflow-y: hidden;
    background-color: transparent;
}
div.autogrow {
    background-color: #fff;
    margin: 5px;
    padding: 5px;
    border: 1px solid #ddd;
}

jquery.autogrow-1.0.js

(function( $ ) {
    $.fn.autogrow = function(){
        this.each(function(){
            var textarea = $(this);
            var height = textarea.height();
            var width = textarea.width();
            var wrapper = $('<div/>')
                .addClass('autogrow')
                .width(width)
                .bind('click', function(){textarea.focus()});
            textarea
                .wrap(wrapper)
                .addClass('autogrow')
                .attr('autocomplete', 'off')
                .bind('focus keyup keydown change input scroll', function(){
                    textarea.height(0);
                    textarea.height(Math.max(height, this.scrollHeight - $(this).outerHeight()));
                    wrapper.height(textarea.height());
                });
        });
    }
})( jQuery );

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <link rel="stylesheet" href="autogrow.css" type="text/css" media="all"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-autogrow-1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('textarea').autogrow();
        });
    </script>
  </head>
  <body>
    <textarea></textarea>
    <p>Write, copy or paste something into the textarea above.</p>
  </body>
</html>
Tags: , , , , ,
No Comments »