Mental Jetsam

By Peter Finch

Archive for the ‘HTML’ Category

Hyperlinks on Google Charts

Posted by pcfinch on May 1, 2009

I love Google Charts! If you have ever needed to present information on a web page in a chart form, then Google Charts is really worth looking at. Once you have the chart on your webpage you may want to click on a entry of the legend (the little box that tells you what-is-what on the chart) to take you to more information on that section of the chart. Sadly, the API does not currently have a way to add links to a chart.

This is a simple way to add hyperlinks (or hotspots) to a Google chart using an image USEMAP.

<img src="http://chart.apis.google.com/chart?cht=lc&chd=s:Uf9a,a3fG&chs=250x100&chl=1|2|3|4&chco=000000,0000FF&chma=0,30,30,30&chdl=Desktops|Laptops" 
   usemap="#chart" border=0>
<map name="chart">
<area shape="rect" coords="199,31,249,49" href="javascript:alert('More information on Desktops')">
<area shape="rect" coords="199,50,249,69" href="javascript:alert('More information on Laptops')">
</map>

The above HTML ends up looking like this. If you were [on a normal webpage] to click on the “Desktops”, or “Laptops” sections of the graphics you will see the javascript popup. Sadly, the USEMAP does not work on WordPress (this website) web pages, but you get the idea. You can of-course replace the javascript with a link to another page if you like, or even another chart!

The down side of this approach is that it works great as long as the legend does not move or the size of the chart does not change. It seems to work pretty well with line and bar charts, so select your chart type carefully and play around and see what happens.

Advertisements

Posted in HTML | Leave a Comment »

Internet Explorer does not open application/rtf mimetype

Posted by pcfinch on February 5, 2009

Unknown File Type Dialog

Unknown File Type Dialog

I had an odd problem lately where Internet Explorer (IE 7 & 8 ) stopped opening RTF documents served up by our website. The RTF files were served up by a CGI, so they did not have a “rtf” extension on the URL. IE would present a dialog saying that it did not know what the file type was “Unknown File Type”. All the other browsers (Firefox, Safari, etc) worked fine.

On further investigation I found the server was responding with a mime-type of “application/rtf” and it seems IE no longer knows what this is and expects a mime-type of “application/msword”. I found 2 solutions.

  1. The best solution, if you control the server, is to change the mime-type of the documents to “application/msword” ().
  2. If you can not change the server, then try adding the following registry entry to define the “application/rtf” mime-type

    [HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/rtf]
    "Extension"=".rtf"

Posted in HTML | 1 Comment »

Using Javascript to POST data between pages

Posted by pcfinch on June 2, 2008

The following is a simple example of how to submit data from one HTML page to another using the POST method from Javascript. Normally, if data needs to be sent from one HTML page to another, it is done by appending the information to the query parameter of the the URL in the familiar “name=value” format. e.g.

< href="post.aspx?user=peter&cc=aus">Click</a>

Although this works fine, in most cases, problems occur when there is a lot of data to send and the URL exceeds about 2000 characters. The other disadvantage is that the URL looks ugly. The traditional method to get around this is to POST the data using a form. e.g.

<form name="myform" method="post" action="post.aspx">
<input name="user" value="peter"/>
<input value="cc" value="aus"/>
<a href="javascript:myform.submit()">Click</a>
<form>

This works fine, however, it does tend to make the formatting of the resulting HTML difficult and increases the size of the final HTML page significantly if there are lots of links on it.

The following javascript function takes the URL of the target page and an associative array of name/values paires and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

To insert a link into a page just use a normal anchor tag in the HTML and call the function.

<a href="javascript:postwith('post.aspx',{user:'peter',cc:'aus'})">click</a>

This works on Microsoft IE, Mozilla Firefox and OS X Safari.

Posted in HTML, javascript | 71 Comments »

How to submit a HTML form with the Enter Key

Posted by pcfinch on April 23, 2007

If your form does not have a SUBMIT button then, in some cases the browser will not automatically submit the form when you press ENTER. Here is how to submit the form when the user presses the ENTER key.

The code simply intercepts all the key presses on the page and when the ENTER key is pressed if submits the form by calling the appropriate JavaScript function. In this case submitForm(), however, it could be any other function. This function works on Mozilla and Internet Explorer (IE).

document.onkeypress = processKey;

function processKey(e)
{
  if (null == e)
    e = window.event ;
  if (e.keyCode == 13)  {
    submitForm() ;
  }
}

Posted in HTML, javascript | 8 Comments »