Matthew Dawkins » css http://www.matthewdawkins.co.uk Thanks for dropping by. Make yourself at home. Below is my blog. The links at the top will take you elsewhere. Enjoy! Mon, 02 Jan 2012 16:31:56 +0000 en hourly 1 http://wordpress.org/?v=3.3 pShadow – a jQuery extension for gorgeous drop shadows http://www.matthewdawkins.co.uk/2011/10/pshadow-a-jquery-extension-for-gorgeous-drop-shadows/?utm_source=rss&utm_medium=rss&utm_campaign=pshadow-a-jquery-extension-for-gorgeous-drop-shadows http://www.matthewdawkins.co.uk/2011/10/pshadow-a-jquery-extension-for-gorgeous-drop-shadows/#comments Thu, 20 Oct 2011 20:54:54 +0000 Matthew http://www.matthewdawkins.co.uk/?p=1343

What’s pShadow?

pShadow, short for ‘paper shadow’, is a jQuery extension that adds realistic drop shadows to HTML elements, which works in Internet Explorer (IE8, IE7, IE6 with some clever trickery), Firefox, Chrome, Safari, Opera, and any other modern browser you care to mention.  It’s free to download and use, and you can see an example on the demo page.

Cut to the chase – how do I get it?

Download pShadow1.0 and unzip it somewhere.  You’ll see pshadow.js and 2 png images, and I’ve included the jQuery script too (but feel free to download it fresh from the jQuery site if you prefer).

In the <head> section of your HTML file, add the following lines:

<script type="text/javascript" src="jquery.1.x.x.min.js"></script>
<script type="text/javascript" src="pshadow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.someElement').pShadow();
});

Now all elements in your markup with the class .someElement will have a lovely drop shadow!

The options

There is more than one way to skin a cat.  By the same token, there is more than one way to use pShadow.  Below are some options you can set.

There are 2 built-in shadow types, using one of the 2 .png images bundled in the zip.  Choose which one you want to use by setting the type parameter to either ‘corners’ (default) or ‘middle’.  See the demo page to see the difference.

$('#element').pShadow({type: 'corners'});

You can set how deep the shadow is, i.e. the vertical height of it, by setting the depth parameter to a number (assumes pixels).

$('#element').pShadow({depth: 30});

You can vary the strength (i.e. the darkness) of the shadow by setting the strength parameter to a value from 1 to about 5.  See the technical stuff below for an explanation of what those numbers mean, but 1 is lightest and 5 is probably the highest you’ll need to go.

$('#element').pShadow({strength: 2});

And of course you can combine those options into one array, and even chain other functions on afterwards.

$('#element').pShadow({
    type: 'corners',
    depth: 10,
    strength: 2
}).css('background','blue');

How it works

Okay, here’s the more technical low-down on how this all works, and what makes it so special.

We all know that modern browsers (apart from IE anyway) support the lovely CSS3 box-shadow property.  But there are times when we need to cater for IE too, and sometimes a simple box-shadow just doesn’t cut the mustard.  The pShadow jQuery extension does what all great performers do – it masters the art of illusion.

The shadow itself is actually a .png image, carefully designed to sit on the bottom edge of an element and give impression of depth and shadow, as if the element was a piece of paper sitting on your screen.  No shadows are needed on the other edges, because the bottom shadow does all the work for you.  Your eyes do the rest and turn it into a 3-dimensional object.

pShadow uses jQuery to take (nearly) any element, or set of elements, and dynamically adds the .png image to it, positioning it carefully so that it lines up with the bottom edge of the element.  In the case of self-closing elements like <img />, pShadow adds the shadow element immediately following it in the markup, and positions it absolutely to the target element’s position on the screen.  In the case of non-self-closing elements like <div></div> the shadow is added inside it and then positioned relative to the parent.  Then it scales the width of the image to match the target object.  And, to my knowledge, that can’t all be done purely with CSS.

The darkness of the shadow (known in the code as the ‘strength’) is a quick and dirty approach but generally works well.  There is still only one .png image, but if you layer them on top of each other it gets progressively darker.  If you leave the parameter to its default setting, or set it to 1, it will place just one copy of the shadow under the element.  If you set it to 3, you’ll effectively get 3 shadows stacked on top of each other, making it darker.  By my reckoning the scale can sensibly go up to about 5, although there is technically no limit.  And if you want more control you can create your own shadow image that’s really really light and stack loads of them on top of each other, if you really want to…

Limitations

No, it’s not perfect.  Yes, you can break it.  No, I can’t guarantee to be able to fix every issue you have with it.  Here are some things I’m already aware of:

  • PNG images are not totally supported in IE6, because it forgets to take transparency into account.  However, there are a number of ways to force IE6 to do transparency, so do a Google search for “IE6 transparency” and use any of the solutions there!
  • If you apply a shadow to a self-closing element like an image, and then move the position of that element, the shadow won’t follow it.  Because the shadow is positioned absolutely to where the target element was relative to the page, if you then move the target element the position of the shadow would need to be updated too.  That’s beyond the scope of pShadow at the moment.
  • If you have CSS targeting images, there’s a possibility that you might affect the shadow elements too.  I’ve tried to cancel out some typical CSS parameters, but it’s no silver bullet, so beware.
  • pShadow doesn’t take into account rounded corners, so if you’re using a hefty rounded corner on an element then the shadow might look a little odd.  Tough luck, I’m afraid.
  • Also, pShadow doesn’t currently handle nested pShadowed elements perfectly.  Hopefully that’s something I’ll find a fix for though!

Frequently Asked Questions (or at least questions that I imagine might be asked frequently)

Is pShadow free?

Yes.  It is.  And always will be.

Do I have to use jQuery?

Yes.  Technically you could achieve it all in raw Javascript, but it wouldn’t be as elegant, nor anywhere near as easy to use.  And I have no plans to convert it to use any other Javascript framework.

Can I apply pShadow to any element?

Yes.  But I can’t guarantee it’ll work in every case.  It’ll definitely work for <div>, <p>, <h1> etc, <img>, and any other element that a browser will treat as if it’s a block element like <div>.  It won’t work quite right with <input>, <textarea>, <button> yet, but that might come later.  And I’m sure you’ll all tell me if other elements don’t work either.

Can I use pShadow?

Yes.  You can use it on your personal blog.  You can use it on your company website.  You can use it on your corporate intranet.  You can use it in your web application.

However, you can’t use it on your oven.  Or your car.  Or your girlfriend.  Or your sense of pride.  Or the sunset.

What happens if I have a problem with pShadow?

Leave a comment below and I’ll see what I can do to help.  Unfortunately I have a 9 to 5 job to attend to, so I can’t provide unlimited tailored support, and you can’t employ my services either, even for money.

When is the next version of pShadow due?

It’s not.  Not as such.  This is a little personal project of mine, initially knocked up in an afternoon.  I hope to find time to tweak it as necessary, as and when people point out critical failures, but there is no roadmap for development.

]]> http://www.matthewdawkins.co.uk/2011/10/pshadow-a-jquery-extension-for-gorgeous-drop-shadows/feed/ 3 Keeping track of time http://www.matthewdawkins.co.uk/2008/06/keeping-track-of-time/?utm_source=rss&utm_medium=rss&utm_campaign=keeping-track-of-time http://www.matthewdawkins.co.uk/2008/06/keeping-track-of-time/#comments Tue, 24 Jun 2008 21:14:11 +0000 Matthew http://www.minipix.co.uk/wordpress/?p=514

mWork logoRunning your own business means a lot of extra effort, relative to a ‘normal’ job.  True, there are the benefits of being your own boss, working the hours that suit you, taking holidays when you fancy, setting the prices you like.  But in addition to being a Web Designer I also have to handle the accounts, pay the tax man, and do all the boring day-to-day stuff that proper businesses would palm onto someone else.  Thankfully, because my business is relatively small and simple, this doesn’t take too much effort.  Mr Tax Man doesn’t bother me unduly, and the general running of the business tends to just happen.

Of course, there are ways of making life easier for myself on the business side of things.  For instance, keeping track of the business’s money is something I’m keen to do, since numbers are not my strong point, so having a system in place that makes it all blindingly obvious is a must.  So far I’ve been relying on spreadsheets to log the work I do, with a different spreadsheet for each client.  It works, but it’s not particularly efficient.  I’ve looked around on the ‘net, and not found anything that fits my requirements exactly, so I decided I’d make my own.  Nothing like reinventing the wheel every now and then, just for kicks.

And so mWork was born.

I did look into making a mammoth super spreadsheet, with each client having its own sheet, and a summary sheet that brought it all together, but the more I played with it the more I felt it really needed the power of a database.  So I started fumbling around with the database app that comes with NeoOffice (the Mac version of OpenOffice, a free office suite like MS Office).  Unfortunately, the more I fumbled the more confused I became, and the more I hated the software.  Then it occurred to me – I could create this sort of thing really easily in PHP and MySQL.  So I did.

Rather than hosting it all online, where any old cracker could potentially get at all my data, I’ve kept it on my local computer.  There’s a lot of PHP, some clever CSS, a relational database handled by MySQL, and so far quite a lot of hours of work creating the thing.  I’m already using it, though at the moment in parallel with the old system, just in case.  The beauty of it is that if I find I’m missing a feature, I put it in.  If certain information is important, I make it more obvious.  If the data isn’t very useful, I find another way of using it.

