Iv’e been stuck the last few days with a seemingly simple problem to do with my big green banner on the homepage of www.JohnAlexanderRowley.com. The problem is that in Internet Explorer the fade animation causes .PNG’s to loose there alpha levels (transparency) and aquire ugly black borders for a few seconds while the animation completes.

To solve this, I wanted to use a set of IF statements (iv’e covered these previously in other IE-rant articles, but couldn’t figure why it wasn’t working this time. The soltion came after a fair while of googling and head scratching.

Rather than the simple <!--[if IE]>code if in Internet Explorer here<![endif]--> and then <!--[if !IE]>code if not in Internet Explorer here<![endif]-->. I had to use an extended version for the NOT IE (!IE). Here is what I used:

<!--[if !IE]><!-->code if not in Internet Explorer here<!--<![endif]-->.

It makes sence really, but took me ages to get my head around after I found it. Hope this helps someone as much as it helped me!

p.s. You’re NOT viewing in Internet Explorer!

Tagged with:
 

Ok so this isn’t a technical post, and is probably not entirely suited to the blog as a whole, but I thought I’d write a short piece on my time at Fisher Scientific as a placement student from Nottingham Trent University over the last year.

My 52nd (final) week will be commencing next week, and it’s been invaluable to be able to put previously existing skills into practise, expanding on them to reach new levels. My Photoshop, Dreamweaver, Flash, Coding and many other techniques have been greatly built upon, not to mention the professional skill-sets I have picked up along the way. It’s hard to take on board the enthusiasm of lecturers and peers alike when they talk about a year in the industry, but it has been so SO worth it!

Apart from all the brilliant new skills I have acquired, I have also gained a group of amazing friends! Ones who I hope to keep in touch with over the years. Neil, Eve, Lee, Emma, Bek and all the others at Fisher, you have made my year at Fisher educational, enjoyable and most of all fun! Thank you. Thats what is so great about a placement – It’s the whole package!

If your indecisive about a placement, please take my advice and apply! It could be one of the best things you have ever done. I know it will be one of my life long memories!

*Wipes away a fake tear, just like Neil would*

This is my first real tutorial (more commented code than a real tutorial), and is as much for myself as everyone else (I’m using the blog as a sort of resource store for myself, with the added bonus that everyone else can see it too!).

Anyway, the idea here is some explained code to produce a simple online form which will email a person/s the data from the form. It also includes validation to ensure that the form can not be sent unless the data is precise and relevant.

On to part one – The Form and the mail functionality.

The first thing we need to do is create the form itself for the user to put there data in.

<form method="post" onsubmit="return validate(this);" action="formPage.php"> <input id="name" size="50"/> <input id="company" size="50" /> <input id="contact" size="50" /> <input id="telephone" size="50" /> <textarea cols="38" rows="5" id="description"></textarea> <input id="quantity" size="4" /> <input value="Submit"/> <input value="Reset" /> </form>

The opening form tag contains method=”post” used to actually post the data, onsubmit which is used to call the validation function and action which links back to itself. The .php file in the action will have to be renamed the same as the page the form is being displayed on. There are two buttons at the bottom (‘input values’) one of which will submit the form (method, onsubmit and action) and the other will clear all data from the form. Simple!

Next, the code to email the data to the admin:

<?php

if(isset($_POST['contact'])){ $admin = "recipient@sendToEmailAddress.com"; $name = $_POST['name']; $company = $_POST['company']; $contact = $_POST['contact']; $telephone = $_POST['telephone']; $description = $_POST['description']; $quantity = $_POST['quantity']; mail($admin, 'Subject Title', "This email was generated using the Product Resource Form at www.johnalexanderrowley.com.\n Name: $name Company: $company Email: $contact Telephone: $telephone Description: $description Quantity: $quantity", 'from: fromAddress@fromaddressEmail.com'); ?> <script> alert("Thank you for using the formPage.\n Your request has been sent to the Relevant person."); </script> <?php } ?> The IF statement checks if the input field (in this case 'contact') has been filled in. If it has then the following mail code is ran. This stops the form submitting when the page is loaded.

The various variables are set, including the ‘$admin’ variable which contains the email address that the data is to be sent to. The other variables pull in the previously posted form values. The form ‘input id’ is the text contained within the square brackets in each case.

Now the variables have been set the mail can actually take place; The ‘mail’ php function is called which requires a recipient, subject title, content and header information separated by commas. These are defined in the normal brackets using the various variables. Note that the content is comprised of various variables and no commas are used.

Finally, a javascript script is used to display a thank you message, and the IF statement is closed!

Hay presto, the form is created and will email the admin.

To add validation to the form, please view Part 2!

Tagged with:
 

For those of you in the know, you will understand the burden which is IE6. It’s far less efficient, and awkward to boot, at designing websites to look both good and work well. Amongst the problems are;

Images can’t be wider than 800px
Images can’t be .PNG
Padding is calculated differently

IE in general is a nuisance; things in Firefox just work! I’m currently designing a new menu for a website i’m working on, using :hover in the CSS and some onmouseover JavaScript. In Firefox everything works perfectly. However in IE (even the latest 8.0b) the onmouseover flickers. Getting around this requires extensive work – which wouldn’t be required if the browser worked like Firefox!

I realise this is a bit of a rant, but it has hit me time and time again – designing websites and previewing in Firefox, occasionally checking in IE7+ and then realising i’m going to have to re-work the site in order to make it IE6 compatible!

Merry Christmas!

Tagged with:
 

So the new site is finally up and running. It’s already been optimized for IE and Firefox, but the menu is still causing problems on certain browser versions.

Please fill in the poll, it only takes two clicks and will help me loads! Feel free to comment too if you have time! I can add you to the Blogroll in return if you wish?

Sorry, there are no polls available at the moment.

Thanks guys, and a merry Christmas.

Tagged with:
 

If it’s not broke

On December 15, 2009 in General.
2

As some of you may have been aware, the site has been down for a few days now! – My fault for messing around with stuff.

The term “If it’s not broke… Don’t fix it” comes to mind.

Anyway, I’m back now with a much improved site, ready to start blogging all over again.

Note: I lost all my previous blogs in the ‘firesale’ and only have printed versions. I will get round to re-publishing them at some point, Pinky promise!

Tagged with:
 

I have had the ‘Google XML-Sitemap’ plug-in for WordPress installed for a time now, and everything was working perfectly.

However, after the plug-in was updated some time last week it started showing errors in Google’s Webmaster Tools. The error was the following.

Paths don’t match we’ve detected that you submitted your Sitemap using a URL path that includes the www prefix (for instance, http://www.example.com/sitemap.xml). However, the URLs listed inside your Sitemap don’t use the www prefix (for instance, http://example.com/myfile.htm).

To fix this is simple, but I had to search around quite a lot to get the fix. All you have to do is go to the General tab under Settings in WordPress and add the ‘www.’ prefix to both the WordPress address AND the Blog address, then rebuild and submit the sitemap.

If you are still getting errors (which I did) check that any additional URL’s mentioned in the XML-Sitemap tab of Settings have the ‘www.’ prefix, as mine reset automatically.

As I said; Simple! But it took quite a lot of re-building and re-submitting to find the answer!

Google have recently announced some new features, demonstrating again its dominance over the World Wide Web!

Google’s latest feature is the integration of ‘real-time result’s (RTR’s) including Twitter, Facebook and Myspace updates to be shown for relevant search results. Although the feature is currently limited to a minority of key words it will be built upon to produce more and more results in this fashion. It’s a brilliant idea, gathering such vast amounts of information in one place. Although Google haven’t released financial details, Facebook have announced they are making no profit from the setup.

Google Goggles (it’s a mouth full) is Google’s next development – Using images instead of keywords to produce search queries, consequently returning both visual and text based results (including, perhaps, RTR’s). This must use some similar code to the similar image feature (another amazing feature from Google) although it must also feed to a variety of databases in order to analyze and search indexed pages using said image.

Google still dominates the Internet search market, boasting a global share of about 70 per cent share globally. The company reported revenues of £3.66 billion for the quarter that ended on September 30 this year. The majority of the revenue came from Search Advertising. Google may be seen to have competition in local times from Wolfram Alpha and Bing, but its ever-evolving search techniques and developments just show that it really is the world leader in Web Development.

Tagged with:
 

So, with mobile browsing becoming more and more popular, it’s increasingly important to optimize your site for a variety of screen resolutions.

Another nice little feature which I have recently implemented for both work and my personal site is the addition of an iPhone icon, so that when the website is saved to the home-screen on the iPhone it shows a sexy icon rather than a screenshot of the website.

To do this, I simply created a 57px x 57px box, with a transparent background in Photoshop. I used the rounded rectangle tool to create a nice little box, added a gradient and a light curve at the top to resemble the reflection. I finally added some symbols to the icons, and hay presto, its created!

To implement the icon couldn’t be simpler! Just upload the icon to the root of your site and re-name it to ‘apple-touch-icon.png’. Safari automatically checks the root for a .png of this name! If you don’t want the icon in the root of your site, just add the following code to your page/s:

<link rel=”apple-touch-icon” href=”LOCATION/apple-touch-icon.png” />
Custom iPhone icon for websites!

Tagged with:
 

Yesterday was the first day that I delved into the realm of online marketing; with the soul purpose of getting more visitors to my website (which I am clearly succeeding at if your reading this!).

To aid my task of ramping up my page hits I have used a selection of SEO techniques (keywords, Metadata etc) as well as Google Analytics to track my progress. Finally, using Twitter and Facebook as a free way of advertising the fruits of my labour (in this case, my blogs!).

The page views, which before now have been from a sporadic segment of friends, have gone from 6 Visits (Monday 9th Nov, 2009) to 29 Visits (Tuesday 10th nov, 2009). Analytics Graph of Page VisitsThis wild increase is because of a number of influencing factors; Interesting content, Relevance, Keywords and Micro-Marketing to name but a few.

Needless to say, I’m over the moon with the stats of Tuesday, but the real test now begins as I attempt to first of all establish a consistent (day-to-day) number of page views, and secondly climb even higher (I intend to focus on the retweeting features and plugins to extend my reach even further).