In your HTML HEADER add this code
<script type="text/javascript">
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
</script>
In your html input tag add this code
onfocus="clearText(this);"
Clear/Remove/Blank out Value from Input Form
October 23rd, 2008 — JavaScript, Web Development
Installing Spanish in Zen Cart Admin Error
October 16th, 2008 — Troubleshooting, Web Development, Zen Cart
Upon installing spanish on the front end, I recieved an error in yellow about not having the correct files for the language spanish, yet the front end spanish worked. To fix the problem download this zip, unzip and drop the admin folder into your root zen directory. Then push all the files to the server.
Font size and Font Family Javascript Changing Tool
May 2nd, 2008 — Web Development
<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>
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.
