Highcharts- Highlight the last clicked bar
Posted by shawson in Javascript on May 10, 2012
This is handy, only really if you have charts which, on click, have drill down data which pops up, perhaps in a table underneath or something- I basically just wanted to highlight the last clicked column in a column chart;
Check it out on jsFiddle : http://jsfiddle.net/shawson/CkkbF/8/
MVC3/Webforms app using forms authentication – CSS & Images folder not accessible before login
This is very usually embarrassingly simple. You have a site which is locked down using forms authentication, but your login page needs the css and images- so you add settings to your web config telling the app only authenticated users can come in, but no one else can- then you add a couple of exceptions for your specific folders- like so;
<configuration> <system.web> <authentication mode="Forms" > <forms loginUrl="login.aspx" name=".ASPNETAUTH" protection="None" path="/" timeout="20" > </forms> </authentication> <!-- This section denies access to all files in this application except for those that you have not explicitly specified by using another setting. --> <authorization> <deny users="?" /> </authorization> </system.web> <!-- This section gives the unauthenticated user access to the Default1.aspx page only. It is located in the same folder as this configuration file. --> <location path="default1.aspx"> <system.web> <authorization> <allow users ="*" /> </authorization> </system.web> </location> <!-- This section gives the unauthenticated user access to all of the files that are stored in the Subdir1 folder. --> <location path="subdir1"> <system.web> <authorization> <allow users ="*" /> </authorization> </system.web> </location> </configuration>
This is documented on the MSDN on this article.
I just deployed an existing site to a new dev server and found everything ran fine, except the css and images would not load on the login page, despite me having the exception in the web.config.
After lots of Googling (most articles simply explain that you need the above exception’s in your config!) I found this little gem which explained I needed to;
- Open the IIS7.5 control panel
- Select the application
- double-click “Authentication”
- select “Anonymous Authentication”, then Edit
- change it to use the Application Pool Identity. Make sure that user has permissions on the folder that contains the site
Switching from ObjectContext to DbContext in your Entity Framework EDMX File
Posted by shawson in .net, Entity Framework on March 21, 2012
Tres easy and much cleaner classes turfed out the other end;
http://blogs.msdn.com/b/adonet/archive/2011/03/15/ef-4-1-model-amp-database-first-walkthrough.aspx
Recursive jQuery Drop Down Menu’s
Posted by shawson in Javascript, jQuery on March 8, 2012
Following on from my previous post about drop downs, I recently expanded the code to allow for sub menus- as many levels deep as you would like.
The Code:
$(document).ready(function () { // Shawsons' Teeny-Tiny Recursive Drop Downs!
$('.drop-down-menu>li>ul').hide().mouseleave(function () {
$('.highlighted', this).removeClass('highlighted');
$(this).hide();
});
$('.drop-down-menu li>a').mouseenter(function () {
var menu_root = $(this).parent().parent();
$('ul', menu_root).hide();
$('.highlighted', menu_root).removeClass('highlighted');
$('>ul', $(this).addClass('highlighted').parent()).show();
}).mouseleave(function (o) {
if ($(this).parent().has($(o.relatedTarget)).length < 1) {
$('ul', $(this).parent()).hide();
}
});
});
The Markup:
<ul class="drop-down-menu">
<li>Drop Down Menu - Demo Title : </li>
<li><a href="">Menu 1</a>
<ul>
<li><a href="a.htm">a</a></li>
<li><a href="b.htm">b</a></li>
<li><a href="c.htm">c »</a>
<ul>
<li><a href="c-a.htm">c-a</a></li>
<li><a href="c-b.htm">c-b »</a>
<ul>
<li><a href="c-b-a.htm">c-b-a</a></li>
<li><a href="c-b-b.htm">c-b-b »</a>
<ul>
<li><a href="c-b-b-a.htm">c-b-b-a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="c-c.htm">c-c</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="d.htm">d</a></li>
<li><a href="e.htm">e</a></li>
<li><a href="f.htm">f</a></li>
</ul>
</li>
</ul>
Some CSS:
.drop-down-menu { display:block; }
.drop-down-menu li { float:left; padding: 8px; }
.drop-down-menu>li>a { padding:8px; }
.drop-down-menu li ul
{
position:absolute;
background-color:#fff;
border: 1px solid #999;
border-radius: 0px 7px 7px 7px; -moz-border-radius:0px 7px 7px 7px; -webkit-border-radius:0px 7px 7px 7px;
padding:5px;
width: 50px;
}
.drop-down-menu li ul a {
display:block;
width:50px;
}
.drop-down-menu li ul li ul
{
margin-left:50px;
margin-top: -20px;
}
.drop-down-menu li ul li { float:none; }
.drop-down-menu li ul li a { color:#000; }
.drop-down-menu li ul a.highlighted { background-color:#F68833; }
Demo :
Adding cross browser consistent keyboard short-cuts to your website
Posted by shawson in Javascript, jQuery, Web Standards on February 9, 2012
I wanted to employ keyboard short cuts to a frequently used internal web app used within the company- Pinch o’ the proverbial piss I thought- I’ll just use access keys! I’ve used them before on front facing sites for accessibility- but when I actually came to document these keys for the users I realised that support across different browsers is a mess;
IE Alt + {key}then hit return
Firefox Alt + Shift + {key}
Chrome Alt + {key} (the most sensible implementation, in my opinion)
IE also seems to refuse to aknowlege the links unless they are currently visible, and as the options I was short cutting existed in drop down menus this was no good, as they existing in bulleted lists which are “display:none” until the user mouses-over the menu bar (using my tiny drop down menu code)!
So to get around this I wrote some jQuery which standardises the short cuts- note this is no good for normal accessibility uses as it’s a new key combo which none of the browsers use, so without documentation no one will know- but for my use on an internal system it’s perfect.
I took the decision to make all the short cuts Ctrl+Alt+{key}, and wanted to keep using the accesskey attribute on my links rather than introduce another mechanism for dictating which keys triggered what- I also wanted to ensure if the link had a javascript onclick handler, instead of navigating away, we respect the handler and simply trigger that. Here’s the code;
$(document).keydown(function(e) {
if (e.ctrlKey && e.altKey && e.which >= 65 && e.which <= 122) {
e.preventDefault();
var key = String.fromCharCode(e.which);
var the_link = $("a[accesskey=" + key.toLowerCase() + "]");
if (typeof(the_link) != 'undefined') {
// does this link have a javascript assigned click handler, or do we simply send the user to the links href value?
var events = $.data( $(the_link).get(0), 'events' );
if (typeof(events) != 'undefined') {
if (typeof(events.click) != 'undefined') {
$(the_link).click();
return;
}
}
window.location = $(the_link).attr('href');
}
}
});
Import & Export break points in Visual Studio 2010
Posted by shawson in .net, Visual Studio on January 31, 2012
“This will change your life”
… reassured my colleague Mr Carmicheal.
Basically it’s possible in VS2010 (Pro, Premium or Ultimate) to Import & Export sets of break points for projects, handy if you have pieces of code you often have to step through for some reason or another.
The original article can be found here: http://msdn.microsoft.com/en-us/library/dd293657.aspx
In case that page goes AWOL as MSDN pages often do, this is what it said;
To export all breakpoints that match the current search criteria
- In the Breakpoints window toolbar, click the Export all breakpoints matching current search criteria icon.
The Save As dialog box appears.
- In the Save As dialog box, type a name in the File name box.
This is the name of the XML file that will contain the exported breakpoints.
- Note the folder path shown at the top of the dialog box. To save the XML file to a different location, change the folder path shown in that box, or click Browse Folders to browse for a new location.
- Click Save.
To export selected breakpoints
- In the Breakpoints window, select the breakpoints you want to export.
To select multiple breakpoints, hold down the CTRL key and click additional breakpoints.
- Right-click in the breakpoints list, and choose Export selected.
The Save As dialog box appears.
- In the Save As dialog box, type a name in the File name box.
This is the name of the XML file that will contain the exported breakpoints.
- The folder path is shown at the top of the dialog box. To save the XML file to a different location, change the folder path shown in that box, or click Browse Folders to browse for a new location.
- Click Save.
To import breakpoints
- In the Breakpoints window toolbar, click the Import breakpoints from a file icon.
The Open dialog box appears.
- In the Open dialog box, browse to the directory where your file is located, and then type the file name or select the file from the file list.
- Click OK.
Quick & Tiny jQuery Drop Down Menus
Posted by shawson in Javascript, jQuery on January 24, 2012
Note: this has been superseded by the recursive drop down menu script.
The Code:
$(document).ready(function () { // Shawsons' Teeny-Tiny Drop Downs!
$('.drop-down-menu li ul').hide().mouseleave(function () {
$(this).hide();
});
$('.drop-down-menu>li>a').mouseenter(function () {
$('ul', $(this).parent().parent()).hide();
$('ul', $(this).parent()).show();
}).mouseleave(function (o) {
if ($(this).parent().has($(o.relatedTarget)).length < 1) {
$('ul', $(this).parent()).hide();
}
});
});
The Markup:
<ul class="drop-down-menu">
<li>Available Actions : </li>
<li><a href="">Menu 1</a>
<ul>
<li><a href="a.htm">a</a></li>
<li><a href="b.htm">b</a></li>
<li><a href="c.htm">c</a></li>
</ul>
</li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="d.htm">d</a></li>
<li><a href="e.htm">e</a></li>
<li><a href="f.htm">f</a></li>
</ul>
</li>
</ul>
Some CSS:
.drop-down-menu { display:block; }
.drop-down-menu li { float:left; padding: 8px; }
.drop-down-menu li a { padding:8px; }
.drop-down-menu li ul
{
position:absolute;
background-color:#fff;
border: 1px solid #999;
border-radius: 0px 7px 7px 7px; -moz-border-radius:0px 7px 7px 7px; -webkit-border-radius:0px 7px 7px 7px;
padding:5px;
}
.drop-down-menu li ul li { float:none; }
.drop-down-menu li ul li a { color:#000; }
.drop-down-menu li ul li:hover { background-color:#F68833; }
Conditional logic in ListView ItemTemplate with DataBinder.Eval
Embarrasingly simple, but something I always seem to forget, and then never blog! I needed to show a tick in a repeater when a row value was -1: Simple! In MVC, with the razor syntax and strongly typed views I’ve grown to love, this is a pinch o’ the proverbial piss- In WebForms rreviously I often resort to setting up an ItemDataBound event handler which hides or shows an image, but to be honest I could not be bothered- this seems such overkill for something as simple as this. Anyway, after some faffing I reminded myself the easiest method is to use an ‘in-line if’ in the ItemTemplate, like so;
<ItemTemplate>
<tr>
<td><%# Eval("CarReg") %></td>
...
<td>
<%# (DataBinder.Eval(Container.DataItem, "NewRepeat") != null && DataBinder.Eval(Container.DataItem, "NewRepeat").Equals(-1) ? "<img src=\"../images/tick.png\" alt=\"tick\" />" : "<img src=\"../images/cross.png\" alt=\"cross\" /")%>
</td>
nodejs debugging with node-inspector on windows
I recently started learning nodejs- the recommended debugging tool seems to be node-inspector. You can grab and install this using npm (the command line node package manager- like nuget for node), making it available to all your projects;
npm install -g node-inspector
Once npm has worked it’as magic, you start node inspector by simply typing node-inspector into the command line- then start your project in node, with the debug flag;
node --debug myfile.js
If all runs as planned, you can then hit the browser on http://localhost:8080/debug?port=5858, as mentioned in the docs.
However when I started node-inspector I received an error;
C:\Users\Shawson>node-inspector
info - socket.io started
warn - error raised: Error: listen EACCES
After some fiddling, I found that changing the default port from 8080 to something else (I chose 124 at random) fixed this issue- I just then had to use the url http://localhost:124/debug?port=5858. This is because I foolishly forgot I have an instance of IIS on my local box which uses this port- a handy find though as I couldn’t find any help online fixing this issue.
IIS 7 Permissions – Application Pool Identity User Accounts
In IIS7- when using app pools which use the app pool identity, you can find the user account (for use with ACL) in the “IIS AppPool” domain- so you can reference the app pool accounts with IIS AppPool\<app pool name>
More info can be found here; http://learn.iis.net/page.aspx/624/application-pool-identities/
Flexicoder Blog- WWDC 2012 – Apple TV Apps May 10, 2012I’m lucky enough to be attending the WWDC this year, as it reaches closer to the “day of the long queue” my thoughts are turning to what I hope will be announced at the conference. So here they are in no real order (apart from the first one) Ability to run apps on the Apple […]
- Úll Conference – Review May 1, 2012I’ve just come back from Dublin, Ireland, where I attended the Úll Conference to cover all things iOS related. When the tickets where first released, the conference was advertised as a 3 day affair, starting on Friday 27th April and ending on the Sunday. A friend from Ireland, @realmikebutler, had told me about the conference […]
- Worthing Digital – Local Tech Community March 8, 2012If you are local to the Worthing/Sussex area, please check out the new Worthing Digital group, they’ve arranged a number of good talks and also started up a co-working event. If you have any ideas on helping the community grow you can also post comments on the forum […]
- Open doors effect at App launch February 4, 2012This is a copy of a blog entry I originally wrote for ios-blog There are a number of apps in the App Store that launch with a set of closed doors, these are then opened to present the actual UI underneath it. I had to create this effect for an app I wrote for a […]
- New App – Ballpark Costs January 26, 2012When potential clients ask for a ballpark figure on development costs, these are the questions I ask to help clarify whats required and therefore affect the cost. They are in no particular order… What are the target platforms, iPhone, iPad, Android, Windows Mobile? If iPhone do you want a universal version, i.e. the same app […]
- CCLabelBMFont – not displaying May 13, 2011I hit a problem today where the CCLabelBMFont wasn’t rendering the text I wanted at all. I created the the fnt file using http://www.n4te.com/hiero/hiero.jnlp Turns out that as it creates the underlying png for some reason it saves it in a flipped format, therefore you need to load the png into your favourite graphics package […]
- WWDC 2012 – Apple TV Apps May 10, 2012