One particular area I’m quite pleased with is the various bar graphs I’ve used, with some funky PHP and CSS.  You’ll see from the screenshots just how beautiful they are.  For each project there’s a bar graph showing three bars: one for the amount I estimated for the project, one for the amount I’ve earned through the work I’ve done so far, and one for the amount paid so far by the client.  Putting these side by side visually really helps to get a quick overview of how far through the project we are and to keep tabs on projects that might overrun; if I go over the estimate the middle bar turns red.

mWork project progress mWork monthly report mWork yearly report

There are similar graphs for the monthly and yearly reports, which show the activity throughout the month or year in question.  The yearly report shows hours worked, amount earned and amount received side by side, giving a nice (if colourful) progress report.  mWork project detailAt the moment the yearly report works on a Jan-Dec year, but I suppose actually a more useful measure would be the tax year, as I could then use that information directly to plug into my Tax Return Form.

In addition to all that fun visual stuff there are tools for adding projects, updating project information, adding work logs, adding expenses that will be passed on to the client, logging payments made by the client, and so on.

There is still work to be done before it’s finished, naturally.  But at the moment it’s fairly solid and seems to be working well.  I don’t think it’s the sort of thing I would make available to the general public though – it’s tailored specifically to my needs, and might not suit everyone else.  Besides anything else, I’ve spent so long developing it that I would want to charge people to use it, but that involves taking money from people and I’m not so hot on that!  You can tell I’m not a businessman…

]]> http://www.matthewdawkins.co.uk/2008/06/keeping-track-of-time/feed/ 2 Missing media buttons in WP 2.5 – partial fix! http://www.matthewdawkins.co.uk/2008/04/missing-media-buttons-in-wp-25-partial-fix/?utm_source=rss&utm_medium=rss&utm_campaign=missing-media-buttons-in-wp-25-partial-fix http://www.matthewdawkins.co.uk/2008/04/missing-media-buttons-in-wp-25-partial-fix/#comments Tue, 15 Apr 2008 14:58:22 +0000 Matthew http://www.minipix.co.uk/wordpress/?p=439 I’ve been hovering on the WordPress forums recently, keeping my eyes peeled for a solution to my missing media buttons following up my upgrade to WordPress 2.5 a week or so ago. Today, prompted by a post by jeenie involving looking at the source code, I had a poke around and managed to get half way there. As you can see from the attached screenshot (which proves it all works!!), I can now access the functionality, even though the images still don’t show. It’s a curious thing, given that it looks like a fairly simple bit of code that oughtn’t to have any problems at all.

The code for this bit looks like this:

<div id="media-buttons" class="hide-if-no-js">
Add media:
<a href="media-upload.php?post_id=439&type=image&TB_iframe=true&height=500&width=640" class="thickbox" title='Add an Image'><img src='images/media-button-image.gif' alt='Add an Image' /></a>
<a href="media-upload.php?post_id=439&type=video&TB_iframe=true&height=500&width=640" class="thickbox" title='Add Video'><img src='images/media-button-video.gif' alt='Add Video' /></a>
<a href="media-upload.php?post_id=439&type=audio&TB_iframe=true&height=500&width=640" class="thickbox" title='Add Audio'><img src='images/media-button-music.gif' alt='Add Audio' /></a>
<a href="media-upload.php?post_id=439&TB_iframe=true&height=500&width=640" class="thickbox" title='Add Media'><img src='images/media-button-other.gif' alt='Add Media' /></a>
</div>

I’ll quickly explain what this does: everything is contained within a DIV, with a unique id “media-buttons” and a class “hide-if-no-js”. The one that really stuck out for me was the class, and a quick look in the CSS revealed that the class “hide-if-no-js” did exactly what you’d expect – it hid everything inside it. I simply commented out that line in the CSS file, and found that the links suddenly worked!

If you want to try this yourself (if you’re having the same trouble as me), the file you want to look at is …/wp-admin/wp-admin.css, and the offending item is right down at the bottom of the file, and looks like this:

.hide-if-no-js {
  display: none;
}

Now, this is only a partial fix, as although I can click on the links and access the functionality behind them, the icons for those buttons still don’t appear. I’ve checked, and the image files themselves are definitely there. I’ve even manually edited the HTML using a bookmarklet to temporarily remove the link around the image, and then it displays perfectly, just without the link and hence without the functionality associated with it.

So I had a look at the link, to see if that’s where the problem lay. Sadly, that yielded nothing of use; the #media-buttons CSS had nothing relevant, neither did the .thickbox in the link. So I’m at a loss again. For now.

Still, at least I’ve got the functionality working now, that’s a significant improvement. Unfortunately it hasn’t resolved the problems I’m also having with the Add Link buttons, which give me a blank popup. Ah well, I’ll just have to investigate further, or make do with the HTML editor.

]]> http://www.matthewdawkins.co.uk/2008/04/missing-media-buttons-in-wp-25-partial-fix/feed/ 1