<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>
Entries Tagged 'Web Development' ↓
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.
Display Wordpress Post Number on Single Page with post ID
February 26th, 2008 — Web Development, Wordpress, Wordpress Functions
You can see it work throughout this wordpress blog, to the right you see DCE Article 94. Notice you can select the number as text. The number is pulled from the post on every single page by placing this line of code in your wordpress single.php template page.
<?php the_ID(); ?>
Note: When using this line of code be sure it is between these two lines of code in your single.php page
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
I place the code in its own div with a background image to create the illusion of unity. I use margins to move the number to the right spot of the image. My CSS and Code looks like this.
<style>
#page_number_id_spawn { float:left; text-align:right; margin-top:240px; width:135px; color:#900; font-size:30px; font-family:Georgia, 'Times New Roman', Times, serif;}</style><div id="page_number_id_spawn"><?php the_ID(); ?></div>
New Design for DCE: SEO, Legibility, 1024 Screen Design
February 23rd, 2008 — Web Development
Please note, the site will look funky between Saturday Feb 23rd 6pm Eastern - Sunday Feb 24th 6pm. During this time we will keep the content legible, but the navigation system maybe be shaky. Please comment to help out!
Changes are going to revolve around overall legibility and typography, smarter advertisements, more contrasting color scheme, usability, 1024 screen design, and a big SEO package.
With the last DCE 0.9 design we averaged 900-1000 hits on a 30 days rotation. In the next 30 Days I will post the numbers back on this Page.
