Noob Flash

Archive for the ‘HTML’ Category

How is this possible you ask?  Magic? Witchcraft? Positive Thinking? Actually, it’s an open source project called Gordon.  Gordon is an open source Flash™ runtime written in pure JavaScript.  If embeded into the html page correctly, Gordon enables the iPhone to render the swf content using JavaScript.

So what does this mean for the average iPhone user?  Not much, really.  It does give a glimmer of hope that we might see a full force version of Flash on the iPhone sooner rather than later, but Gordon doesn’t do much for the average iPhone user just yet.

Flash developers, however, will be able to use Gordon to embed their flash movies in a way that can at least be displayed on the iPhone.  At this time, iPhone users will probably not run across any flash that is embedded using Gordon.

It’s a step in the right direction, but shame on you Apple for forcing the developer community to this.

Gordon Demo: http://paulirish.com/work/gordon/demos/ (View html demo files on your iPhone to see it in action)

If you’re like me, you get tired of seeing those ugly query strings tacked onto your website url. On really nice (and easy) solution for this is to use Apache Mod_Rewrite. This generally only requires adding a few lines to your .htaccess file. When I started trying to create my first SEO friendly URLs, I could not get my website to recognize any of the code in my .htaccess file. Obviously, this is was very frustrating. After a couple of weeks of searching the internet and wondering why my “perfect” code wasn’t working, I realized that my GoDaddy PHP hosting account was being hosted on a Windows server running IIS7. The answer to my problems hit me like a ton of bricks! Windows does not support or use .htaccess files! Once I switched to a Linux server my .htaccess code ran perfectly.

The code below will internally redirect http://www.yoururl.com/location/texas/dallas to http://www.yoururl.com/index.php?state=texas&city=dallas. The SEO friendly URL will be displayed but the page will be executed as if the complete, query string laden url was used.

The [L] at the end of each line tells the server to stop executing the .htaccess code if the previous line was successful.

–

Options +FollowSymLinks
Options -MultiViews
RewriteEngine on

RewriteRule ^location/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$ index.php?state=$1&city=$2 [L]
RewriteRule ^location/([a-zA-Z0-9_-]+) index.php?state=$1 [L]

–

For More Apache Mod_Rewrite rules, check out the Apache Rewrite Cheatsheet.

A few day ago, I was doing some CSS styling and ran across something that I thought would be useful.

If you ever want to style multiple HTML input elements separately using CSS, you just need to access the type attribute.

For Example, if I want to set the text color of my text field to white, but I want the text color of my submit button to be black, I would use the following code:

input[type="text"] { color: #FFFFFF; }
input[type="button"] { color: #000000; }

It’s really that simple!

P.S… sorry for the long delay between posts… my wife and I have our second kid on the way so things have gotten very crazy for us!

I created this JavaScript image rotator to solve a problem a client of mine was having on their site last week.

The first step is to create an empty div that the images can be loaded into. The easiest way to access a specific div from JavaScript is to make sure the div has an id, and access the div by referencing the div id as such:

var bannerHolder = document.getElementById('bannerHolder');

Once you have created the div and have a way to reference it via JavaScript, you will need to create an array of image urls to loop through.

var bannerArray = new Array();
var currentImage = 0;
bannerArray = ['http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/google.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/yahoo.jpg','http://www.noobflash.com/wp-content/themes/LemonPress/images/JavaScriptImageRotator/msn.jpg'];

Tie these pieces of code together using setInterval to create the timed rotation and you have your image rotator. Get the complete code using the link below:

Get Complete Code

I have had several people ask me how to get URL QueryString values in JavaScript, so I created a function that will take a string, find the matching QueryString key, and return the value associated with that key. Enjoy!

NOTE: You may have to remove and re-type the “s from the code below if you copy it from this page. Some of them don’t come through correctly when you paste into your dev application.

<script type="text/javascript"> function queryStringValue(findName){ var name = new String(); var value = new String(); var querystring = document.location.href; if(querystring.indexOf("?")==-1){ return "null"; } querystring = querystring.split("?"); querystring = querystring[1].split("&"); for(q=0;q<querystring.length;q++){ var pair = querystring[q].split("="); name = pair[0].toLowerCase(); value = pair[1].toLowerCase(); if(findName.toLowerCase() == name){ return value; } } } document.write(queryStringValue("noob")); </script>

Let's pretend the URL of this page is http://www.noobflash.com/foo/index.html?noob=someValue. The code above will find the first QueryString instance of "noob" in the URL and return the "someValue" portion to be used in your code. You would simply type queryStringValue("stringToFind") whenever you would like to get new QueryString data.