Alessandro Lacava

Category: Programming

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...

How to add scrollbars to a block (e.g. a <div> element)

Posted:   |   Categories: CSS, Programming

If you need to customize a list box then the <select> HTML element might not be enough. In such a case you’d like to have something that simulates the <select> behaviour.

Here is the code to use to obtain a custom list box:

     
<html>
  <head>
  </head>
  
  <body>
    <div style="width: 200px; height: 200px; overflow: auto;">
      <table width="100%" height="100%">
        <script>
          for (var i = 0; i < 30; i++) {
            if (i % 2 == 0) {
              document.write(
              "<tr style='background-color:#0066ff; color: #ffffff'>" +
              "<td>JavaScript</td></tr>");
            }
            else {
              document.write(
              "<tr style='background-color:#ff6600; color: #ffffff'>" +
              "<td>JavaScript</td></tr>");
            }
          }
        </script>
      </table>
    </div>
  </body>
</html>

The key CSS element is overflow. If you use overflow: auto then the scrollbars are displayed only if they are needed. If you want to display them in any case then you need to use overflow: scroll.

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...