Category Archives: js/dhtml

Ignoring mouse events on the scrollbar

Say you implemented a popup. In order to make the popup disappear when the user clicks on some other area of the browser, you would have to capture the mouse events. So far so good. However, if the popup goes beyond the visible area, then the user would use the mouse to scroll using the scrollbars. Unfortunately, by the time the scrollbar is adjusted and the mouse button is lifted, it triggers a onmouseup event which will close the popup. One way to prevent this is, checking the source element of the event being HTML element. Something like if(source.nodeName == “HTML”) return; where source is the source of the event.

Advertisements

Leave a comment

Filed under javascript, js/dhtml

Generating DHTML on the server vs client

DHTML, CSS and AJAX are all making people write more and more complex html code, ofcourse providing very good user experience. Dynamically displaying a UI control based on some user action can be achieved in two ways

1. By having the ui control pregenerated but hidden
2. By dynamically creating the dom necessary for the ui control and inserting it into the page’s dom.

The former can be done on the server side. The later, while the necessary components are still generated on the server side, the actual dom element construction and putting it into the page’s dom is done using JavaScript on the client side.

For most cases, I would recommend taking approach 1. This is because, tools like DOM Inspector seem to show only the initial dom when the page is loaded. Any subsequent manipulations to the DOM doesn’t seem to show in the DOM Inspector tree. So, debugging such changes could be really painful. Recently I had encountered one such senario for an AJAX application where the UI creation is happening on the client side using javascript.

Ofcourse, there may be cases where this can only happen on the client side. For example, to provide an ability to create any number of rows by clicking a “add another row” button, pregeneration of all the row regions before hand on the serverside is not feasible. So, that’s when the DOM manipulation on the client side will come handy.

So, unless you have this complexity, stick with pre-generating the UI elements on the serverside. You have a way to view the created HTML which makes it easy to debug.

Leave a comment

Filed under DHTML, javascript, js/dhtml, Tech - Tips