React Scroll on Render
Starting point for creating JSFiddles with React. This uses React with Addons.
by latika12
HTML
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="target"></div>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
CSS
h3.month-name {
font-size: 16px;
color: $month-name;
display: block;
float: left;
margin-top: 13px;
width: 130px;
text-align: center;
margin-bottom: 150px;
}
.previous-month {
float: left;
margin-top: 13px;
margin-right: 10px;
}
.next-month {
float: left;
margin-top: 13px;
margin-left: 10px;
}
div {
width:400px;
height:200px;
}
JavaScript 1.7
/** @jsx React.DOM */
var Account = React.createClass({
getInitialState: function(){
return {monthName: this.getTheMonthName(), monthNumber: this.getTheMonthNumber(), fullYear: this.getTheFullYear()};
},
getTheMonthNumber: function() {
var today = new Date;
var thisMonth = today.getMonth();
return thisMonth;
},
getTheMonthName: function(monthNumber) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (monthNumber !== undefined) {
// monthNumber is set, just return the monthName
return monthNames[monthNumber];
}
var today = new Date;
var thisMonth = today.getMonth();
var thisMonthName = monthNames[thisMonth];
return thisMonthName;
},
getTheFullYear: function() {
var today = new Date;
var fullYear = today.getFullYear();
return fullYear;
},
prevMonth: function(monthNumber){
var prevMonthNumber = monthNumber - 1;
var calcYear = Math.floor(prevMonthNumber / 12);
if (prevMonthNumber < 0) {
prevMonthNumber = 0;
}
if (calcYear > 0) {
var prevFullYear = this.getTheFullYear() + calcYear;
} else{
var prevFullYear = this.getTheFullYear();
}
if (prevMonthNumber > 11) {
var calcPrevMonthNumber = prevMonthNumber % 12;
} else {
var calcPrevMonthNumber = prevMonthNumber;
}
var prevMonthName = this.getTheMonthName(calcPrevMonthNumber);
this.setState({monthName: prevMonthName, monthNumber: prevMonthNumber, fullYear: prevFullYear});
},
nextMonth: function(monthNumber){
var nextMonthNumber = monthNumber + 1;
var calcYear = Math.floor(nextMonthNumber / 12);
if (calcYear > 0) {
var...