Alessandro Lacava

Category: JavaScript

How to display an element to the center of the browser

Posted:   |   Categories: CSS, JavaScript, Programming

Sometimes you might need to display an element, for example a div, to the center of the browser. Here is an example of how you can do it using JavaScript and CSS.

  
function init() {
  // Reference to the element
  var loading = document.getElementById("loading");
  // The div's width, set within the CSS class
  var loadingWidth = loading.offsetWidth;
  // The div's width, set within the CSS class
  var loadingHeight = loading.offsetHeight;
  // The browser's body's width
  var documentWidth = document.body.clientWidth;
  // The browser's body's height
  var documentHeight = document.body.clientHeight;
  // Position the element absolutely
  loading.style.position = "absolute";
  // Center horizontally
  loading.style.left = (documentWidth - loadingWidth) / 2;
  // Center vertically
  loading.style.top = (documentHeight - loadingHeight) / 2;
}

This code supposes you have a div element within your page with id=“loading”, for example:

Read more...

How to detect the selected checkboxes using JavaScript

Posted:   |   Categories: JavaScript, Programming

Here is an example of how you can retrieve the selected checkboxes using a JavaScript function:

  
<html>
<head>
<script>
function getSelectedValues(elem) {
  var elemNumber = document.myForm.test.length;

  var selectedElems = [];
  for(j = 0; j < elemNumber; j++) {
    if(elem[j].checked) {
      selectedElems.push(elem[j].value);
    }
  }
  return selectedElems;
}
</script>
</head>

<body>
<form id="myForm" name="myForm">
<input type="checkbox" id="test" name="myCheckBox" value="test1">
Test 1


<input type="checkbox" id="test" name="myCheckBox" value="test2">
Test 2


<input type="button" value="Click Here" 
  onclick="alert(getSelectedValues(document.myForm.myCheckBox));">
</form>
</body>

</html>

In the previous example when the user clicks on the button the selected checkboxes are displayed through an alert.

Read more...

Sorting an array of objects with the sortBy method of Prototype

Posted:   |   Categories: JavaScript, Programming   |   Tags: Prototype

Here is an example of how easy it is to sort an array of objects using the Enumerable.sortBy method of the Prototype framework:

    
var obj1 = {
  lastName : "Lacava",
  firstName : "Alessandro"
};

var obj2 = {
  lastName : "Brown",
  firstName : "John"
};

var obj3 = {
  lastName : "Simpson",
  firstName : "Bart"
};

var arr = [obj1, obj2, obj3];

//order by last name
var sorted = arr.sortBy(function(obj) {
    return obj.lastName.toLowerCase();
  }
);

var str = "";
sorted.each( function(obj, index) {
    str += index + 1 + " - " + obj.lastName + " " + obj.firstName;
  }
);

//display the elements ordered by last name
document.write(str);
Read more...

How to include a .js file (a JavaScript file) within another .js file

Posted:   |   Categories: JavaScript, Programming

Actually, there is no function you can call to include a JavaScript file within another one. This is the bad news. The good news is that you can use a trick to accomplish this task. Suppose you have two JavaScript files, say file1.js and file2.js. You want to include file1.js within file2.js because you want to use file1’s functions. Here is the code you can use:

 
//this is file2.js
document.write("<script src='file1.js' type='text/javascript'></script>");

// here you can use functions defined in file1.js

As you can see it suffices “to write” in the browser the code you generally use to include a JavaScript file within an HTML file and you’re done!

Read more...