Curved Box No.9054

Does the world need another HTML curved box – Nope. Is there already thousands of curved boxes on the internet – There certainly is. Should anyone else bother publishing yet another curved box – Probably not. So with that in mind – here’s a curved box I wrote a while back. It doesn't have borders but you can put the heading in a different colour if you want.

The only advantages to this box is

1. It works


2. I actually understand how it works unlike all the other curved boxes I found which seemed utterly mysterious

Images for the corners are available here (top right, bottom right, top left, bottom left)

CSS

.roundBox
{
            float:left;
            width:270px;
            background-color:#fedd52;
            margin:0;
            padding:0px;

}

.roundBox .heading
{
            width: 240px;
            float: left;
            text-align:center;
            margin: 10px 0 0 0;
            font-weight:bold;
            font-size: 16px;
}


.roundBox .LT
{
            float:left;
            height:15px;
            width: 15px;
            background: url(../images/curveLT.jpg) no-repeat left top;


}

.roundBox .LB
{
            float:left;
            height:15px;
            width: 15px;
            background: url(../images/curveLB.jpg) no-repeat left bottom;


}

.roundBox .RT
{
            float:right;
            height:15px;
            width: 15px;
            background: url(../images/curveRT.jpg) no-repeat right top;
}

.roundBox .RB
{
            float:right; 
            height:15px;
            width: 15px;
            background: url(../images/curveRB.jpg) no-repeat right bottom;
}

.roundBox .contentOuter
{
            clear:both;
            width: 100%;
}

.roundBox .contentInner
{
            padding:10px;
}

HTML

<div class="roundBox">
<div class="LT"></div>
<div class="heading">Box Heading</div>
<div class="RT"></div>
<div class="contentOuter">
<div class="contentInner">
Content, Content, Content, Content
</div>
</div>
<div class="LB"></div>
<div class="RB"></div>
</div> 

This curved box has already been released into the wild. If some one was to release another one, there is a good chance that this rarest of all HTML constructs might well breed in its natural environment. We can but hope.

Alternative HTTP Output

Websites are tricky fellows. They'll churn out HTML output all day long without any thought or consideration to other mime outputs. If you want your ASP.Net website to chuck out other response types – then use the Http Response Stream as below

For PDF

System.Web.HttpContext.Current.Response.Clear();
System.Web.HttpContext.Current.Response.ContentType = "application/pdf";
System.Web.HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=ePIMSDataExportReport.pdf");
System.Web.HttpContext.Current.Response.OutputStream.Write(bytes, 0, bytes.Length);

For Excel

System.Web.HttpContext.Current.Response.Clear();
System.Web.HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";
System.Web.HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=ePIMSDataExportReport.xls");
System.Web.HttpContext.Current.Response.OutputStream.Write(bytes, 0, bytes.Length);

Thus easy to extent to other mime types such as images and video and so forth. Of course you'll need a source of bytes – e.g. from a Sql Server Report

byte[] bytes = report.Render(
"PDF", null, out mimeType, out encoding, out extension, out streamids, out warnings);

But once you have that – it’s in the pool kids and away you go.

Cool Tools: ClipX

Here’s how I see the history of tool development

1. Stone Age man discovers the hand axe.


2. James Watt creates the Steam Engine


3. ClipX is written and released onto the Internet.

That’s it – all major tool based landmarks covered. There may be cynics who question the inclusion of ClipX into this 3 point history of technology. To them I say ‘pish’, ‘tish’ and ‘pish’ again. ClipX has revolutionised my desktop behaviour (sadly all my other behaviours remain steadfastedly unrevolutionised).

For years I though it was a law of the universe that you could only ever cut and paste one thing at once. You pop it onto the stack and push it off. ClipX stores a list of 25+ cut and copied objects and you can access them all with a Ctrl-Shify V (see this post’s picture). I kid you not – it’s a marvel to work with. I’m in the habit now of copying half a dozen chunks of code confident that I can retrieve them for further code based tomfoolery later.

And what is the price. Well to you governor it’s entirely free. So go mad – down load a copy and cut and paste until you can’t cut and paste anymore. Lovely.

Thank you, Mountain View

I’ve been (obsessively) tracking hits on techsplurge with blogtracker and after a mere 5 weeks I am now the proud owner of my very first hit. So thank you the guy or girl in Mountain View, California who is my very first viewer.

But that’s not all. It appears that Mountain View is where the headquarters of Google is located. I feel certain that it’s Larry Page and/or Sergey Brin themselves who have been browsing techsplurge particularly after my in depth technical assessment of boogle.com. Moreover, I would say it’s highly likely that I’m being hand picked by the Google founders to head up the Boogle Phase 2 taskforce. Well I have some good news for Larry and Sergey. I ACCEPT THE JOB. I’m already packed, I’ve cancelled the milk and my wife is looking forward to some California sunshine. So as soon as the contract comes through – I’m off. Thanks guys.

JavaScript and Html Not-Comments

Here’s a puzzle for your Mum, Grandma or beloved

Take one scoop of HTML

<body>
<!--element 1 -->
<div id="element1">Content</div>
<!-- element 2 -->
<div id="element2">Content</div>
</body>

And run a cheeky sprinkle of JavaScript against it


Var element = document.getElementById("element2").previousSibling
Alert(element);

Which element do you hit?

You don’t need to be a Web developing genius to work out that it going to pickup the div element2 then navigate back one so it will hit div element1. Easy! Welll – not really – it actually navigates to the comment. The alert spits out

<!-- element 2 -->

So if you’re navigating the JavaScript DOM that can be a real gotcha. What I found particularly interesting is that this code totally breaks my mental model of how all programming/scripting/markup languages work i.e. comments never count. They’re not included in binaries, they don’t count for code coverage analysis, they don’t display on the UI. Comments never count – except when they do.