JavaScript

Posts about the client side scripting language JavaScript.

JavaScript Logo

JavaScript To Stop Frames

27th May 2008 - 2 minutes read time

The following section of JavaScript will detect if anyone is viewing your page in a frame. If they are then the code will redirect them to your site. It essentially stops people using frames to poach your content and stops online proxy software from viewing your site.

if (top.location != location) {
 top.location.href = document.location.href;
}

All you have to do is include this code either in your script tag or your JavaScript includes. Quite a neat little trick really.

Read the full article

JavaScript Logo

Assign Or Get Class Name Attribute With JavaScript

24th May 2008 - 3 minutes read time

To get the class of an element with JavaScript you use the className property of the element object. Take the following section of HTML code.

<div id="adiv" class="theClass">some text</div>

Use the following bit of code to print off the class name of the div element in a message box.

alert(document.getElementById('adiv').className);

To set the class name to something else you can use the same property, but in this case just pass it a value. The following example changes the class name of the div element to 'newClass'.

Read the full article

Script.aculo.us - Web 2.0 Javascript

11th May 2008 - 2 minutes read time

Script.aculo.us is a JavaScript framework that allows you to add effects and advanced JavaScript features to any web page. Although Script.aculo.us can be a little slower than Mootools on occasion it makes up for this by having more stuff built into the library components. For example, the slider control is available of both frameworks, but the Script.aculo.us version comes with some handy features (like filling one part of the slider) where the Mootools version doesn't.

Read the full article

JavaScript Logo

Linked HTML Drop Down Menus With JavaScript

8th May 2008 - 3 minutes read time

A good usability feature of web forms is to fill the contents of one drop down menu, depending on what has been selected in a previous menu. This can be done quite easily with JavaScript.

Take the following form, in this instance I have used some server variables used in mod_rewrite, but the idea is valid.

Read the full article

JavaScript Logo

Check Or Uncheck All Items In A Checklist With JavaScript

6th May 2008 - 3 minutes read time

If you have lots of check boxes in a row a handy little usability trick is to allow a user to click on a button and check all of the checkboxes at once. The following function will either check or uncheck all of the check boxes in your form.

function check_uncheck(truefalse){
 var boxes = document.forms[0].chkboxarray.length;
 var form = document.getElementById('checkForm');
 for(var i=0;i < boxes;i++){
  if (truefalse) {
   form.chkboxarray[i].checked=true;
  } else {
   form.chkboxarray[i].checked=false;
  }
 }
}

All you need to do is to add two buttons to your form that will allow users to either check or uncheck the boxes on the form. The function takes a single parameter, which is what to set the value of the check boxes to, so one button is needed to set them to checked and one to unchecked.

Read the full article

Firefox JavaScript Debugging And Development With Firebug

3rd May 2008 - 3 minutes read time

Firebug is by far the best JavaScript debugging plug-in available for Firefox. I have been stuck on a few problems in the past and Firebug has usually provided me with a reason as to why things are going wrong. In fact when developing for other browsers (like Internet Explorer) I can feel a little blind as there are no debugging tools with the power and features of Firebug. It can allow you to stop JavaScript execution at any time using breakpoints.

Firefox JavaScript Debugging And Development With Firebug

Firebug is important if you are creating AJAX applications as it will tell you about every client/server communication, what headers where sent and what the response was.

Read the full article

JavaScript Logo

Using JavaScript To Run Form Events

13th March 2008 - 3 minutes read time

Creating a form as part of an AJAX control is a common practice, but when you include a submit button within the form the default behaviour of the form is to redirect to the destination supplied in action. To run a form using JavaScript you need to include two things.

<form action="javascript:return false;" method="post" id="analysisForm" >

In order to overwrite the normal operation of a form you will need to replace the action attribute with some JavaScript code that returns false. This is can be done in the form of come in-line JavaScript code (commonly called a bookmarklet) in the place of any URL in the action attribute of the form.

Next, in order to actually get JavaScript to intercept the form submission action an onsubmit event is added to the form tag.

Read the full article

JavaScript Logo

JavaScript Simple Loop Optimisation

18th February 2008 - 3 minutes read time

When writing JavaScript applications I normally write for loops like this.

for (var i = 0; i < elements.length; ++i) {
  // loop...
}

There isn't anything wrong with this, but it is not an efficient way of doing things. All it takes is a little knowledge of what the for loop does every time it runs. The loop can be split into three sections like this.

Read the full article

Highlight Area With mootools

10th February 2008 - 4 minutes read time

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.

<script type="text/javascript" src="mootools.js"></script>

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the 'domready' event to the window object of the page.

Read the full article