JavaHelp.info

If you use JavaScript to put some dynamic to your websites you often have the problem to pass parameters to the event-function. One solution is to use closures. With the element of closures you can access outer variables from inner inline functions.
Continue reading

Sometimes in a complex javascript-application you want to display an image when it is fully loaded. Until then you want to show for example a common loading-image. In this case the best solution is to load the image in background, and then show it to the use. For that you can use the Image-Class provided by the browsers.

This class is the used Class at img-Tags. So you have all known properties, like “src”. With the onload-Event you can then check, if the image was fully loaded or not. An example would be:

1
2
3

var image = new Image();
$(image).load(function () { alert("picture is fully loaded."); });
image.src="http://www.javahelp.info/wp-content/uploads/2009/11/Bild-80-300x64.png";

In the example I use JQuery for event-handling, because this is more comfortable as the normal event-method of JavaScript.

JavaScript provides a class “Date” to work with dates. In this short article I want to give some tips with date calculation.

1. Working with seconds

The easiest way, if you need to calculate with seconds, minutes or hours, is to use the provided methods getTime() or setTime(). Here you will get or you can set the microseconds since 1.1.1970. So if you want to add one hour, just add 3.600.000 microseconds:

1
2

var date = new Date();
date.setTime(date.getTime()+3600000);

2. Working with days

If you work with days, the way with getTime()/setTime() is not preferred, because you have to honour the summer / winter time. So calculating with days, months or years should be done using the provided methods getDate() / setDate(), getMonth() / setMonth() or getFullYear() / setFullYear(). These methods are fault tolerant, so you can set the 35. day of a month and the date is correctly converted to the given day in the next month.

1
2

var date = new Date(2009,1,25); //date is 2009-02-25
date.setDate(date.getDate()+5); //would change date to 2009-03-02

If you use XHTML as HTML-Standard, which is recommended, to build your sites and you use JavaScript, you could have problems with document.write. Especially third-party JavaScript extensions like GoogleMaps or CKEditor use document.write to easily inject own JavaScript code.

But this is denied by specification for XHTML-Documents delivered with content-type application/xhtml+xml instead of text/html. You will receive the DOM Exception #7 by calling document.write or while using innerHTML (Example in Safari: “Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7″; in Firefox: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement.innerHTML]“  nsresult: “0×80004003 (NS_ERROR_INVALID_POINTER)”  location: … ]). The solution is to deliver the Website with content-type “text/html” instead of “application/xhtml+xml”.

In SEAM using Facelets (with JSF) as View, you can set the content-type in the f:view-Tag. This would look like:

1
2
3
4
5

...
<f :view contentType="text/html">
....
</f>
...

If you use JQuery you can use the effects for dynamically hide and show html-elements, like boxes and so. But how to test if such a element is currently visible or not? JQuery offers here some selectors, named :hidden and :visible, which can be used. If you combine it with the “is” method, you can easily check the state.

1
2
3

alert($("p").is(":visible"));
$("p").hide();
alert($("p").is(":visible"));

This code would output “true”, “false” for a normal p-tag.

Currently I develop a CMS in Java using Seam and JSF. Target of the CMS is a simple CMS-Structure which can easily be added to a existing Seam-Application and then provide the editable content via simple JSF-Components. Maybe I will later write some more informations about this CMS.

To easily edit text-content I include the Javascript RTE-Texteditor CKEditor. This editor transform a simple Textarea into a full featured RTE-Editor. The simple include-code looks like:

1

CKEditor.replace('idoftextarea');

But you can also define some configuration properties. Especially the events are not fully documented yet for version 3.0. A really interesting event is the onComplete-event or other called the instanceReady-event. This event is called if the editor is fully loaded.

A sample definition could be:

1
2
3
4
5
6
7

CKEditor.replace('idoftextarea', {
    on: {
        instanceReady: function(ev) { 
            window.alert('I am ready loaded'); 
        }
    }
});

A use case for such an event could be automatic resize of the editor, for example maximize.
You can also define a global event for every CKEDITOR-instance in this way:

1
2
3

CKEDITOR.on( 'idoftextarea', function( ev ) {
    window.alert('Im a ready loaded');
});