This example shows a nice fluid movement for items in a wrapping listbox.
Click here to open the Silverlight page and resize your browser:
http://stevenhollidge.com/blog-source-code/animatedlistbox
SL version: https://github.com/stevenh77/AnimatedListboxSL
WPF version: https://github.com/stevenh77/AnimatedListboxWPF
There’s a fantastic video from Mix 10, given by speaker Kenny Young:
http://channel9.msdn.com/Events/MIX/MIX10/CL55
Here’s the Silverlight project from the video running:
The source code doesn’t seem to be available online anymore so I contacted him and managed to track down the files.
Or here’s a link to the demo:
http://stevenhollidge.com/blog-source-code/dynamiclayoutandtransitions/
Or download the source, updated for Silverlight 5 here:
Quick prototype for the opening of the hidden categories folder on an iPhone.
You can try the online demo here: http://stevenhollidge.com/blog-source-code/appledesktopfolderanimation/
Source code: https://github.com/stevenh77/AppleDesktopFolderAnimation/
Here’s an example of a Fiddler Extension I started building for CORS workarounds using JsonP.
https://github.com/stevenh77/JsonpViewer
Some background, I’m currently using Jsonp for cross domain service calls. As only GETS are allowed, and I want to pass data to my services as Json, I add a request query parameter which is URI encoded. In order to debug and cleanly read the object I’ve added a inspector to Fiddler to extract this object, decode it and display within fiddler UI.
I’ve also wrote this blog post to remind me how to create an extension next time.
Here we can see a Json object being passed via a URI encoded HTTP GET request:
GET http://localhost:2626/api/dealdates?request=%7B%22strikeAbsolute%22%3A0.0%2C%22strikePips%22%3A1000.0%2C%22markupAbsolute%22%3A0.0%2C%22markupPercentage%22%3A0.0%2C%22clientPriceAbsolute%22%3A5.0%2C%22clientPricePercentage%22%3A0.1%2C%22currencyPair%22%3Anull%2C%22spotAsk%22%3A0.0%2C%22notional%22%3A0.0%2C%22expiry%22%3A%220001-01-01T00%3A00%3A00%22%7D HTTP/1.1
User-Agent: Fiddler
Host: localhost:2626
Click over into my new “Json Query Params” window and you get the Json object nicely formatted and display:
Notes:
This extension currently relies upon the JSON object being passed as “?request=” as this fit my pattern and needs.
The example above uses the same json for both the request and response, as I was too lazy to create another object and it’s late now so almost time for bed…
If you’re interested in building your own extension here’s some tips:
1. Grab my source code as a reference: https://github.com/stevenh77/JsonpViewer
2. Switch on logging within Fiddler:
Alt + Q opens the ExecAction command line (lower left hand corner, the black bar)
Enter the following commands:
prefs set fiddler.debug.extensions.verbose True
prefs set fiddler.debug.extensions.showerrors True
To confirm your settings have been updated enter this command: about:config
3. Now when you open Fiddler you can select the log tab to see your extension loaded.
Remember: When deploying your class library, the DLLs for Inspectors go in the {program files}\Fiddler2\Inspectors folder
4. If your DLL isn’t loading remember to add a Fiddler.RequiredVersion attribute to the AssemblyInfo.cs file.
6. Build your project as .NET Framework 2 or 4. I dont think Framework 4.5 is not supported yet but I havent tested that. My project was built with .NET 2.0 and later upgraded to .NET 4.0. Both worked great the my version of Fiddler (4.4.3.0)
Good luck!
Quick chart using a JavaScript library called HighChart.
Online demo: http://stevenhollidge.com/blog-source-code/javascriptchart/
<html>
<head>
<title>JavaScript chart</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script src='http://code.highcharts.com/modules/exporting.js'></script>
<script>
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Crystal Palace vs Millwall',
x: -20 //center
},
subtitle: {
text: 'Source: http://www.crystalpalace-mad.co.uk',
x: -20
},
xAxis: {
categories: ['83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
},
yAxis: {
title: {
text: 'League Position'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Crystal Palace',
data: [35, 38, 35, 29, 30, 30, 27, 15, 3, 10, 20, 21, 19, 23, 26, 20, 34, 35, 41, 30, 34, 26, 18, 26, 32, 25, 35, 41, 40, 37, 24]
}, {
name: 'Millwall',
data: [61, 53, 46, 39, 40, 25, 10, 20, 29, 39, 27, 23, 32, 42, 58, 62, 54, 49, 45, 24, 29, 30, 30, 43, 54, 61, 49, 47, 29, 36, 40]
}]
});
});
});
</script>
<head>
<body>
<div id='container' style='min-width: 400px; height: 400px; margin: 0 auto'></div>
</body>
</html>
Responsive design main menu to window resizing.
Online demo: http://stevenhollidge.com/blog-source-code/responsivedesignmenu/index.html
Same HTML, responsive design using CSS media queries.
Animated responsive (to window resizing) design.
Online demo: http://stevenhollidge.com/blog-source-code/win8menu-animated/index.html
Responsive (to window resizing) design with animation on the tiles.
Online demo: http://stevenhollidge.com/blog-source-code/win8menu/index.html
Thanks to:
http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266
On a small device I’d like my labels above my textboxes:
On a larger device I’d like my labels to be on the left of my input boxes:
Here’s how:
<html>
<head>
<style>
@media (max-width: 400px) {
#content {
margin: 50px;
}
#labelContainer {
width: 0px;
}
#content label {
display:inline-block;
}
}
@media (max-width: 5000px) {
#content {
margin: 50px;
}
#content label {
display:inline-block;
}
}
</style>
<body>
<div id="content">
<div id="labelContainer">
<label>First name:
<input type="text" />
</label>
</div>
<div id="labelContainer">
<label>
Last name:
<input type="text" />
</label>
</div>
</div>
</body>
</html>
Thanks to Simon Cropp @simoncropp (creator of NotifyPropertyWeaver project amongst other great projects) for pointing out that you shouldn’t need to jump through the hoops of using Jsonp.
http://www.html5rocks.com/en/tutorials/cors/
http://stevenhollidge.com/blog-source-code/cors (using Javascript XMLHttpRequest rather than jQuery)
My example was taken from html5rocks website, then stripped back to contain only the cors code
Use this page to test CORS requests: http://client.cors-api.appspot.com/client
Initially, I had been using jQuery to make my requests but their lack of support for cors with IE had led me down the wrong path: http://bugs.jquery.com/ticket/8283
To enable CORS on your ASP.NET web server, for example for Web API, you need to add the following to your web.config:
<system.webServer>
<!-- enable cors -->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
This allows you to make service requests from jQuery to a different domain (cross site scripting).
1. Add a Formatters folder to your WebApi project and add the following class:
public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
{
private readonly HttpRequestMessage _request;
private string _callbackQueryParameter;
public JsonpMediaTypeFormatter()
{
SupportedMediaTypes.Add(DefaultMediaType);
SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));
MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", "application/json"));
}
public JsonpMediaTypeFormatter(HttpRequestMessage request)
: this()
{
_request = request;
}
public string CallbackQueryParameter
{
get { return _callbackQueryParameter ?? "callback"; }
set { _callbackQueryParameter = value; }
}
public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, HttpRequestMessage request, MediaTypeHeaderValue mediaType)
{
if (type == null)
throw new ArgumentNullException("type");
if (request == null)
throw new ArgumentNullException("request");
return new JsonpMediaTypeFormatter(request) { SerializerSettings = SerializerSettings };
}
public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContent content, TransportContext transportContext)
{
string callback;
if (IsJsonpRequest(_request, out callback))
{
var writer = new StreamWriter(stream);
writer.Write(callback + "(");
writer.Flush();
return base.WriteToStreamAsync(type, value, stream, content, transportContext).ContinueWith(_ =>
{
//TODO: Inspecting the task status and acting on that is better
writer.Write(")");
writer.Flush();
});
}
return base.WriteToStreamAsync(type, value, stream, content, transportContext);
}
private bool IsJsonpRequest(HttpRequestMessage request, out string callback)
{
callback = null;
if (request == null || request.Method != HttpMethod.Get)
{
return false;
}
var query = HttpUtility.ParseQueryString(request.RequestUri.Query);
callback = query[CallbackQueryParameter];
return !string.IsNullOrEmpty(callback);
}
}
2. Add a FormatterConfig class to your App_Start folder
public class FormatterConfig
{
public static void RegisterFormatters(MediaTypeFormatterCollection formatters)
{
formatters.Remove(formatters.JsonFormatter);
formatters.Insert(0, new JsonpMediaTypeFormatter
{
SerializerSettings = new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}
});
}
}
3. Update your Global.asax.cs file to register the FormatterConfig
public class WebApiApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
FormatterConfig.RegisterFormatters(GlobalConfiguration.Configuration.Formatters);
}
}
That's it!
Now your services can be called for Json or Jsonp.
You can continue to get your Json response in the normal way: http://localhost:2626/api/underlyings
You can now call your service passing in the callback to receive Jsonp:
$.getJSON("http://localhost:2626/api/underlyings/jsonp?callback=?", function (result) {
// process response
});
You’ll see here that the response wraps the data in a jQuery function.
Here’s the HTML code I used in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jsonp test</title>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<button id="getjsonp">Get JSONP</button>
<h4>Request result:</h4>
<div id="jsonp"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#getjsonp").click(function () {
$.getJSON("http://localhost:2626/api/underlyings/jsonp?callback=?", function (result) {
$(result).each(function(index, item) {
$('#jsonp').append('<p>' + item.currencyPair + '</p>');
});
});
});
})
</script>
</body>
</html>
https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp
