Archives / Tag: Code

Let devs prefix your ExpressionEngine variables with a custom value

I struck upon a wonderful little idea which I’ve implemented in a simple plug-in I’m writing for a project I’m currently working on.., add a ‘variable_prefix’ parameter to your plug-in or module… allow devs using your add on to opt to have variables prefixed with any value.

This is really useful if your add on might have variables which conflict with another add on or native ExpressionEngine variables. This could also allows a dev to nest once instance of your plug-in in another without having to resort to embeds, they simply specify a tag prefix for the outer tag pair.

Hacking Expression Engine to add radio buttons and checkboxes to custom member profile fields

Don’t get me wrong, I love Expression Engine but sometimes you just come up against a brick wall and the only solution is to either pay someone to write a very clever extension or hack the system files about yourself (not for the faint hearted!).

During a recent project I needed to implement some basic member functionality and add some custom profile fields for the member accounts. No problem, Expression Engine has this covered. But (You knew there was going to be a but) it only provides support for text input, text area and select field types. Boo!

I ‘needed’ to be able to present users with a greater variety of input types such as checkboxes and radio buttons.

So, with a little help from the fanatical EllisLab staff I set about ‘hacking’ that very feature into the product.

I’ve documented the steps that I took in a Wiki article on the Expression Engine website. :)

For further discussion on this topic please also see the related Expression Engine discussion forum thread.

A simple JavaScript to toggle page elements

No rocket science here but I thought I’d blog this for my own future reference. Just a handy little script to have about.

function toggle(elementID){ var target1 = document.getElementById(elementID) if (target1.style.display == 'none') { target1.style.display = 'block' } else { target1.style.display = 'none' } }

Just give the element you want to ‘toggle’ on and off an ID and then pass that to this script.

<a href="javascript: toggle('track_list_2');">Show/Hide</a>

That’s all. :)

I ♥ Expression Engine

After my recent rant about having to edit CMS templates via a browser text field I think I have perhaps stumbled across Expression Engines best feature yet. It is for sure going to save my sanity.

Save Template as File in Expression Engine

Get the low-down on how to use the ‘Save Template as File’ feature right here. In the Manual no less, I know… RTFM!

Mark of the web (or why IE6 sucks)

I’ve been having a very interesting time during the past few days discovering what a total mess Microsoft has made of IE6 with the XP SP2 upgrade. Let me begin the story.

A few years back I wrote a simple HTML based Catalogue CD-ROM for a client. This provided users with an interface through which to navigate a large number of PDF documents. Recently they approached me to give this a bit of an update. The old version had a tree based navigation structure consisting of a number of interlinked HTML pages which displayed the contents of each branch.

Being as we now have modern web browsers that support XHTML and CSS I thought I’d bring things up to date, and simplify the maintenance process by incorporating the entire tree structure in a structured unordered list and then use some simple JavaScript to toggle the visibility of the branch elements. Sound slike a plan right? Yes.

Not long after getting something up and running I did some initial tests in both Firefox and Internet Explorer, all seemed good. I emailed a ZIP archive of the ‘work in progress’ over to the client for approval.

I hear back from the client that she’s getting a ‘Active Content’ warning in IE every time she trys to launch the HTML file.

To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer.

Hmm, ok. I open up IE, revert my setting to default just in case and test again. Lo and behold, I get the warning too.

So, what’s changed in IE6 following an upgrade to XP SP2? Well, to fill a number of security holes which might allow someone to execute code locally on your machine whilst browsing the web, Microsoft have opted to lock down and prevent any active content from running on your local machine at all (rather than fix the holes). Of course a user can ‘allow active content’ to be run on the local machine, but in most cases users will be freaked out by the dire warning which they have to manually over-ride.

Microsoft offer 3 solutions to this problem, but none of them are acceptable.

*1. Ask users to turn off local machine security*
Ok, I can’t really see any clients agreeing to that approach.

2. Add the ‘“Mark of the web”:http://www.phdcc.com/xpsp2.htm#markoftheweb’ to all your HTML pages
No good as links to other file types don’t work. I can’t add an HTML comment to a PDF document now can I.

*3. Wrap your application in an HTA file*
This is IE only, Users without IE set as the default browser are out of luck if they try to run my clients CD-ROM.

So, what can you do if you want to run an HTML based application off your local machine without having to resort to any of the above.

After a bit of digging I came across a fantastic little product called ‘“Server2Go”:http://www.server2go-web.de/’. This is a fully functional free Apache web server that you can drag and drop onto a CD-ROM. This allows you to run your HTML application ‘through’ a real web server which exists only while that browser session is open, so to all intents are purposes your users are browsing ‘online content’ and so IE is quite happy to execute JavaScript and other Active Content.

Problem Solved! :)

If you just smile

I just finished up working on a website this week for a new client (Smile Photography), still a fair bit of placeholder copy about. The ingredients; XHTML/CSS, Bespoke Content Management, Auto Thumbnailing of Event Photos, all that kinda jazz.

Smile Photography

I’m pretty happy with it, I’m in love with the simplicity and cleanliness and I think that’s just what’s required for a site which will primarily be used by visitors once only to browse and order prints.

Adding on hover copyright to Lightbox

I’ve been using Lightbox by Lokesh Dakar on a current project and needed to add a simple copyright message on hover just to remind those nice users that they really shouldn’t simply rip my client off by printing little snap shots directly from his website.

Obviosuly this won’t deter the determined, it’s by no means bulletproof, but perhaps will serve as a gentle reminder to others.

#lightbox {  background-image: url(/assets/copyright.gif);  background-position: center;  background-repeat: no-repeat; }

#lightbox a:hover img#lightboxImage {  filter:alpha(opacity=50);     -moz-opacity: 0.50;     opacity: 0.50; }

At first I was looking for an easy way to script the overlay of a PNG with a copyright text but in the end I just went with a nice little opacity effect on the photo in question, thus revealing a copyright message which had been set as the containing DIV background image. Keep it simple stupid.

Of course, if you know of a better method, let me know. smile

CSSVista Launched

A while back the lads over at salted gave us a sneak peek at CSSVista, their standalone Windows application for web developers which allows you to edit raw CSS whilst live previewing the results in a tabbed IE and Firefox browser interface.

Well CSSVista is now available, even better, it’s free. Go grab yourself a copy and give it a whirl. I think this liitle application has some great potential! :)

New tricks with Textile

I’m using textile on a project I’m currently working on and having come up against a bit of an issue I discovered a nifty little feature of textile which I’d never used before.

The problem I was having is as follows.

I’m pulling a field out of a database which is marked up using textile, I then call the ‘TextileThis’ function to render it back as XHTML. This is all good except for one thing. The text I’m pulling back is wrapped in an ‘href’ in order to link the entire body of text to another part of the site. When the textile ‘XHTML’s my text it’s auto wrapped in an opening and closing paragragh tag, that’s fine in most cases but in this situation it messes up the visual rendering of the link element:

<a href="http://ninefour.co.uk"><p>This is my sample text</p></a>

Obviously this isn’t ideal.

So, I took a poke about in the textile class file and discovered that ‘TextileThis’ accepts a number of arguments. Wow, never realised that before.

function TextileThis($text, $lite='', $encode='', $noimage='', $strict='')

Well I have no idea what ‘encode’ (URL encode maybe) and ‘strict’ do but ‘image’ will remove images and ‘lite’ prevents textile from wrapping it’s output in paragraph tags.

Success!

Getting on Google Maps

So, my mission should I choose to accept it, (which I have) is to have myself (or my domain name) appear on a Google Maps search for ‘nathan pitman berkshire’. Right now I’m listed… well, my work place is anyhow. But I want my house to be highlighted! That would be super neat.

I'm here!!!

So, here’s how I think I’m going to make it happen. The business look up is provided by yell, this is how google know what to display in the business list on the right, so I’m thinking I just need to be listed on yell right? Right!

I trot off to yell.co.uk thinking that this is going to cost me some £‘s but discover that you can actually apply for a free basic listing that appears not only on yell.co.uk but also in ‘the book’. Wow, how neat is that.

I enter my details, list my business as ‘nathanpitman.com’ select the relevant categorisation, enter my address… blah blah blah… eventually I get to complete my listing and then get my confirmation email. My listing is being ‘processed’!

All I can do now is wait, will I get listed, and when I do, will I show up on the Google Map… only time will tell!

Update: I’m listed on yell but still not showing up on the google map… :/

Adding geographical tags to your website

Having noticed geographical data in the meta tags of many blogs recently I decided to investigate a little further and work out how to indicate the geographical location associated with my website. It took a bit of digging about, so I thought I’d share the results with you all.

Step 1 – Your Longitude and Latitude

First off you need to discover your longitude and latitude. If like me you don’t have a GPS device then you can use a number of online resources. I plumped for Streetmap. Simply enter your postcode and then on the map screen scroll down to find the line of text that reads “Click here to convert/measure coordinates”. Click on the link and make a note of the latitude and longitude figures that are returned.

Lat: N 51:23:31 ( 51.391924 ) Long: W 0:44:45 ( -0.745941 )

Step 2 – Generate ‘Geo’ or ‘ICBM’ tags

Now we can generate the most commonly used geographical tags to place in the head of our web pages. I used the Geo Tag Generator at ‘Geotags.com’ to generate by ‘geo’ tags and the instructions for adding a site to the GeoURL database at ‘GeoURL.org’ to generate my ICBM tags.

Your tags should look something like this:

<meta name="ICBM" content="51.391924, -0.745941"> <meta name="DC.title" content="nathanpitman.com"> <meta name="geo.position" content="51.3919;-0.7458"> <meta name="geo.region" content="GB-BRC"> <meta name="geo.placename" content="Bracknell">

Step 3 – Use those tags!

Now simply place your tags in you document head and start adding yourself to geographical databases such as:

Hoorah!

Wedding Photography

I just finished working on a site for a cohort of mine. Mr Simon Kemp is perhaps the best wedding & portrait photographer ever but his old website just didn’t cut the mustard. We did a bit of a deal and this is the result.

Hyde-end Studios Website

Let me know what you think.

Styling Horizontal Rules with CSS

Tip of the day… don’t waste hours trying to style Horizontal Rules consistently in different browsers. Instead wrap your HR in a div, set the HR to

display: none

and style the surrounding div instead.

div.horRule {  height: 1px;  border-top: 1px solid #E5E5E5;  margin-top: 3px;  margin-bottom: 3px;  margin-left: 10px;  margin-right: 10px; } div.horRule hr {  display: none; }

If a user is browsing your site with a device that doesn’t support CSS then they’ll still see the standard HR.

Sidebar / Explorer Bar queries

I’m working on a project at work at the moment where I’m considering using a browser Sidebar (Firefox) / Explorer Bar (IE) in place of a JavaScript pop-up.

I can’t really say a great deal about the actual application, but I have a few queries which someone out there might be able to answer. I’ve had very little joy with google. :(

  1. Is it possible to open a Sidebar using JavaScript? Or does the action of opening a sidebar have to be initiated by the user via the ‘View > Explorer Bar’ or ‘View > Sidebar’ menu?
  2. Is it possible to use JavaScript to adjust the width of a Sidebar in IE or Firefox?

Well, if you have any answers I’d be most happy to hear them. TIA! :)

yugop.com v4

After what seems like an age, yugop.com has been updated by Yugo Nakamura.

yugop.com updates

In addition to the new flash experiments and newsfeed section Yugo has added a beatifully executed archive of previous work, so you can still view all of his previous experiments.

RSS feeds by category

Following a recent post by Brandon on devnulled.com I’ve decided that it would be beneficial to make category based RSS (and Atom) feeds available for my site.

This means that if you’re really only interested in the ‘Fireworks’ stuff then you can subscribe just to that category. More categories to come soon… :)

Note: The feed URLs above are no available.

3D CSS Box Model

Jon Hicks of Hicks Design has posted a nice little diagram that explains how padding, border and margin work together and the order in which elements such as background colour and image are stacked. Very useful indeed.

Drop Shadows are ‘In’

I think we’ve all noticed that Drop Shadows are making a resurgence on the web. Having discussed this issue with some work colleagues recently I was interested to come across a post on Yellowlane about this very subject.

Drop Shadows are 'In'

Browsing XML with Flash

So, I finally got round to having a look at the Data components in Macromedia Flash MX 2004. I decided that a good place to start would be to create a small application for browsing the RSS feed of this very site.

Browsing my sites RSS feed with Flash

I quickly came across a sample application on the Macromedia site and took to deconstructing and re-assembling the code. Once I’d got my head round the concept of binding XML nodes (Is that the right terminology?) to fields or instances it quickly began to make sense.

Well, now that I have a better understanding of how I can use XML together with Flash maybe I can think about applying these skills to some future commercial projects.

Update: Anyone know how I can ‘format’ the excerpt field to render out links and HTML chars correctly??? I’m guessing I need to attach a stylesheet in some way…?

Update: I think I’ve sussed the HTML chars issue and have implimented some simple styling of “a” tags within the excerpt field. Neat. smile

Pink Cow(s)

Well, I just finished work on another CSS based site for a client. Pink Cow sell educational software for schools. They approached us here at Mirashade looking for a simple but flexible site which would provide them with the ability to administer key content (News, Features & Offers) through a Web based Content Management System.

We wrote the CMS using PHP and MySQL and developed the public facing site using CSS for positioning and styling. I think the end result is pretty neat. I’d be interested to hear your opinions on both the design and the execution…

Small budgets are great

I just put the finishing touches to a little budget site we’ve done here at Mirashade for a partner of ours. This particular job reminds me how enjoyable it is to work on smaller projects where you see the job through from start to finish in a matter of days.

Working on larger jobs which span months or even years, seems to sap creative energy. It gradually becomes harder and harder to remain enthused unless something is done to reguarly inject energy into the project.

I guess what I’m saying is that ‘budget’ jobs are under rated, more often that not this is where we get to have a little more fun and be a little more expressive.

Textpattern plugins

Drew has been blogging about the fantastic feature in Textpattern which allows developers to quickly and easily write ‘plugins’ using standard PHP. Check out Drews post on the subject here.

JavaScript support in Director?

I just came across a post on John Dowdells blog RE a news item which has gone up too early on the Computerworld site. The subject: ‘Macromedia Director MX 2004’. It certainly makes an interesting read. Having used previous versions of Director earlier during my career I’ve always been of the opinion that Macromedia needed to do something pretty revolutionary with the software in order that it should keep one step ahead of the ever maturing Flash format.

Turns out that this release they’ve added support for a new programming language in addition to the nastyness that is Lingo, Director now provides support for JavaScript! Blimey! Now if they add support for Actionscript and such niceness as nested Movie Clips then some developers might return.

Something weird with PHP includes…

There is something weird going on with PHP includes on a site which I’m working on. I’ve been trying to include a file which will change depending on where you are in the site, therefore the URL of the include is created by combining a number of variables and an existing string.

$page_audience = "5-9s"; $baseURL = "/mysite/"; include($baseURL."/Includes/inc_footer_".$page_audience.".php");

However, this simply does not work, it throws PHP errors all over the place. In the end I resorted to changing the ‘baseURL’ variable to an absolute file address.

$baseURL = "d:/Inetpub/wwwroot/mysite/";

Surely this isn’t necessary? Sure it works, but it’s a tad ugly. Do I simply have something wrong with my PHP installation on Windows, or am I missing something else?

Just finished working on this…

Oursafesite.com is a place for children, adults and teachers to communicate, learn and share knowledge with the aim of establishing best practices for all members of the community who are responsible for the care of young people.