maintain HD aspect ratio in CSS

Advertisements
maintain HD aspect ratio in CSS

leaflet, with tabs!

Using Bootstrap tabs:

<ul class="nav nav-tabs">
 <li id="class-one" class="active top-tab"><a>Class 1</a></li>
 <li id="biggest" class="top-tab"><a>Biggest</a></li>
</ul>
 if(mymap !== undefined){
 mymap.invalidateSize(); //allow the map box to be removed and added without breaking
 }


$.getJSON('assets/data.json', function(data){
 landfillData = data;
 if (mymap == undefined && isClassOne){
 buildMap(landfillData);
 }

});

$('.top-tab').off().on('click', function(){
 
 console.log("CLICK");
 
 $('.top-tab').toggleClass('active');
 
 console.log(isClassOne);
 
 if(isClassOne && $(this).attr('id') == "class-one"){
 console.log("do nothing");
 } else {
 if($(this).attr('id') == "class-one"){
 isClassOne = true;
 console.log("is class one");
 buildMap(landfillData);
 } else if ($(this).attr('id') == "biggest"){
 isClassOne = false;
 console.log("isn't class one");
 clearMap();
 }
 }
 
 if (pymChild) {
 pymChild.sendHeight();
 }
 
 });

function clearMap(){
 $('#mapid').toggleClass('hidden');
 mymap.remove();
 console.log($('#mapid').hasClass('hidden'));
 }

function buildMap(data) {
 if (mymap !== undefined){
 clearMap();
 }

mymap = L.map('mapid').setView([31.9685988, -99.90181310000003], 5);

var landfills = data.CLASS1;
 var markers = [];

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
 id: 'mapbox.light',
 maxZoom: 9,
 minZoom: 4,
 accessToken: ''
 }).addTo(mymap);

mymap.scrollWheelZoom.disable();

/*add all the markers*/
 for (var x in landfills){
 var thisMarker = L.marker([landfills[x].lat, landfills[x].long])
 .bindPopup("<h2>" + landfills[x].facility_name + "</h2>" + "<p class='popup-county'>" + landfills[x].county + " County</p>")
 .openPopup();
 thisMarker.on('click', function(e) {
 console.log("you clicked a marker!");
 mymap.panTo([landfills[x].lat, landfills[x].long]);
 });
 markers.push(thisMarker);
 markers[x].addTo(mymap);

}


 }
leaflet, with tabs!

waypoint dialogue boxes

plugin: http://imakewebthings.com/waypoints/guides/getting-started/

HTML:

<p id="waypoint-1" class="waypoint">
 Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque ut neque. Suspendisse feugiat. In hac habitasse platea dictumst. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna.
 </p>

<p id="waypoint-2" class="waypoint">
 Phasellus gravida semper nisi. Phasellus gravida semper nisi. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Praesent turpis. Ut non enim eleifend felis pretium feugiat.
 </p>

<p>
 Nulla porta dolor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Fusce a quam. Ut non enim eleifend felis pretium feugiat.
 </p>

<p>
 Nulla porta dolor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Fusce a quam. Ut non enim eleifend felis pretium feugiat.
 </p>


HAMLET: To thine own self be true, and it must follow, as the night the day.

<br>

SHAKESPEARE: Brevity is the soul of wit.

SCSS:

.dialogue-box{
 @include clearfix;
 max-width:750px;
 }

.dialogue-right, .dialogue-left{
 &:hover{
 cursor:default;
 }
 }

.dialogue-right{
 display:inline-block;
 float:right;
 margin-right:1rem;
 background-color:rgb(255, 194, 0);
 padding:.2em;
 margin-bottom:.5em;
 }

.dialogue-left{
 display:inline-block;
 float:left;
 margin-left:3em;
 background-color:rgb(255, 194, 0);
 padding:.2em;
 margin-bottom:1rem;
 }

JS:

var waypoint = new Waypoint({
 element: document.getElementById('waypoint-1'),
 handler: function(direction) {
 console.log('Basic waypoint triggered');

revealOne();
 }
 });

var waypoint = new Waypoint({
 element: document.getElementById('waypoint-2'),
 handler: function(direction) {
 console.log('Basic waypoint triggered');

revealTwo();

}
 });
 function revealOne(){
 $('#show-one').show({
 duration: 800,
 easing:"swing"
 });
 }

function revealTwo(){
 $('#show-two').show({
 duration: 500,
 easing:"swing"
 });
 }
waypoint dialogue boxes