Entries Tagged 'JavaScript' ↓

Clear/Remove/Blank out Value from Input Form

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);"

Auto Restrain/resize images with Javascript

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()">

Javascript preload images script

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.

Create a Javascript Array with PHP from a MySQL Database Table

Wrote this function to check email addresses already in a database, so I dont have to change pages, and check with javascript. Problem: it exposes your whole email list to the public in the source code, and the source code can become a monster length. So it isnt practical, but it works. (I'm not using it to check emails)

The script proves useful to do other things with javascript and spawn arrays to manipulate data... etc.

function jarray(){

$sql = "SELECT * FROM table_name LIMIT 0, 100000000";
$jarray = "var your_array = new Array();\n\t\t";
$i = 0;
$q = mysql_query($sql);
while($object = mysql_fetch_object($q)){
$jarray = $jarray."your_array[{$i}] = \"{$object->field_name}\";\n\t\t";
$i++;
}

print $jarray."\n";
}

Put your own info where the Text is bold

Best Javascript Email Address Validation for Forms and Input

I've used many before, this is the cleanest without too much code. It features a nice onfocus clear value bonus. When the email is incorrect after click the alert box when the email is invalid, it will clear the mail input field value and bring the cursor directly to the the email input box. The email validation does not check is the email actually works, just is it appears valid, excellent for javascript!

Javascript Email Input Validation Script

Javascript: Detect MAC Apple platform to change CSS

The letter-spacing is treated differently on OSX than Windows XP. This can cause problems if you basing a design off text-based CSS. This fix works perfectly if you using a simple dropdown menu that uses absolute positions and auto margins, so its not a child of the initial menu you made, an example can be seen here: www.cmcri.org

A simple javascript code can detect a MAC platform with an IF statement, IF it is MAC then write to document a style. This code must be inserted after your initial call for your style sheet so it overwrites the original CSS code.

if(navigator.userAgent.indexOf('Mac') != -1)

{document.write ('<style type="text/css">#header ul li a{letter-spacing:.025em;}</style>');}

Easy fix!

Conjuncting Javascript Variables with Strings

To add a variable mid string in javscript use the plus operator ( + )
Example:

var page;
page = "50";
document.write("Delete Page " + page + "?");

or when used within a function

function confirmDelete(delUrl,page) {
if (confirm("Delete Page " + page + "?")) {
document.location = delUrl;
}
}