How to Add Enjoy Today to Ning Network

posted Mar 3, 2014, 11:06 AM by LoftnInja UNrealtor   [ updated Jul 5, 2014, 3:15 PM by Jaybird Farrow ]

Personalize Everyday On Your Network

How to add Enjoy Your Day to a Ning Network
I was thinking of a way to display today's date along with a personal welcome for members of any Ning community, with plans to eventually show weather in a member's location as well.  With a little javascript to pull the date and a tad of JSON to recognize a logged-in member, you can pull something like this off.

Enjoy Today Pen on Codepen


Add This to Custom Code Page

Add the following to the bottom portion of your custom code page in the Dashboard:
<script type="text/javascript">
function DateTime() {
    function getDaySuffix(a) {
        var b = "" + a,
            c = b.length,
            d = parseInt(b.substring(c-2, c-1)),
            e = parseInt(b.substring(c-1));
        if (c == 2 && d == 1) return "th";
        switch(e) {
            case 1:
                return "st";
                break;
            case 2:
                return "nd";
                break;
            case 3:
                return "rd";
                break;
            default:
                return "th";
                break;
        };
    };

    this.getDoY = function(a) {
        var b = new Date(a.getFullYear(),0,1);
    return Math.ceil((a - b) / 86400000);
    }

    this.date = arguments.length == 0 ? new Date() : new Date(arguments);

    this.weekdays = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
    this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
    this.daySuf = new Array( "st", "nd", "rd", "th" );

    this.day = {
        index: {
            week: "0" + this.date.getDay(),
            month: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()
        },
        name: this.weekdays[this.date.getDay()],
        of: {
            week: ((this.date.getDay() < 10) ? "0" + this.date.getDay() : this.date.getDay()) + getDaySuffix(this.date.getDay()),
            month: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate())
        }
    }

    this.month = {
        index: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
        name: this.months[this.date.getMonth()]
    };

    this.year = this.date.getFullYear();

    this.sym = {
        d: {
            d: this.date.getDate(),
            dd: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate(),
            ddd: this.weekdays[this.date.getDay()].substring(0, 3),
            dddd: this.weekdays[this.date.getDay()],
            ddddd: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate()),
            m: this.date.getMonth() + 1,
            mm: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
            mmm: this.months[this.date.getMonth()].substring(0, 3),
            mmmm: this.months[this.date.getMonth()],
            yy: (""+this.date.getFullYear()).substr(2, 2),
            yyyy: this.date.getFullYear()
        }
    };

    this.formats = {
        pretty: {
          a: this.sym.d.dddd,
          b: this.sym.d.ddddd,
          c: this.sym.d.mmmm,
          d: this.sym.d.yyyy
        }
    };
};



var dt = new DateTime();
x$('.day').text(dt.formats.pretty.a);
x$('.date').text(dt.formats.pretty.b);
x$('.month').text(dt.formats.pretty.c);
x$('.year').text(dt.formats.pretty.d);
</script>


Followed By:
<script>
x$('.thisusername').html(ning.CurrentProfile.fullName);
</script>
<script>
var sizeofthumb = 150;
x$('.userthumb').html('<img src="'+ ning.CurrentProfile.photoUrl +'&width='+ sizeofthumb +'">');
</script>


This second portion of the code will pull the User Name and Thumbnail avatar of the person logged in to the Ning Network

You can also Add this as Sidebar Widget

Add Enjoy Your Day as a Sidebar Widget on Ning



Add This to a HTML Text Box

Finally, you will add the following to a HTML Text box inside your Sites and Pages:
<header class="intro">Welcome Back,<div class="thisusername"></div>,enjoy your day.
<div class="userthumb"></div>
</header>
<div class="today">
<div class="today-piece  top  day"></div>
<div class="today-piece  middle  month"></div>
<div class="today-piece  middle  date"></div>
<div class="today-piece  bottom  year"></div>
</div>

Add This to Advanced CSS Section of Dashboard

/* Intro
   -------------------------------------------------- */

.intro {
    margin-bottom: 0.85em;
    border-radius: 0.25rem;
    padding: 1.25rem;
    font-size: 1.2em;
    font-weight: 200;
    text-align: left;
    background: rgba(255, 255, 255, 0.75);
}






/* Today
   -------------------------------------------------- */

.today-piece {
    border-radius: 0.25rem;
    padding: 1.6rem;
    font-size: 1.25em;
    text-align: center;
    background: white;
}






/* Piece positions
   -------------------------------------------------- */

.top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.middle {
    border-radius: 0;
}
.bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}






/* Piece categories
   -------------------------------------------------- */

.day,
.year {
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: white;
    background: #e94939;
}
.month {
    padding-top: 1.55rem;
    padding-bottom: 0;
    font-size: 1.2em;
    font-weight: 200;
}
.date {
    padding-top: 0;
    padding-bottom: 1.55rem;
    font-size: 1.7em;
    font-weight: 100;
}