Created
March 26, 2012 23:36
-
-
Save smithcommajoseph/2210683 to your computer and use it in GitHub Desktop.
MTA-STYLE TRAIN STOP LIST
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mta = {}; //simple object w/ a few properties | |
mta.visibleStops = 10; //10 visible items/stops at time | |
mta.unformattedStops = []; // will hold the FULL array of stops | |
mta.formattedStops = []; // will hold the formatted array of stops | |
mta.sint = 0; //starting int | |
//wrapper function that calls everything else | |
mta.startTrain = function(){ | |
//format if not already formatted | |
if($('#next').children().length === 0){ | |
for(var i = 0; i < mta.unformattedStops.length; i++){ | |
mta.formattedStops[i] = mta.formatStop(mta.unformattedStops[i]); | |
} | |
} | |
mta.appendStops('forward'); | |
$("#next-b").bind("click", function(e){ | |
if((mta.unformattedStops.length - mta.sint) > mta.visibleStops ){ | |
mta.sint++; | |
mta.appendStops('forward'); | |
} | |
}); | |
$("#prev-b").bind("click", function(e){ | |
mta.appendStops('reverse'); | |
}); | |
}; | |
//creates a temp array and appends it to the dom | |
mta.appendStops = function(direction){ | |
if(direction != 'forward'){ | |
mta.formattedStops.reverse(); | |
mta.sint = 0; | |
} | |
var tmpArray = []; | |
tmpArray = mta.formattedStops.slice(mta.sint,mta.sint+mta.visibleStops); | |
//make sure we are working w/ a clean slate | |
$("#train-map .stops-wrap #next").empty(); | |
for(var i=0; i<mta.visibleStops; i++ ){ | |
$("#train-map #next").append(tmpArray[i]); | |
} | |
}; | |
//formats array objects | |
mta.formatStop = function(ob) { | |
var html = []; | |
html.push('<div class="stop">'); | |
html.push('<span class="location">'+ob.slocation+'<\/span>'); | |
html.push('<span class="access">'+ob.access+'<\/span>'); | |
html.push('<span class="transfer">'+ob.transfer+'<\/span>'); | |
html.push('<hr />'); | |
html.push('<\/div>'); | |
return html.join(' '); | |
}; | |
$(document).ready(function(){ | |
$.ajax({ | |
url: "http://www.twohard.com/dev_ex/mta_list_using_css_and_js/subwaystops.js", | |
dataType: "text", | |
success: function(data, textStatus){ | |
var train = JSON.parse(data); | |
mta.unformattedStops = train.Stops; | |
mta.startTrain(); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ "Stops" : [ | |
{ | |
"slocation" : "Astoria Ditmars Blvd", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "Astoria Blvd", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "30th Av", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "Broadway", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "36 Av", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "39 Av", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "21 St - Queensbridge", | |
"transfer" : [ "W" ], | |
"access" : "&" | |
}, | |
{ | |
"slocation" : "Lexington Av/59 St", | |
"transfer" : [ "6", "F", "R", "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "5th Av/59 St", | |
"transfer" : [ "R", "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "57 St/7Av", | |
"transfer" : [ "Q", "R", "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "49 St", | |
"transfer" : [ "1", "2", "3", "7", "A", "C", "E", "Q", "R", "W", "S" ], | |
"access" : "&" | |
}, | |
{ | |
"slocation" : "34 St - Herald Sq", | |
"transfer" : [ "B", "D", "F", "R", "V", "W", "PATH" ], | |
"access" : "&" | |
}, | |
{ | |
"slocation" : "14 St - Union Sq", | |
"transfer" : [ "4", "5", "6", "L", "Q", "R", "W" ], | |
"access" : "&" | |
}, | |
{ | |
"slocation" : "Canal St", | |
"transfer" : [ "4", "6", "J", "M", "Q", "R", "W", "Z" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "Rector St", | |
"transfer" : [ "W" ], | |
"access" : " " | |
}, | |
{ | |
"slocation" : "Whitehall Street", | |
"transfer" : [ "1" ], | |
"access" : " " | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="train-map"> | |
<div class="stops-wrap"> | |
<div id="next"></div> | |
<hr class="btm"/> | |
</div> | |
<button id="next-b">Next Stop</button> | |
<button id="prev-b">Other Direction</button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.grid_12{ | |
background-color:#000 | |
} | |
.grid_12 *{ | |
margin:0px; | |
padding:0px; | |
} | |
#train-map{ | |
display:block; | |
position:relative; | |
/*background-color:#000;*/ | |
width:940px; | |
height:250px; | |
margin:0 auto; | |
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; | |
} | |
.stops-wrap{ | |
display: block; | |
width:820px; | |
height:200px; | |
position:relative; | |
margin:0 auto; | |
} | |
.stop{ | |
font-size:12px; | |
display:block; | |
width:200px; | |
padding:1px 0 0 3px;; | |
background: #131313; | |
position: absolute; | |
bottom:70px; | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-46deg); | |
border:2px solid #000; | |
background-color: #0c0c0c; | |
} | |
.stop hr{ | |
display:block; | |
border:0px; | |
width:20px; | |
height:2px; | |
background-color:#aaa; | |
position:absolute; | |
top: 13px; | |
bottom: 6px; | |
left: -22px; | |
} | |
.stop:nth-child(1){ | |
left:0px; | |
border-color: red; | |
} | |
.stop:nth-child(1) hr{ | |
-webkit-transform: rotate(90deg); | |
-moz-transform: rotate(95deg); | |
top: 36px; | |
left: 1px; | |
width:12px | |
} | |
.stop:nth-child(2){ | |
left:70px; | |
} | |
.stop:nth-child(3){ | |
left:140px; | |
} | |
.stop:nth-child(4){ | |
left:210px; | |
} | |
.stop:nth-child(5){ | |
left:280px; | |
} | |
.stop:nth-child(6){ | |
left:350px; | |
} | |
.stop:nth-child(7){ | |
left:420px; | |
} | |
.stop:nth-child(8){ | |
left:490px; | |
} | |
.stop:nth-child(9){ | |
left:560px; | |
} | |
.stop:nth-child(10){ | |
left:630px; | |
border-color:#aaa | |
} | |
.location{ | |
color: #ffa62e; | |
float:left; | |
} | |
.access{ | |
color: red; | |
float:left; | |
padding-left:10px; | |
} | |
.transfer{ | |
color: #007516; | |
float:left; | |
clear:left; | |
} | |
#keys{ | |
display:block; | |
position:absolute; | |
bottom: 0; | |
} | |
hr.btm{ | |
position:absolute; | |
bottom: 0; | |
display:block; | |
border:0px; | |
width: 589px; | |
height:2px; | |
margin: 0; | |
background-color:#aaa; | |
left: 57px; | |
top: 199px; | |
} | |
.grid_12 button{ | |
display:block; | |
background-color: #1d7528; | |
color: #c1fba4; | |
border: 1px solid #00911c; | |
padding:4px; | |
margin: 16px 0 1px; | |
-webkit-border-radius: 9px; | |
-moz-border-radius: 9px; | |
position:relative; | |
} | |
.grid_12 button:hover{ | |
cursor: pointer; | |
} | |
.grid_12 button#next-b{ | |
float:left; | |
left:320px; | |
} | |
.grid_12 button#prev-b{ | |
float:right; | |
right:370px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment