DynamiX Labs

Thanks To Our Veterans!

DynamiXLabs — Wed, 11 Nov 2009 13:14:48 +0000

We wanted to thank our veterans and active military for all that they do to help keep us safe, so we created a banner for our site. Then we thought, why stop there? So, being a tutorial site, we created a quick “how-to” on adding this to your own web site.

We created three versions, one with a link back to this article to help others add this to their web site, a second with simply the banner, and a smaller version.

Link-Back Version:

To create a version of this banner that links to our tutorial, simply add this just below the tag on your web site:

Click Here to Show Your Support!

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day.jpg) no-repeat top center;border-bottom:1px solid #000;} #veterans a{display:block;width:100%;height:130px;} #veterans span{position:absolute;top:-999em;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

You’re Done!

No Link-Back Version:

This is the same banner, but without the link back and the “Show Your Support With This Banner!” text. Simply add this just below the tag on your web site:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-No-Link.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

Small Version:

This banner is just 70 pixels high, instead of the 130 pixels in the first two, and the text centers perfectly on an 800 pixel wide site. Simply add this just below the tag on your web site to use this banner:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:70px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-Small.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

We would love a comment on where you have used this, though it is certainly not a requirement. We would also be happy to release the original .PSD file if desired, just let us know in the comments!

A Short List Of Several Sites Already Using This Banner:
– Omni International
– Charis Hills
– DynamiX Web Design

Spread the word!

Goodbye, IE 6. We Won’t Miss You.

DynamiXLabs — Fri, 07 Aug 2009 12:21:02 +0000

Like all good web developers over the last nine or so years, we have dedicated countless hours to ensuring compatibility with the archaic, standards-naive Internet Explorer 6. Well, here’s where we make our stand. While we are not, at this point willing to jeopardize the visitor experience for our clients by building company web sites that are not IE 6 compliant, we are officially cutting the cord on our own DynamiX Labs web site.

Why Kill IE 6?
Quite simply, because it simply can’t handle most of the great advances that have come along over the past nine or so years. This includes PNG transparency (yes, it SORT OF works with hacks, but not well, and almost never properly for backgrounds), not to mention any hints of HTML 5. Even such simple areas as fixed positioning are a challenge for IE 6. The point is, IE 6 is forcing web designers to lower their standards, and to not push the envelope in advancing newer technologies. If a designer has a feature in mind that will be a really great addition to a new web site, but will take a great deal of effort to complete, they are likely to bypass it completely if IE 6 can’t handle it through hacks. That’s a shame. So let’s stop the stagnation and keep pushing the envelope, and leave IE 6 behind where it belongs.

The Back Story.
Recently, this site was recreated from the ground up with a brand new design. We spent a lot of time making it look good in standards compliant browsers, only to find that IE 6 (naturally) was a mess. So, after several hours of attempting to make the design appear as it should in IE 6, we had had enough.

What We Did.
We created a small piece of PHP that checks to see what browser, and what version a visitor is using to visit our web site. If using anything other than IE 6, the site will render as normal. But, if a visitor does navigate the web site from IE 6, they will see a completely different header, footer and design (stylesheet driven), in fact the original design that we have had in place for the past several years. In other words, IE 6 is doomed to forever live in the past, while better browsers will continue to move forward as we do.

The End Result.
Here’s how the site appears in Internet Explorer 6:

For anyone still browsing our site in IE 6, here’s what you are missing out on:

More Reading.
For emphasis, we added the code from http://www.ie6nomore.com/ onto our IE 6 version, letting visitors know that they could be getting so much more than what they are. I encourage all designers to implement this code on their non-client web sites. The time will certainly come when this should be implemented universally, but let’s get this process moving on our own web sites for the time being.

If you have a client who is of the same mind about IE 6 and is willing to add this to their web site, all the better, but we don’t suggest forcing this on your clients.

