Archive for the ‘Web Development’ Category

No Flicker All CSS Image Hover State Trick

Monday, June 16th, 2008

I’m sure it’s already out there, but I just discovered it today, and figured I’d share my recently acquired knowledge…

With one client I’m working with, I’m forced to use image only nav’s on all their sites, but on hover states, I have always been getting that little “flicker” before showing the hover state image.  Well, that’s because the image has to load into the browser cache.  So my next thought was to just put in a JS image pre-loader - and step violently back in to the 90’s…grrr…but it “works”.  I have been searching for a better way to do it, and found it today!

Basically, you use 1 image for the image you are going to apply a hover state on, like this:

Make sure you setup your CSS to only show the top half of the image, and then on hover, set the background-position to a negative value to shift it.  For instance, on this item’s hover state, you’d set “background-position:0 -30px;”.

This way…both of the “images” are loaded when the page is loaded, the hover state is just hidden until you put your cursor over it.  Thanks to the 3twenty3.com site’s code for helpin’ a brotha out!

AND…I just found a blog post about this here as well -> http://www.webdesignerwall.com/tutorials/advanced-css-menu/

GangPlank - And then there were many n3rds!

Thursday, June 5th, 2008

“Making Phoenix Awesome-er!”

Just wanted to spread the word about GangPlankHQ in Phoenix, AZ (ok, so it’s Chandler…whatev).  I’ve worked out of the offices a few times…good group of people, and heck, where else can you go to work amongst a large group of n3rds, and get all the CSS help from April you could ever want???  Speaking of which…I think I’m gonna work there tomorrow……………………….maybe…if Sunny is lucky!

Read up about it…and I’ll see you there!

Dealing with XML in PHP5

Monday, June 2nd, 2008

Recently, I’ve had a few projects come up dealing with XML.  I’m a PHP programmer, and I run PHP5 on my server, so my first choice to attack XML in PHP is by using the SimpleXML object in PHP.  This has got to be one of gods gifts to PHP programmers…all you have to do is give the SimpleXML object a valid XML file/stream and it’ll put it into an object that you can easily reference like this:

$xml->customer[0]->emailaddresses[0]->emailaddress;

Makes life WAY easier by having that, however, I am currently struggling with an XML issue using SimpleXML and the XML data I am working on out of a Highrise account.  The thing is, in PHP, a valid variable can not have a hyphen in it, so if you come across an XML element named “first-name”, you can’t directly reference it using the method above.

What I’m thinking I’m going to have to do here is some PHP magic via old school PHP4 programming.  I wrote a quick and dirty XML parsing app for Brent (@iboughtamac) a few weeks back…I think I may use some of that code to scan through the elements and rewrite the element names w/o the hyphens.

Anyone else experience this issue when using SimpleXML?  Any ideas you can throw my way?

Header Image SEO - is it trickery?

Wednesday, April 9th, 2008

Ok, so I have this client, which will remain nameless, but he’s currently attending a SEO seminar in CA and apparently there is some guy from Google there. Well, my client starts asking him about different SEO topics, one of them being SEO spam - or basically just trying to trick the search engines.

I did some SEO work on his site a few months back, and one of the main changes was to switch up his header so that when CSS was disabled, there would still be descriptive text read by crawlers because the hidden span would then be shown - as it was hidden using CSS. He asked the Google guy if this considered spam and sure enough, Google guy says yes, but Chuck believes different - hell, I know of several other sites that are developed this way, are they doing it wrong too?

Google says no to text behind an image or text hidden by CSS - but I’m describing the image - so am I wrong?

Can I have some support here? Basically its like this - an H2 tag with a background image set via CSS, within the H2 tag, there is a span with a class tagged to it to hide the text - that’s it. When the CSS is turned off, the hidden text appears - thus a web crawler can read it as it contains valuable information describing the content of the site and is basically a textual representation of the image. Can someone put up some supporting links to information to support either side (mine or Google guy)? I know Google is great and all, but that doesn’t mean all their employees know everything - for all I know, Google guy could be the receptionist for the kid center…