HTML and CSS Fluid Transparent Rounded Corner Boxes

2nd May, 2010

That’s quite a lot to demand of a title, and a box on a website as well it seems. In my work I have had a couple of designs lately that have required me to think up a good and solid way of having four rounded corners in a box that is one of a couple of things:

• Totally fluid, as in it resizes in both axes in accordance with changing content size.
• Each corner needs actual transparency to sit on gradient backgrounds.

There are hundreds of methods posted online about how to do fancy corners on boxes using CSS, but quite a lot of them just don’t have transparency involved, or worse still use a hack here and there or use a sprinkling of absolutely positioned, empty divs.

So what to do about the boxes having exhausted quite an extensive Google search and not finding a method that really suited me? Make one up of course. For those of us still stuck supporting IE6 as well as a raft of other browsers and their various editions, while offering a text resizing facility on the site, this meant it has to be remarkably robust.

The following method is the one I made for four corners only, with no border fanciness. In fact the graphical requirements were so simple that actually all the corners are the same GIF file as a ball, used much like you would a sprite:

Read the rest of this entry »

PHP, Adobe PDF and Server Response Headers

28th August, 2009

I’ve been rather busy lately producing the PHP backend code for a document storage website and when it came to the question of where to actually store the files the answer naturally was somewhere outside of public_html so that control could be limited using the user authentication already available for the PHP pages. This meant that PHP would have to deliver a response as if the actual file itself was being accessed.

It’s pretty easy to find how to send alternative headers and a the source data from a PDF file: for example http://uk3.php.net/manual/en/function.header.php Additionally, there is plenty of information out there if you want to use ‘Content-Disposition’ to force the client’s browser to behave as if the file was a download rather than load Adobe Reader in the window itself.

However this was all fine until we discovered that Adobe Reader’s usual behaviour of displaying the first page and loading the document as it is being read was broken. This system is intended for some fairly large documents and the browser was choosing to download and cache the entire file before displaying anything. I knew immediately it would be something to do with the headers.

There is very little I could find that expanded on this issue, so using an online tool that can be found at http://www.askapache.com/online-tools/http-headers-tool/ I examined what response would be sent by accessing a PDF file directly from the server. Using this I could replicate the header in PHP and as I guessed, the issue was resolved:


header('Accept-Ranges: bytes');
header('Content-Length: '.$filesize);
header('Connection: close');
header('Content-Type: application/pdf');


Referrer Message Plugin for WordPress

20th August, 2009

I was looking through some old del.icio.us tags when clicking on a link brought me to a blog that had implemented a specialised greeting message based on the referer. I know grabbing a referer isn’t that hard but having never seen it put to this use before I actually felt this was quite clever.

A link to the plugin: http://www.phoenixheart.net/wp-plugins/referrer-detector/

Continued WordPress Post Numbering

13th June, 2009

My further experimentation led me to requiring the current number of a post which there is surprisingly little information about, so I ended up working something out from scratch.

I’ve posted it on the wordpress forum in case it proves useful for anyone else: http://wordpress.org/support/topic/245629

Update: Since this is now closed, I have included the code I made originally here:


function Get_Post_Number($postID){
$temp_query = $wp_query;
$postNumberQuery = new WP_Query('orderby=date&posts_per_page=-1');
$counter = 1;
$postCount = 0;
if($postNumberQuery->have_posts()) :
while ($postNumberQuery->have_posts()) : $postNumberQuery->the_post();
if ($postID == get_the_ID()){
$postCount = $counter;
} else {
$counter++;
}
endwhile; endif;
wp_reset_query();
$wp_query = $temp_query;
return $postCount;
}

Custom Flash Player Menus

7th December, 2008

I’ve posted a little tutorial here on making custom Flash context (right click) menus because when I learnt to do it (a long while back now though) there was very little out there describing how.

• First of all you need a function to take the menu action. It can do absolutely nothing, but it does need to exist for the menu item to work. For the example here though it will link to a website:
  function menuClick() {
getURL("http://www.srjm.co.uk", _blank);
}
• Next, declare the menu variable, it’s good practice (and incredibly helpful) to do it this way because then whenever you add to the menu you get the Code Hints.
  var menu:ContextMenu = new ContextMenu();
• Finally, hide the existing menu (unless you wish to keep the play/rewind and other options) and add your own options instead, and apply it to the root context menu:
  menu.hideBuiltInItems();
var menuItem1:ContextMenuItem = new ContextMenuItem("http://www.srjm.co.uk/", menuClick);
var menuItem2:ContextMenuItem = new ContextMenuItem("SRJM Design", menuClick, true, false);
menu.customItems.push(menuItem1);
menu.customItems.push(menuItem2);
_root.menu = menu;
  The second ContextMenuItem has additional parameters to give it a horizontal line above and also make it unclickable.

Creating a Visualisation in Visual Studio 2008 (Part 1)

2nd December, 2008

I vaguely remember trying out something a long time ago with an old SDK and an old educational version of Visual Studio (obtained from university in the first year). There was a sample visualisation in C++ that could be immediately tested out in Windows Media Player.

But this was a long time ago and the files have been lost under several OS reinstalls and the voluminous expansion of accumulated stuff. Instead I would have to start anew with recent SDKs and the new Visual Studio 2008 for my Programming for Digital Media module. But because this wasn’t straightforward, and the number of circles I’ve had to run in will prove tedious to recount, I’ve decided to simply post what you DO need to do to get this to work.

Read the rest of this entry »

Flash Actionscript Image Reflections

7th November, 2008

While searching for ways to apply a gradient mask to an image I came across basically the best demonstration of how to create a decent reflection using actionscript:

http://pixelfumes.blogspot.com/2005/09/flash-8-bitmapdata-image-reflection.html

A Bit of Half-Life 2

28th September, 2008

So I’ve been playing through the current Half Life 2 series backwards, starting with Episode 2 and going back to the original. It is interesting to do this because you get to observe the subtle changes made to the overall visual quality of the game as DirectX and graphics card capabilities have improved.

But let’s face it, the original was so good the changes are pretty hard to spot so really all I was doing was enjoying a bit of classic gaming before heading back to university. But when I reached the Grab-the-Gravity-Gun and head for “Don’t go through Ra…” Ravenholm point, having completely played Episode 2 using mostly the Gravity Gun as a killing machine thanks to the Hunter’s resistance to bullets, I decided that keeping hold of Dog’s rollermine toy ball would be a fun experiment.

And what a BRILLIANT option it is!

Read the rest of this entry »