<script type="text/javascript" language="javascript">
function changeColor(str)
{
document.getElementsByTagName("BODY")[0].style.background = str;
}function changeFont(str)
{
document.getElementsByTagName("body")[0].style.fontFamily = str;
}function changeSize(str)
{
document.getElementsByTagName("p")[10].style.fontSize = str;
document.getElementsByTagName("p")[2].style.fontSize = str;
document.getElementsByTagName("p")[3].style.fontSize = str;
document.getElementsByTagName("p")[5].style.fontSize = str;
document.getElementsByTagName("p")[6].style.fontSize = str;
document.getElementsByTagName("p")[7].style.fontSize = str;
document.getElementsByTagName("p")[8].style.fontSize = str;
document.getElementsByTagName("p")[9].style.fontSize = str;
}
function hide(){
var jet = document.getElementById('jetscram').style;
jet.visibility="hidden";}
</script>
<style type="text/css">
div#jetscram{ background:url(http://jetscram.com/images/logo.gif) top left no-repeat; background-color:#ffffff; border:6px #333 solid; font-family:Helvetica, Arial, sans-serif; color:#333; height:28px; padding-left:65px; padding-top:12px; position:fixed; bottom:0; width:594px; left:50%; margin-left:-342px; z-index:5;}
#jetscram select{ width:120px;}
* HTML div#jetscram{ margin-left:0px;}</style>
<div id="jetscram">
Font <select name="fontchange" onchange="changeFont(this.value)">
<option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
<option value="Arial, Sans">Arial</option>
<option value="Verdana, Sans">Verdana</option>
<option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
<option value="Georgia, Sans">Georgia</option>
</select>
Font Size
<select name="fontsize" onchange="changeSize(this.value)">
<option value="12px">12</option>
<option value="13px">13</option>
<option value="14px">14</option>
<option value="15px">15</option>
<option value="16px" selected="selected">16</option>
<option value="18px">18</option>
</select>
Background Color
<select name="backgroundcolor" onchange="changeColor(this.value)">
<option value="#008ed7">0%</option>
<option value="#005fb2">33%</option>
<option value="#012f8b" selected="selected">66%</option>
<option value="#010066">100%</option>
</select>
<a href="#" onclick="hide()" >hide</a>
</div>
Font size and Font Family Javascript Changing Tool
May 2nd, 2008 — Web Development
Auto Restrain/resize images with Javascript
April 19th, 2008 — Web Development
This javascript script resizes all image on the page, it can be controlled by the variable i and the greater than clause in the for loop. i=0 means it starts from the first image, change i=3 it will start from the forth image. The greater than clause will resize x amount of images. right now it resizes 10 images. The first 100 seen decides if the image is under 100 pixels wide not to resize it to 100, the second is what to resize the image too. comment any questions
<script language="javascript" type="text/javascript">
<!--
function resize_images()
{
for (i = 0; i < 10; i++)
{
while ( !document.images[i].complete )
{
break;
}
if ( document.images[i].width > 100 )
{
document.images[i].width = 100;
}
}
}
//-->
</script>
To implement the function on the page use this as your body tag
<body onLoad="resize_images()">
CSS text link image icon hover replace with images
April 9th, 2008 — Web Development
This post teaches you how to replace CSS text links with an image and an image hover state.
An example can bee seen here (the icons above the main image)
Before doing this it is a good idea to preload your images with javascript to avoid the get lag that occurs when mouses over the link for the first time.
First lets set up the HTML
<p id="icons">
<a href="#" class="enlarge">enlarge</a>
<a href="#" class="avatarit">avatar it</a>
<a href="#" class="dolike">i like it</a>
<a href="#" class="dontlike">don't like it</a>
<a href="#" class="favorite">favorite</a>
</p>
Note that we gave the paragraph an ID and each anchor tag has its own specific class
Lets move onto the CSS
p#icons a{width: 67px; height:21px; text-indent:-9000px; display:block; float:left; margin-right:4px; margin-bottom:4px; }
p#icons a.enlarge{ background:url(http://kilroylives.com/images/buttons/enlarge.gif) top left no-repeat; }
p#icons a.dolike{ background:url(http://kilroylives.com/images/buttons/likeit.gif) top left no-repeat; }
p#icons a.dontlike{ background:url(http://kilroylives.com/images/buttons/dontlike.gif) top left no-repeat; }
p#icons a.avatarit{ background:url(http://kilroylives.com/images/buttons/avatar.gif) top left no-repeat; }
p#icons a.favorite{ background:url(http://kilroylives.com/images/buttons/favorite.gif) top left no-repeat; }
p#icons a.enlarge:hover { background:url(http://kilroylives.com/images/buttons/enlarge-over.gif) top left no-repeat; }
p#icons a.dolike:hover { background:url(http://kilroylives.com/images/buttons/likeit-over.gif) top left no-repeat; }
p#icons a.dontlike:hover { background:url(http://kilroylives.com/images/buttons/dontlike-over.gif) top left no-repeat; }
p#icons a.avatarit:hover { background:url(http://kilroylives.com/images/buttons/avatar-over.gif) top left no-repeat; }
p#icons a.favorite:hover { background:url(http://kilroylives.com/images/buttons/favorite-over.gif) top left no-repeat; }
Notice the first line of CSS I set all the anchor tags in the paragraph to a certain height and width. I did this because all my icons were the same. If you images vary, use individual height and width sizes in the individual link classes. Most likely all your images will have the same height, so use that first line to shave some code.
Also in that first link I set display to block. Doing this allows me to have the text I wrote in the anchor tags to be negative indented so it isn't seen by the common user. Doing so make it legible to the seeing impaired which is Section 508 compliant and good in general for search engines!
Setting display to block forces each link to break down, so float is set to left to have them show up on the same line.
Each anchor class has a background field, this is where you put the image you want to load. under the anchor classes :hover state, put in the hover image. If you wish not to have a hover image remove the :hover line.
It is good to preload the images you use because there will be lag from the CSS loading the image for the first time. Learn to preload with javascript here.
Javascript preload images script
April 9th, 2008 — Web Development
This post teaches you the proper efficient way to preload images with javascript.
if (document.images)
{
preload_image = new Image();
img_path = new Array();img_path[0] = "http://kilroylives.com/images/buttons/avatar.gif";
img_path[1] = "http://kilroylives.com/images/buttons/avatar-over.gif";
img_path[2] = "http://kilroylives.com/images/buttons/enlarge.gif";
img_path[3] = "http://kilroylives.com/images/buttons/enlarge-over.gif";
img_path[4] = "http://kilroylives.com/images/buttons/favorite.gif";for(var i = 0; i<=img_path.length; i++)
preload_image.src = img_path[i];
}
All you need to do is add more img_path[x] = ""; line for each image to preload. This is very usual when using CSS text links with background images.
Google Adsense Optimization Breakdown
April 8th, 2008 — Web Development
This post explains what I've learned about Google Adsense. It explains the figures like cpm, eCPM, Page CTR, and Earnings. DCE Started using Google Adsense early 2005. Up until the beginning of this year it's had very little success. The success increment is due to redesigns, studying, and experimentation. Below are 8 bits of information I wish I knew from the start.
- Placement. People won't read ads unless they're practically forced too. I can't remember the last time I've looked away from content to read advertisements. Can you? My first site designs had Google ads running along the the left of right hand side (separated from the content or navigation). This was done with design in mind, it looked pretty because the nasty Google ads were at least 100 pixels away from the content at all time. Jakob Nielsen has a great study out on Screen reading eye patterns, its sums up eye tracking to an F-shaped pattern, read it.
- Design. Don't try to hard. If you are apparently forcing the ads, not one will read your content. Don't use more than 2-3 adsense boxes a page. Break up the content with ads or put them before and after if you hate to sacrifice design and the content like myself.
- Content. Content is king. Make sure your content is valuable, helpful, or informational. Check your time on site stats with analytics, if its low people aren't reading your content. I know there are quite a few out there that will reward good content by checking out the sites ads. Quality content will eventually earn you invaluable link ins.
- eCPM. eCPM is effective clicks per thousand impressions. The number is a rough figure of what your site will make per 1000 ad impressions. Example: in March my page impressions were 1,153, my eCPM was $2.56 (made around 3 dollars that month) eCPM is a great way to gauge a new site designs effectiveness in a few days rather than waiting a full month. An average CPM $9-12, with my last redesign DCE finally broke into the average after 3 years of failure.
- Page CTR. Page Click Through Rates is the number of clicks an ad receives divided by the number of times is is displayed. If you want to keep this number high consider using ad units with fewer ads displayed. In some instances you can control this in the ad unit options.
- Ad Units. Yes, there are ad units that prove more successful. I've noticed the large square and vertical rectangle ad have the highest CTR on my site. The small ad links get decent hit, but the earning per adlink is very low. This being said it is site design specific, experiment, some ads will work better than others depending on your site design.
- Statistics. Understand your stats, read up on analytics/adsense stats. Eventually you want to be able to read these stats like the Neo from the Matrix. Things will click and make sense ; )
- Failure. You will fail, things wont happen over night. Personally I would focus on getting your page traffic up before you start advertising. A good goal is to get 500-1000 pageviews a month, this way you can read your eCPM fairly accurately.
Thats all for now, go get up. Please post comment on your experiences and I will append them to this list.
MySQL Case sensitive and Case insensitive search with Match and Like
This post teaches you how to set your MySQL search queries to be Case sensitive or case insensitive.
It's all in the database collation. MySQL by default search case insensitive. In phpMyAdmin or or Putty change the Collation of your fields. Collations that are binary search case-sensitive. Collations that end with _ci like latin1_swedish_ci are case insensitive (ci is an acrynm for case insensitive.
To change your Collations quickly run this code in a loop:
ALTER TABLE tablename CONVERT TO CHARACTER SET latin1 COLLATE latin1_swedish_ci;
Subaru WRX Cobb Accessport V2 Review - 2004 Subaru WRX
March 15th, 2008 — Hacks, How to
So I understand this may deviate from the usual geekdom found here but we’re car nerds too and well this applies. I drive a 2004 Subaru WRX. It comes with a turbo’ed 4 cylinder boxer engine with 227 HP and 217 TQ at the crank. So I purchased a Cobb Accessport for my 2 liter engine. http://cobbtuning.com/products/?id=3264 This is an ECU map loader and reprogrammer. On a stock WRX it promises 30HP and 43TQ on a 2004 WRX. This is a huge difference and while you get more power most people have reported smoother acceleration and actual better gas mileage under normal use. The device isn’t cheap at $695 but the build quality and service that comes along with it are excellent.
Using the Accessport is unbelievably simple. There are two green plugs under the driver’s side dash that you need to connect to enable “Test Mode”, then using the supplied jumper connect one more plug. The accessport plugs into the OBDII port on the car and then fires up. The accessport automatically backs up your current ECU configuration and then allows flashing of a new map. It comes preloaded with a few maps and then there are many more on Cobb’s site that are available, and can be loaded via USB.
The list of features for this device is crazy, not only can it load maps and flash the ECU, it has maps for high gas mileage, valet mode (i.e. no power) , theft mode (where the car won’t start) , Performance calculations for 0-60 and ¼ mile times, live data including --- boost, RPM, Coolant Temp, Intake Air Temp, MAF sensor, Ignition Timing, MPH, and many more I’m probably forgetting. Another great feature is the ability to view and clear CEL codes for the car. This saves a trip to the dealership/AutoZone and also is indispensable when modding a car, just to see if you screwed up.
I flashed the Stage 1 map for 93 octane and the entire process took under 10 minutes. Immediately when I started it up it idled really rough so I let it run for 15 minutes or so and it seemed to even out. There was a definite performance difference and I could tell this was well worth the money. After a few days of driving it continued to improve and the car runs better, shifts cleaner under heavy acceleration, and accelerates faster. I’ll check back in after a week or so because it is supposed to continue to improve and relearn the fuel curves as I drive.
Pics-
Accessport
Accessport In box
Accessport In box 2
Accessport - Wiring This picture shows the underside of the drivers side dash. The bright green connector you see on the right is the connector that needs to be plugged in to enter "Test Mode" and the black connector you see right next to it is the one that needs to be jumped in order to flash the ECU.
Accessport - OBDII This is the Cobb connector plugged into the OBDII port, you can see the mini-usb plug on the bottom for connecting to the unit.
Accessport - Flashing This shows the Accessport all plugged in to the OBDII port using the connector in the last pic. You can see the change map screen to choose what gets flashed to the unit.
Accessport - Live Data Here you can see the live data view. Leaving the Accessport plugged in while driving allows you to monitor a wide variety of stats through the ECU. Here you can se the Air/Fuel ratio as I'm sitting idling.
