Entries Tagged 'JavaScript' ↓

How to Reload a Page with Javascript

A simple page reload with javascript can be very useful. Here is the code:

<script type="text/javascript">
window.location.reload();
</script>

That will keep refreshing the page you are on. To trigger the reload event you can use the code inline on a HTML element

<a href="javascript:void(0)" onclick="window.location.reload();">Reload the Page</a>

To abstract the code out and use it more than once, in your HTML head create

<script type="text/javascript">
function pageReload(){
       window.location.reload();
}
</script>

And create an HTML element like so

<a href="javascript:void(0)" onclick="pageReload();">Reload the Page</a>

Mootools Sortables Clone Not Under Mouse Pointer

When running mootools sortables, when dragging the cloned element around sometimes the cloned element is offset from the mouse pointer. There is a simple method to avoid this. See the enclosing container to position relative. Like so

<ul style=”position:relative”>
<li>sortable</li>
<li>sortable</li>
<li>sortable</li>
<li>sortable</li>
<li>sortable</li>
</ul>

and that’s it.

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 <strong>table_name</strong> LIMIT 0, 100000000";
$jarray = "var <strong>your_array</strong> = new Array();\n\t\t";
$i = 0;
$q = mysql_query($sql);
while($object = mysql_fetch_object($q)){
$jarray = $jarray."<strong>your_array</strong>[{$i}] = \"{$object-&gt;<strong>field_name</strong>}\";\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