Skip to content

Instantly share code, notes, and snippets.

View webapprentice's full-sized avatar

Web Apprentice webapprentice

4 followers · 0 following
View GitHub Profile
@webapprentice
webapprentice / tutorial_42_example_1.html
Last active January 3, 2016 12:59
<p>URL: http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=30&fov=60&sensor=false</p>
<img
src="http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=30&fov=60&sensor=false"
alt="Street View Image"/>
@webapprentice
webapprentice / tutorial_41_example_1.html
Last active January 3, 2016 12:29
<div id="map_canvas"></div>
<style>
#map_canvas {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 600px;
height: 400px;
}
@webapprentice
webapprentice / tutorial_39_example_1.html
Last active January 2, 2016 21:08
<div id='container'>
<img src='assets/slideshow_3.png' id='myimage' />
</div>
<p style='text-align: center'>
Click the image to expand - Hit the ESC key to collapse
</p>
<style type="text/css">
@webapprentice
webapprentice / tutorial_38_example_1.html
Created January 7, 2014 21:03
<p>Here is some placeholder text</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'webapprentice'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
@webapprentice
webapprentice / tutorial_36_example_1.html
Last active January 2, 2016 00:19
<p style="text-align: center">Click Start and begin speaking</p>
<canvas id="canvas" width="800" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_35_example_1.html
Last active January 1, 2016 20:49
<video id="video"></video>
<br>
<div id="controls">
<button id="start_button">Start Video</button> &nbsp;
<button id="stop_button">Stop Video</button> &nbsp;
<button id="capture_button">Capture Photo</button>
</div>
<br>
<canvas id="canvas"></canvas>
@webapprentice
webapprentice / tutorial_34_example_1.html
Last active January 1, 2016 19:19
<!-- depends on jQuery which must have been loaded before these lines -->
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js"></script>
<script>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/facebox/loading.gif',
closeImage : '/facebox/closelabel.png'
});
@webapprentice
webapprentice / tutorial_33_example_1.html
Created December 23, 2013 21:23
<canvas id="canvas" width="800" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_29_example_1.html
Last active December 30, 2015 10:09
Implement a CSS/JavaScript Magnifying Glass using code from TheCodePlayer (http://thecodeplayer.com/)
<!-- Code is derived from http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 by TheCodePlayer -->
<p style='text-align: center'>The image used was taken by the NASA Cassini spacecraft and shows the moon
<a href="http://www.nasa.gov/mission_pages/cassini/multimedia/pia12568.html">Mimas of planet Saturn</a>
</p>
<br>
<div id="container">
<!-- This is the magnifying glass which will contain the original/large version as a background image -->
<div class="magnifier"></div>
@webapprentice
webapprentice / tutorial_28_example_3.kml
Created December 3, 2013 22:47
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>OGRGeoJSON</name>
<Placemark>
<name>Seattle Space Needle</name>
<Point><coordinates>-122.3491667,47.6202333</coordinates></Point>
</Placemark>
<Placemark>
<name>Set of Lines</name>
<Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>