Originally implemented as "Twickertapes" and utilizing the original Twitter API (v2.0), this app is merely a demonstration of what can be done with a little text input, and API (the Google News API) and scrolling text and ASCII art.
You can find it on the web here: https://tickertapes.net
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<div>
<canvas id="myChart" style='background-color:darkgray; width:100%; height:100%;'></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['16_Qtr1', '16_Qtr2', '16_Qtr3', '16_Qtr4', '17_Qtr1', '17_Qtr2', '17_Qtr3', '17_Qtr4', '18_Qtr1', '18_Qtr2', '18_Qtr3', '18_Qtr4', '19_Qtr1', '19_Qtr2', '19_Qtr3', '19_Qtr4', '20_Qtr1', '20_Qtr2', '20_tr3', '20_Qtr4', '21_Qtr1', '21_Qtr2', '21_Qtr3', '21_Qtr4','22_Qtr1', '22_Qtr2', '22_Qtr3', '22_Qtr4', '23_Qtr1', '23_Qtr2', '23_tr3', '23_Qtr4'],
datasets: [{
label: 'Some random quartley demo data..',
backgroundColor: 'black',
borderColor: 'lime',
data: [40.2, 72.88, 47.1, 22, 54.43, 52.18, 17.1, 52, 67.2, 54.88, 64.1, 78, 67.2, 55.88, 58.1, 57, 50.2, 52.88, 57.1, 62, 74.43, 62.18, 67.1, 72, 77.2, 74.88, 74.1, 78, 77.2, 75.88, 78.1, 77, 70.2, 72.88, 77.1, 62, 64.43, 62.18, 67.1, 72, 67.2, 54.88, 44.1, 28, 27.2, 25.88, 38.1, 37, 40.2, 42.88, 44.1, 52, 54.43, 52.18, 67.1, 82, 87.2, 84.88, 84.1, 88, 87.2, 95.88, 108.1, 127]
}]
},
"options": {
"legend": {"position": "bottom"}
}
});
</script>
</body>
</html>
namespace ExtRS
{
public class SSRSHttpService
{
const string ssrsApiURI = "https://localhost/reports/api/v2.0";
HttpClient client = new HttpClient(new HttpClientHandler() { UseDefaultCredentials = true });
public async Task<GenericItem> GetReportAsync(Guid id)
{
client.BaseAddress = new Uri(ssrsApiURI + string.Format("/reports({0})", id));
var response = await client.GetAsync(client.BaseAddress);
var odata = response.Content.ReadAsStringAsync().Result;
return JsonConvert.DeserializeObject<GenericItem>(odata);
}
}
} using Newtonsoft.Json;
using System.Collections.Generic;
namespace ExtRS
{
public class GenericItem
{
[JsonProperty("@odata.context")]
public string ODataContext { get; set; }
[JsonProperty("Id")]
public string Id { get; set; }
[JsonProperty("Name")]
public string Name { get; set; }
[JsonProperty("Path")]
public string Path { get; set; }
}
}
using System;
using System.Web.Mvc;
using System.Threading.Tasks;
using ExtRS;
namespace Daylite.Controllers
{
public class ReportsController : Controller
{
public SSRSHttpService service = new SSRSHttpService();
public async Task<ViewResult> GetReportsAsync()
{
return View("Index", await service.GetReportsAsync());
}
public async Task<ViewResult> GetFoldersAsync()
{
APIGenericItemsResponse result = await service.GetFoldersAsync();
return View("Index", result);
}
public async Task<ViewResult> GetReportAsync(Guid id)
{
GenericItem result = await service.GetReportAsync(id);
return View("Index", result);
}
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Effects - Effect demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler {
width: 500px;
height: 200px;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
width: 240px;
height: 170px;
padding: 0.4em;
position: relative;
}
#effect h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
.ui-effects-transfer {
border: 2px dotted gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $("#effectTypes").val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if (selectedEffect === "scale") {
options = { percent: 50 };
} else if (selectedEffect === "transfer") {
options = { to: "#button", className: "ui-effects-transfer" };
} else if (selectedEffect === "size") {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$("#effect").effect(selectedEffect, options, 500, callback);
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function () {
$("#effect").removeAttr("style").hide().fadeIn();
}, 1000);
};
// Set effect from select menu value
$("#button").on("click", function () {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toggler" style="margin-top:200px;">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
</body>
</html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script>
$( document ).ready(function() {
myDiv = document.querySelector('#myDiv')
$("#buttonBounce").on("click", function () {
removeAllClasses();
myDiv.classList.add('animated', 'bounce')
});
$("#buttonSwing").on("click", function () {
removeAllClasses();
myDiv.classList.add('animated', 'swing')
});
$("#buttonWobble").on("click", function () {
removeAllClasses();
myDiv.classList.add('animated', 'wobble')
});
$("#buttonTada").on("click", function () {
removeAllClasses();
myDiv.classList.add('animated', 'tada')
});
$("#buttonBounceOut").on("click", function () {
removeAllClasses();
myDiv.classList.add('animated', 'bounceOutLeft')
});
function removeAllClasses(){
myDiv.classList.remove('animated', 'bounce', 'wobble', 'bounceOutLeft', 'tada', 'swing');
}
});
</script>
</head>
<body style="background:#000000;">
<div id="myDiv" style="margin-top:100px; margin-left:300px; width:250px; background:aqua; font-weight:bold; font-family:Arial; border: 2px solid lime; padding: 10px; border-radius: 25px;">~Something to animate~</h1>
<br/><br/>
<input type="button" id="buttonBounce" class="ui-state-default ui-corner-all" value="Bounce" />
</br><br/>
<input type="button" id="buttonTada" class="ui-state-default ui-corner-all" value="Tada" />
</br><br/>
<input type="button" id="buttonSwing" class="ui-state-default ui-corner-all" value="Swing" />
</br><br/>
<input type="button" id="buttonWobble" class="ui-state-default ui-corner-all" value="Wobble" />
</br><br/>
<input type="button" id="buttonBounceOut" class="ui-state-default ui-corner-all" value="Bounce Out" />
</br><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
Debug/Inspect...
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'),
{center: new google.maps.LatLng(43.0589, -88.0988), zoom: 11, mapTypeId: 'hybrid'});
var icons = {
bucks: {
icon: 'bucks.png'
},
brewers: {
icon: 'brewers.png'
},
panthers: {
icon: 'panthers.jpg'
}
};
var features = [
{
position: new google.maps.LatLng(43.0280, -87.9712),
type: 'brewers'
}, {
position: new google.maps.LatLng(42.9930, -87.9210),
type: 'panthers'
}, {
position: new google.maps.LatLng(43.0000, -87.8379),
type: 'bucks'
}
];
// Create markers.
for (var i = 0; i < features.length; i++) {
var marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map
});
};
//Must have API with access to the Places API to get marker click details without much manual code
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&callback=initMap">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: black;
}
#header {
background-color: green;
padding: 30px 30px;
color: lightblue;
text-align: left;
font-size: 74px;
font-weight: bold;
position: fixed;
top: 0;
margin-bottom:5%;
width: 100%;
transition: 0.4s;
}
</style>
</head>
<body>
<div id="header">Hello.</div>
<div style="margin-top:190px; padding:15px 15px 250px 15px;">
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br />
The end.
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var hdr = document.getElementById("header")
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
hdr.style.fontSize = "30px";
hdr.style.height = "2%";
} else {
hdr.style.fontSize = "74px";
hdr.style.height = "10%";
}
}
</script>
</body>
</html>
public ActionResult GetTwickr(string handle = "business")
{
// Set your own keys and screen name
var oAuthConsumerKey = "XXXXXXXXXXXXX"; // "API key";
var oAuthConsumerSecret = "XXXXXXXXXXXXXXXXXXXXX"; // "API secret key";
var oAuthUrl = "https://api.twitter.com/oauth2/token";
var screenname = "@" + handle; // default Twitter display current status
// Authenticate
var authHeaderFormat = "Basic {0}";
var authHeader = string.Format(authHeaderFormat,
Convert.ToBase64String(Encoding.UTF8.GetBytes(Uri.EscapeDataString(oAuthConsumerKey) + ":" +
Uri.EscapeDataString((oAuthConsumerSecret)))
));
var postBody = "grant_type=client_credentials";
HttpWebRequest authRequest = (HttpWebRequest)WebRequest.Create(oAuthUrl);
authRequest.Headers.Add("Authorization", authHeader);
authRequest.Method = "POST";
authRequest.ContentType = "application/x-www-form-urlencoded;charset=UTF-8";
authRequest.AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate;
using (Stream stream = authRequest.GetRequestStream())
{
byte[] content = ASCIIEncoding.ASCII.GetBytes(postBody);
stream.Write(content, 0, content.Length);
}
authRequest.Headers.Add("Accept-Encoding", "gzip");
WebResponse authResponse = authRequest.GetResponse();
// deserialize into an object
TwitAuthenticateResponse twitAuthResponse;
using (authResponse)
{
using (var reader = new StreamReader(authResponse.GetResponseStream()))
{
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
var objectText = reader.ReadToEnd();
twitAuthResponse = JsonConvert.DeserializeObject<TwitAuthenticateResponse>(objectText);
}
}
try
{
// Get timeline info
var timelineFormat = "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name={0}&include_rts=1&exclude_replies=1&count=5";
var timelineUrl = string.Format(timelineFormat, screenname);
HttpWebRequest timeLineRequest = (HttpWebRequest)WebRequest.Create(timelineUrl);
var timelineHeaderFormat = "{0} {1}";
timeLineRequest.Headers.Add("Authorization", string.Format(timelineHeaderFormat, twitAuthResponse.token_type, twitAuthResponse.access_token));
timeLineRequest.Method = "GET";
WebResponse timeLineResponse = timeLineRequest.GetResponse();
var timeLineJson = string.Empty;
string scrolltxt = string.Empty;
using (timeLineResponse)
{
using (var reader = new StreamReader(timeLineResponse.GetResponseStream()))
{
timeLineJson = reader.ReadToEnd();
}
}
// deserialize into an object
dynamic obj = JsonConvert.DeserializeObject(timeLineJson);
foreach (var r in obj.Root)
{
scrolltxt += " ***** " + r.text;
}
var model = new LoggedInUserTimelineViewModel { TimelineContent = scrolltxt, Handle = handle };
return View("TwickrMain", model);
}
catch (Exception e) { }
return View("TwickrMain");
} 
<html>
<head>
<style>
body {height: 600px; background-color: #999}
#line-3 {
position:absolute;
width:100%;
left:20px;
top:0px;
}
#line-4 {
position:absolute;
width:100%;
left:30px;
top:0px;
}
#line-5 {
position:absolute;
width:100%;
left:40px;
top:0px;
}
#line-6 {
position:absolute;
width:100%;
left:55px;
top:0px;
}
#line-7 {
position:absolute;
width:100%;
left:70px;
top:0px;
}
#line-8 {
position:absolute;
width:100%;
left:85px;
top:0px;
}
#line-9 {
position:absolute;
width:100%;
left:100px;
top:0px;
}
#line-10 {
position:absolute;
width:100%;
left:115px;
top:0px;
}
#line-11 {
position:absolute;
width:100%;
left:130px;
top:0px;
}
#line-12 {
position:absolute;
width:100%;
left:145px;
top:0px;
}
#line-13 {
position:absolute;
width:100%;
left:160px;
top:0px;
}
#line-14 {
position:absolute;
width:100%;
left:175px;
top:0px;
}
#line-15 {
position:absolute;
width:100%;
left:195px;
top:0px;
}
#line-16 {
position:absolute;
width:100%;
left:210px;
top:0px;
}
</style>
<script>
$(document).ready(function(){
var bodyHeight = $('body').height();
var footerOffsetTop = $('#line-3').offset().top;
var topToBottom = bodyHeight -footerOffsetTop;
$('#line-3').css({top:'auto',bottom:topToBottom});
$("#line-3").delay(100).animate({
bottom: '100px',
}, 2200);
$('#line-4').css({top:'auto',bottom:topToBottom});
$("#line-4").delay(108).animate({
bottom: '100px',
}, 2200);
$('#line-5').css({top:'auto',bottom:topToBottom});
$("#line-5").delay(145).animate({
bottom: '100px',
}, 2200);
$('#line-6').css({top:'auto',bottom:topToBottom});
$("#line-6").delay(119).animate({
bottom: '100px',
}, 2200);
$('#line-7').css({top:'auto',bottom:topToBottom});
$("#line-7").delay(115).animate({
bottom: '100px',
}, 2200);
$('#line-8').css({top:'auto',bottom:topToBottom});
$("#line-8").delay(176).animate({
bottom: '100px',
}, 2100);
$('#line-9').css({top:'auto',bottom:topToBottom});
$("#line-9").delay(13).animate({
bottom: '100px',
}, 2200);
$('#line-10').css({top:'auto',bottom:topToBottom});
$("#line-10").delay(12).animate({
bottom: '100px',
}, 2200);
$('#line-11').css({top:'auto',bottom:topToBottom});
$("#line-11").delay(11).animate({
bottom: '100px',
}, 2000);
$('#line-12').css({top:'auto',bottom:topToBottom});
$("#line-12").delay(10).animate({
bottom: '100px',
}, 2100);
$('#line-13').css({top:'auto',bottom:topToBottom});
$("#line-13").delay(11).animate({
bottom: '100px',
}, 600);
$('#line-14').css({top:'auto',bottom:topToBottom});
$("#line-14").delay(14).animate({
bottom: '100px',
}, 700);
$('#line-15').css({top:'auto',bottom:topToBottom});
$("#line-15").delay(14).animate({
bottom: '100px',
}, 800);
$('#line-16').css({top:'auto',bottom:topToBottom});
$("#line-16").delay(24).animate({
bottom: '100px',
}, 900);
})
</script>
</head>
<body>
<div id="line-3">+</div>
<div id="line-4">+</div>
<div id="line-5">+</div>
<div id="line-6">+</div>
<div id="line-7">+</div>
<div id="line-8">+</div>
<div id="line-9">+</div>
<div id="line-10">+</div>
<div id="line-11">+</div>
<div id="line-12">+</div>
<div id="line-13">+</div>
<div id="line-14">+</div>
<div id="line-15">+</div>
<div id="line-16">+</div>
</body>
</html>
<html>
<head>
<style>
body {height: 600px; background-color: #000000; color:lime;}
div {
position:absolute;
top:0px;
width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var base = $('#base');
var topToBottom = $('body').height();
for(i=0; i<83; i++){
base.append('<div id=\"line-'+i+'\" style=\"left:'+ Math.abs(i*10) +'\px">+</div>')
$("#line-" + i).css({top:'auto', bottom:topToBottom}).delay(100*i).animate({bottom: '100px'}, (1000));
}
})
</script>
</head>
<body id="base">
</body>
</html>
<!doctype html>
<head>
<title></title>
<style>
.header-container {
width: 100%;
height: 60px;
background-color: white;
position: fixed;
z-index: 10;
top: 0;
left: 0;
}
.header {
padding-left: 10px;
}
h1 {
margin-top: 15px;
}
.scroll-progress-container {
width: 100%;
height: 5px;
background-color: white;
top: 55px;
position: absolute;
}
.scroll-progress {
width: 0px;
height: 5px;
background-color: purple;
}
.filler-text {
width: 60%;
margin-top: 80px;
margin-left: 50px;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
var docHeight = $(document).height(),
windowHeight = $(window).height(),
scrollPercent;
$(window).scroll(function() {
scrollPercent = $(window).scrollTop() / (docHeight - windowHeight) * 100;
$('.scroll-progress').width(scrollPercent + '%');
});
});
</script>
</head>
<body>
<div class="header-container">
<div class="header">
<h1>Progress Scroll Bar Example</h1>
</div>
<div class="scroll-progress-container">
<div class="scroll-progress"></div>
</div>
</div>
Enter lots and lots of text here...
</body>
</html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="anno.js" type="text/javascript"></script>
<script src="jquery.scrollintoview.min.js" type="text/javascript"></script>
<link href="anno.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="background-color='gray'; margin-left:33%;">
<b><i>Use this guided tour to see our latest features!</i></b>
<br/>
<button type="button" class="btn btn-default" onclick="anno.show();">Show Tour</button>
<br/>
<br/>
<div id="demo" style="width:27%;">
Your new login button is here: <button name="LOGIN" value="LOGIN">LOGIN</button>
<div>
</div>
<br />
</body>
<script>
var anno = new Anno([{
target: '#demo',
position:'left',
content: "This is our shiny new left div edge!",
buttons: [AnnoButton.NextButton]
}, {
target: '#demo',
position:'right',
content: "...and on the right...",
buttons: [AnnoButton.BackButton]
}]);
</script>
<html>
Date.prototype.formatMMDDYYYY = function(){
return (this.getMonth() + 1) +
'/' + this.getDate() +
'/' + this.getFullYear();
}
var time = new Date();
console.log(time.formatMMDDYYYY() + ' ' +
time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })
);
function getDays(firstDate,secondDate){
var startDay = new Date(firstDate);
var endDay = new Date(secondDate);
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var millisBetween = startDay.getTime() - endDay.getTime();
var days = millisBetween / millisecondsPerDay;
// Round down.
return Math.floor(days);
}
alert(getDays(Date(), '1/1/2017'));
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});
</script>
</head>
<style>
body{
background-color: #000000;
}
#menu{
z-index: 5;
width: 40%;
height: 40%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-family: Arial;
font-size: 1.5em;
text-align: left;
left: 100px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 40%;
height: 40%;
display: table-cell;
vertical-align: left;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: cyan;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: left;
margin-left: 0px;
color: #fff;
list-style: none;
padding: 0px;
line-height: 75px;
padding: 10px 70px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 25px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
</style>
<body>
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
</div>
</header>
</html>
</body>
[info] Available formats for P9pzm5b6FFY:
format code extension resolution note
140 m4a audio only DASH audio , audio@128k (worst)
160 mp4 144p DASH video , video only
133 mp4 240p DASH video , video only
134 mp4 360p DASH video , video only
135 mp4 480p DASH video , video only
136 mp4 720p DASH video , video only
17 3gp 176x144
36 3gp 320x240
5 flv 400x240
43 webm 640x360
18 mp4 640x360
22 mp4 1280x720 (best)