stopPropagation vs. cancelBubble

There are many occasions when you have to override the default action of an event. The browser has to go through every single ancestor element of the event target to see if it has an event handler.

For this reason we very often must stop the event propagation. Here is my function that I use to stop event propagation in every kind of web browser.

<script type="text/javascript">
  function StopEventPropagation(oEvent) {  
    if(!oEvent) oEvent = window.event;
    if(oEvent) {
      if(typeof(oEvent.cancelBubble)=="boolean") {
        oEvent.cancelBubble = true;
      }
      else if(oEvent.stopPropagation) {
        oEvent.stopPropagation();
      }
    }
  }
</script>

Google Maps v.3 - routeplanner bug

I noticed a little bug in class google.maps.DirectionsService.
In Google Maps Javascript API V3 Reference we can read this about destination (and about origin) property:

"Location of destination. This can be specified as either a string to be geocoded or a LatLng. Required."

But be careful! If you give coordinates in string the finally route will contains some differences from expected route. My suggestion is next to avoid this problem:

aMatches = sDestination.match(/[a-z]*/i);
if(!aMatches.length || (aMatches.length==1 && aMatches[0]=="")) { // no letters in sDestination => this contains only coordinates!
  var a = sDestination.split(",");
  var oDestination = new google.maps.LatLng(1.0*a[0], 1.0*a[1]);
}

var request = {
  ...
  destination: oDestination ? oDestination : sDestination,
  ...
};

Szívdobbanás... A kardiológia múltja és jelene

Budapesten, a Semmelweis Orvostörténeti Múzeumban nemrég (május 14-én) nyílt meg ez a kiállítás, amely ez év október 31-ig várja a látogatókat.

A kiállítás nem titkolt szándéka az is, hogy még több emberben tudatosuljon: a technika és a tudomány fejlődésének nagyon sokat köszönhetünk, de mindez nem elég, ha mi magunk nem érzünk felelősséget saját egészségünk iránt. A tárlat felhívja a figyelmünket a szív- és érrendszeri betegségek minden aspektusára.

How can I add event handler to a html object?

Each HTML object has many event handler (onclick, onkeyup, onfocus, etc.) Sometimes we need to execute own routines when an event occurs. How can we assign our function to the event handler?

1. The simplest case is that when we can directly assign our function to the handler of an element:

<script type="text/javascript">
  document.body.onclick = function() { alert('Hello World'); };
</script>

2. But when our function is bigger and moreover, we must assign it to more event hadlers the solution above is not effective. Then we must define our function normally and assign its pointer to the event hadlers.
In this case I use MyAddEvent() function defined below. With this function I can attach my special event handler (attribute: pFunctionPointer) to any DHTML element (attribute: oElement).

<script type="text/javascript">

  function MyAddEvent(oElement, sEventName, pFunctionPointer) {
    sEventName = sEventName.replace(/^on/,'');
    if(document.all) oElement.attachEvent('on'+sEventName, pFunctionPointer);
    else oElement.addEventListener(sEventName, pFunctionPointer, true );
  }

  function MyFunction(oEvent) {
    var oInput = document.getElementById('myinput');
    oInput.value += '=';
  }

  function MyOnLoad() {
    var oInput = document.getElementById('myinput');
    MyAddEvent(oInput, 'keydown', MyFunction);
    MyAddEvent(oInput, 'blur', MyFunction);
  }

</script>

How can I get the client's browser height?

If you are a javascript programmer surely you've met the problem about calculating client's browser height (clientHeight) in different browser types.

1. What tells you the HTML specification (DHTML Object Model, HTML DOM)? The solution seems to be simple:

<script type="text/javascript">
  var iHeight = document.body.clientHeight;
  alert("The (inner) height of your browser is " + iHeight + "px");
</script>

2. But sometimes this solution can give you inappropriate result. The best way (what I use always) is the next:

<script type="text/javascript">
  var iHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
  alert("The (inner) height of your browser is " + iHeight + "px");
</script>

3. Using jQuery height() style property (or method):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  var iHeight = $(window).height();
  alert("The (inner) height of your browser is " + iHeight + "px");
</script>

How can I detect client's browser type with JavaScript?

Many times for JavaScript developers is necessary to detect the type and the version of the client's (in other words: user's or visitor's) browser.

1. Usually it's enough to detect is the browser MS IExplorer or not. In this case, you can use the next code:

<script type="text/javascript">
  var bIsItMSIE = document.all ? true : false;
  alert("Your browser is " + (bIsItMSIE ? "" : "not") + " MS Internet Explorer");
</script>

2. If you like to use the most simplest way try this code (The Navigator object contains all information about the visitor's browser):

<script type="text/javascript">
alert("Browser CodeName: " + navigator.appCodeName
  + "\nBrowser Name: " + navigator.appName
  + "\nBrowser Version: " + navigator.appVersion
  + "\nCookies Enabled: " + navigator.cookieEnabled
  + "\nPlatform: " + navigator.platform
  + "\nUser-agent header: " + navigator.userAgent);
</script>

3. If you want to get more detailed information you can use the code below:

<script type="text/javascript">
  var sUserAgent = window.navigator.userAgent;
  if(/Firefox[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Firefox";
  else if(/MSIE[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "MSIE";
  else if(/Opera[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Opera";
  else if(/Chrome[\/\s](\d+\.\d+)/.test(sUserAgent)) sBrowserName = "Chrome";
  else if(/Version\/(\d+\.\d+)\s+Safari/.test(sUserAgent)) sBrowserName = "Safari";
  a = RegExp.$1.split(/\./);
  if(a && a.length) {
    sBrowserVersionMajor = a[0];
    sBrowserVersionMinor = a[1];
  }
  alert("Your browser is " + sBrowserName + " " + sBrowserVersionMajor + "." + sBrowserVersionMinor);
</script>

In code above the name of the browser is defined with variable sBrowserName. The browser's version number is defined with variable sBrowserVersionMajor. 

4. And the end let me to introduce how to detect client's browser type and version with jQuery. For this action you must use the Global jQuery Object jQuery.browser.
I put here a little sample but - attention - this code is not at all reliable!

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  var sBrowserName = "";
  var sBrowserVersion = "";
  jQuery.each(jQuery.browser, function(sIndex, sValue) {
    if(sIndex=="version") sBrowserVersion = sValue;
    else if(sValue==true) sBrowserName = sIndex;
  });
  function Check004() {
    alert("Your browser is " + sBrowserName + " " + sBrowserVersion);
    return false;
  }
</script>

Take care to notice that last code detects that your browser is "mozilla" - even if your browser is Firefox in fact! And it detects "safari" even if your browser is Google Chrome. :)

---

I like to use solution number 3 (above) because all things are "in my hand".
 

Javascript programing

JavaScript is an ECMAScript language standard. It is primarily used in the web pages in order to provide enhanced user interfaces and dynamic websites. Does not require a compiler for client-side implementations. JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java.

Today the JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. It is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages. I can recommended for beginners to visit next site:

• w3schools.com - JavaScript How To

Welcome to Syrius Watch

15 years in business and here is my first post. I'm Syrius, programmer, designer and... (to some degree) philosopher. Thank you so much for your time and the privilege of having a meeting with you at my blog.

What about the blog? Let me see... I will try to describe my trip across the cyberspace best I can. And I also want to give you all my experience that I got in past 15 years:

• about HTML coding
• about Javascript programing
• about PHP
• about using MySQL directives
• about Google MAP
• and about website optimization  - or in other words, about Search engine optimization (SEO)