Big Red Disclaimer:
Yes, we know that there are some companies who have had IE 6 forced upon them. For these people, we’re sorry, but it’s time to start pressuring your IT guys to at LEAST allow you use of Firefox, Safari or Chrome in addition to IE 6. There should be no excuse to only allow Internet Explorer 6, particularly since programs that allow multiple versions of IE have been around for years now (see http://tredosoft.com/Multiple_IE for a great XP-based one). There’s even a hack for Vista users. So, the question to ask your IT guys is, WHY only IE 6?

Looking forward to the comments and criticisms!

html: Validating the Tweetmeme Wordpress Plugin

DynamiXLabs — Tue, 28 Jul 2009 13:39:48 +0000

We recently installed the Tweetmeme Wordpress plugin, only to find that it threw over a dozen errors our way that invalidated our XHTML Strict code. It’s far too valuable a plugin to leave off of any good blog, but we do want to be sure that the code doesn’t throw errors. Here’s how to fix those under five minutes.

1. Replace & with & where necessary.
The list should be: &source, &style, &service, &service_api, &force
You can simply do a find and replace for each of these with your & equivalent.

2. Change “iframes” to “objects”
For this, you can simply copy and paste our code:

FIND:
ID)); ?>&chs=200x100&force=true">

REPLACE WITH:
ID)); ?>&chs=200x100&force=true" style="height:105px;width:200px;border:0;overflow:hidden">

FIND:


REPLACE WITH:


FIND:

$button .= ' frameborder="0" scrolling="no">
REPLACE WITH:

$button .= ' >
FIND:

target="_blank"
REPLACE WITH:

target="_parent"
That’s it! That wasn’t so bad now was it? Please let us know in the comments if you run into any issues.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?



design: Create Rounded Images in Seconds! (Photoshop)
DynamiXLabs — Tue, 28 Jul 2009 03:18:20 +0000
Rounded corners are still as popular as they ever have been, but many designers don’t know how to easily create these using Photoshop. Today we are going to create a template that you can adapt as desired, and show you exactly how we made it in four easy to follow steps.
Here’s how our final document will look:

Step 1: Open/size your image.

For our example, we chose 550 pixels by 290 pixels. For ease of working, we recommend making the document a little bit larger than your intended end result. Here’s how ours looks:

Step 2: Add a rounded box.

Use the “Rounded Rectangle Tool” to create a box around the portion of your image that you would like to capture. Be sure to adjust the radius to suit your rounding desires. We set ours to 25 pixels for this example. Your document should look similar to this:

Step 3: Positioning and layer order

Position the rounded box where you would like it, then drag the layer underneath your image within the “Layers” tab. Your document should look similar to this:

Step 4: Create a clipping mask

Here’s where the fun begins, and where your work ends (unless you just want to add some finishing touches). Simply right click on the image layer, and select “Create Clipping Mask.”

 Your document should now look like this:

Now, you can easily add more life to this image before you save it, but the basics are covered. Want to get more creative? You can add more layers, text and even style the rounded area itself through the “Layer Style” window.
DOWNLOAD THE ROUNDED CORNER .PSD FILE

In our example .PSD file, we have added in a semi-opaque left hand content area, and added some example text. We also added a stroke and drop shadow to the rounded shape, and used Images – Trim to remove the whitespace around our image. Want to know exactly how we achieved any portion of this .PSD? Leave us a comment below!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



css: Create awesome tooltips without javascript!
DynamiXLabs — Wed, 15 Jul 2009 13:31:12 +0000
Recently, we came across the need for some very simple tooltips. The only real caveat was that they needed to be lightweight, and since we already had a number of scripts running on the page, we preferred to make these using just css. Thankfully, our dear friend the  tag is up to the challenge of making these tips fairly easily.
Example 1
We’ll start with an easy example. You have a link to somewhere, and want people to see a message before they click on it. 
Like this:

Hi Labs visitors! Don’t forget to check out DynamiX Web DesignIt’ll rock your socks off!!
Here’s the HTML:

Hi Labs visitors! Don't forget to check out DynamiX Web DesignIt'll rock your socks off!!

It doesn’t matter whether you place the span tag before or after the actual text for the A tag, just as long as it’s inside it.
Here’s the CSS:

.dynamixtip{position:relative;}

.dynamixtip span{display:none;}

.dynamixtip:hover span{display:block;position:absolute; left:0;top:20px;}

This part is just for the look/feel of the tip, style as you wish:

