Thursday, February 24, 2011

keyword "this" in javascript

Take a look at the following codes:
<span onclick="spanClick();" class="node" id="span1"><a href="#">link</a></span>

<script type="javascript/text">
  function spanClick() {
      $(this).addClass("style1"); 
  }
</script>

This will not work as expected because in javascript $(this) function in this case will refer to the browser window object instead of the HTMl element "span1".
To fix this, we need to add "this" inside the spanClick() and change it to:

<span onclick="spanClick(this);" class="node" id="span1"><a href="#">link</a></span>

<script type="javascript/text">
  function spanClick(obj) {
      $(obj).addClass("style1"); 

  }

</script>


This function will work as expected and add a css class "style1" to element "span1".

This link has very good explanation of the 'this' keyword.
http://www.quirksmode.org/js/this.html

Wednesday, February 23, 2011

Call Flash function from javascript

In order to call flash from javascript, we have to select the flash object from javascript first. I solved this problem for our public website and enabled the interaction between flash object and html by javascript.


"myFlash" is the id of our flash object and function "MapIndicator" is an internal function of "myFlash". In order to call function "MapIndicator", we can use something like
"window.document.myFlash" in IE.
However, this function doesn't work in firefox. In order to make it work in both browsers, we used a function as follows to get the flash object

function getFlashMovieObject(movieName) {
if (navigator.appName.indexOf("Microsoft Internet") == -1) {
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else
{
return document.getElementById(movieName);
}
}

Then we use this function to call our flash method:

function CallFlash(ind) {
var obj = getFlashMovieObject("myFlash");
obj.MapIndicator(ind);
}

This page has very good explanation of these different methods:

http://www.permadi.com/tutorial/flashGetObject/

Ajax deep linking using javascript in ASP.NET page

I recently created an asp.net page with deep-linking feature by using javascript.
The original page is designed to have ajax like feature. It was divided into two columns: left tree menu and the right column is the main content. When the user click the a node in the tree, the content will be changed in the right column. Without deep linking, the user will not be able to go to a specific content page. However, the browser URL can't be modified by adding a query string parameter, e.g. "content.aspx?id=33". After some googling, I found out that a browser link can be modified by adding a "hash code", e.g. "content.aspx#id=33".

javascript code to add a hash code to the current URL:
function AddHashToLink(hashCode) {
location.hash = hashCode;
}

Another issue came out when I tried to get the hashcode "#id=33" from the server side. Browser just remove the hash code and pass the URL as "content.aspx" instead of "content.aspx#id=33" to the server side. The only place to see "#id=33" is from the browser. So I decided to use javascript again to read this hash code and pass it to a frame after the page "content.aspx" is loaded.

JQuery ready function:
$(document).ready(function () {
SetContent();
});

function SetContent() {
var theFrame = $("#content", document.body);
if (document.URL.toLowerCase().indexOf("id=") !== -1) {
var clickedHREF = document.URL.toLowerCase();
var clickedSubInd = clickedHREF.split("id=");
theFrame.attr('src', "anotherContent.aspx?id=" + clickedSubInd[1]);
}
else {
theFrame.attr('src', "anotherContent.aspx");
}
}

This way, when the user request to go to link "content.aspx#id=33", the page "content.aspx" will be loaded first. Then the jquery ready function will call setContent() and set the link "anotherContent.aspx?id=33" to the frame with id "content". This way, the user will see the page of "content.aspx#id=33" instead of "content.aspx".

Some javascript function to know:
"document.URL" to get the current URL in the browser

"theFrame.attr('src', "anotherContent.aspx"); " is a jquery function to set the SRC atribute of a frame.