.dynamixtip:hover span{padding:3px;background:#5f9215; color:#fff;border:1px solid #3f6607;font-size:10px;}

Simple isn’t it? Now let’s get more complicated (but still easy).
Example 2
What if you wanted to put a picture in that tooltip, and float it to the right of your link?
Like this:

Balloons are cool!
Here’s the HTML:

Balloons are cool!

Here’s the CSS:

.dynamixtip2{position:relative;}

.dynamixtip2 span{display:none;}

.dynamixtip2:hover span{display:block;position:absolute; left:130px;top:-50px;}

Configure “left” and “top” as desired to position your tip, and you’re done.
Example 3
Let’s say you wanted to tell someone that this balloon is red.
This balloon is red!
This one is just as easy as the earlier examples. There are a few ways to do this, depending on what you want/need to do for this item, but we chose to simply encase the image in a div and apply our class to it. Note that IE 6 doesn’t support the hover property when applied directly to a div. Alternatively, you can simply replace the div with another span tag, and add “display:block” to .dynamixtip3. If you want us to get fancier, leave a comment and we’ll be happy to get into some alternatives.
Here’s the HTML

This balloon is red!

Here’s the CSS

.dynamixtip3{position:relative;text-align:center;}

.dynamixtip3 span{display:none;}

.dynamixtip3:hover span{display:block;position:absolute;left:65%;top:25%;}

This part is just for the look/feel of the tip, style as you wish:

.dynamixtip3:hover span{padding:3px;background:red; border:1px solid #800;color:#fff;font-size:11px;}
Notice that for this example, we positioned the tip using percentages instead of pixels. You can of course also use em if you prefer.
That’s all there is to it! Pretty simple, huh?
Compatibility:

This method has been tested in and is compatible with Internet Explorer 6 (beware of :hover when applied to divs, as well as the “bottom” declaration on absolutely positioned elements), 7, 8, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!

Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



css: style an element with the span tag
DynamiXLabs — Tue, 21 Apr 2009 12:14:42 +0000
The span tag is a great, and often underutilized way to easily change the look and feel of virtually any aspect of your web site.  Here’s a simple scenario: Let’s say you have a div that looks like this:
Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.
We named our div “awesomediv” for this example (code below).
Here’s the HTML:

Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.
And the CSS:

.awesomediv{background-color:#36c;border:3px solid #039;padding:10px;width:460px;font-size:14px;text-align:left;color:#9cf;}
It’s okay, but it’s boring. What if you want to make part of that content stand out, but you don’t want to insert a bunch of inline css? You also don’t want to create a new Class or ID for the style. What do you do?
The Answer.

First, wrap the sentence in a span tag:

Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.

Next, simply define that span tag within your stylesheet. Like this:

.awesomediv span{font-style:italic;font-weight:bold;color:white;}
Here’s our end result:
Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.
Now that was easy, wasn’t it? If you want to get even more creative, you could also style other elements such as the “strong” tag to behave differently than intended – though I warn you, unbolding the strong tag may anger the CSS gods.
Here’s how it would have looked without the span tag:

Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.
Compatibility:

This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!

Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



css: Make Bold Items STAND OUT
DynamiXLabs — Tue, 21 Apr 2009 11:51:36 +0000
This one’s very easy, but it’s a great way to quickly increase the visibility of your bolded items.
Let’s say you have a gray color for your site’s font, but you want to make every bold item stand out in solid black. You could add unnecessary code such as BOLD
But that’s neither clean nor necessary. Instead, you can apply this directly to all instances of bold with css.
Just add this to your stylesheet:

strong{color:#000;}
Now, you will see that the bolded items stand out much more when compared to the rest of your text.
Of course, you aren’t just limited to changing the font’s color. For example, we have defined the strong tag as a block element when used within certain divs. This provides us with a way to make each strong tag fall on it’s own line, without having to add a
 tag. To do that, simply use this code:

#YOURDIVNAME strong{color:#000;display:block;}
You can see an example of this in action by viewing the source code of DynamiX Web Design under the “what makes us different” area.
Compatibility:

This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!

Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



html: playing a YouTube video at a pretedermined time
DynamiXLabs — Thu, 26 Feb 2009 16:21:48 +0000
You just found the funniest YouTube video ever and want to post a link to it, but it doesn’t get funny until two minutes in. What do you do?
Thankfully, the folks at YouTube have made this painfully easy, by adding an extra variable to the end of the URL string. For example, if your funny moment starts at 30 seconds in, you would simply add &start=30 to the end of the url.
Here’s a working example. We at DynamiX Labs love football, and enjoyed watching Rich Eisen (from NFL Network) run his 40 yard dash the other day at the Combine. For those who don’t know who Rich Eisen is, you may want to skip his intro speech, and go straight to his run. To do this, we simply embedded the video like this: http://www.youtube.com/watch?v=fZb3DRt6_Gk&start=50
Here’s the full code for those who want a straight copy:


That gets me exactly 50 seconds in, and just a moment before his run begins. See below.

That’s all folks!
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



css: hiding/showing the YouTube play/navigation bar on mouseover
DynamiXLabs — Thu, 19 Feb 2009 15:01:31 +0000
We recently had a project wherein we needed to embed a collection of YouTube videos, but without the navigation bar. Now, with a little CSS this is very easy, but we also needed to allow visitors to pause, play and navigate the video when they moused over it. Thankfully, this is just as simple, and we’re going to show you how right here.
Step 1: The HTML.

Simply encase your desired video in the div that you will be working with. Ours is named “sizeit.”










Step 2: The CSS.

#sizeit {width:425px /*this is the normal width of your video*/;height:325px /*this is ~30px less than the defined height of your video*/;overflow:hidden;}

#sizeit:hover{height:355px /*this is the normal height of your video*/;}
Step 3: Fix IE 6

Since IE 6 likes to break everything cool, it’s no surprise that it doesn’t like this method. But with the use of csshover.htc, we can get this working in no time.
Add this just before your  tag:


Adjust the url() field as needed, then save this file to your site: csshover.htc
That’s it! IE 6 now at least acts like it knows what’s going on.
Here’s the end result.

Now that you have this working, it’s easy to style it to fit your look and feel. For example, you might want to make this video appear to play on a projector screen like we have done here:



Click here to see the full example page.
Compatibility:

This method has been tested in and is compatible with Internet Explorer 6 (with fix noted above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!

Have any thoughts about this article? Let us know through the comment field below. We’d also love to see where you’ve used our method or improved upon it, comment it below for a free link  
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?

        



html: embedding a YouTube video WITH STYLES using xhtml strict code
DynamiXLabs — Sat, 24 May 2008 13:37:27 +0000
You may have seen our original article, entitled “html: embedding a YouTube video using xtml strict code,” which works just fine if you are looking to turn the default, unstyled code that YouTube gives you into XHTML strict code. But what happens if you want to embed your YouTube video with all the neat, customized styles that they allow you to configure before copying their code for use on another site? We’re glad you asked and you’re in luck, it’s still just as easy to validate.
Step 1: Get the code.
If you have ever tried to embed a YouTube video before, you know it’s pretty easy. Simply find the video you like, look to the right under the “Embed” section, and get your code. In this case, we’re covering how to embed your video with styles intact, so you’ll also want to press the “Customize” button and make your video stand out. Here’s our example, taken straight from the YouTube web site.
Example YouTube Code.
0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"> 
As in our first article, this code will work, but will throw a myriad of unnecessary errors. It’s also a lot more code than necessary. So, how do we fix it? Let’s start by giving you the correct code, then moving in to what you’ll need to do to make it work for your video.
Validated YouTube Code
&color1=0xe1600f&color2=0xfebd01&border=1">


This will work just as well as what YouTube provides, but with less code and with no validation errors. To make this code work for your video, here’s what you’ll do:
1. Modify new code example to include your particular YouTube video width and height.
2. Modify the data=”" and value=”" variables to include your YouTube link, maintaining the additional variables (in this case the full string is http://www.youtube.com/v/ERuMIlyzWBA&hl=en&

color1=0xe1600f&color2=0xfebd01&border=1).
3. Replace all bare ampersand (&) symbols in the data and value strings with &. The end result will look like this:

http://www.youtube.com/v/ERuMIlyzWBA&hl=en&

color1=0xe1600f&color2=0xfebd01&border=1
That’s it! Just a touch more work than validating a standard (unstyled) YouTube video, but certainly nothing to lose any sleep over.
See the end result in action!

Missed our first article? You can find that here. Interested in learning more about how to utilize YouTube in your business? Then you’ll love another one of our articles entitled A quick look: YouTube and what it could mean for your business
Compatibility:

This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
Thanks for reading! If you found one of our articles helpful, we would love to hear about it. Leave us a comment or send us an e-mail.
Tweet This!
Digg this!
Stumble upon something good? Share it on StumbleUpon
Share this on Technorati
Share this on Facebook
Email this to a friend?
Subscribe to the comments for this post?