Recent Notes
Displaying keyword search results 1 - 7
Created by James on May 03, 2012 14:54:46
Last update: May 03, 2012 14:54:46
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. For HTML4 browsers it will revert back to using the old onhashchange functionality. All major browsers are supported.
This is a simple test page to get started:
<html>
<head>
<title>Test History</title>
...
Note: state url must be provided for IE to generate a unique hash. YOu can prefix the state url with '?' ('#' does not work).
Created by James on July 04, 2009 16:30:40
Last update: January 11, 2011 21:21:59
If you are looking for a solution for a progress bar, I direct you to the following resources: Bare Naked App provides a simple and elegant solution based on pure CSS with two images. You control the percentage of completion through the background-position attribute of the CSS. HTML:
<img src="/images/percentImage.png" alt="... CSS: img.percentImage { background: white url(/imag... Images: (percentImage.png) (percentImage_back.png) WebAppers extended the above solution with JavaScript. They also added several colored images: JQuery UI has a built-in progress bar widget. However, if you want to get to understand some of the foobar needed to get CSS to work (in general) through this example, stay with me for the rest of this note. Initially I was thinking, a progress bar should be easy: just make...
Created by James on July 19, 2009 20:51:23
Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by James on June 30, 2010 19:04:45
Last update: July 03, 2010 21:24:33
Technically, file upload cannot be handled by Ajax, because XMLHttpRequest (XHR) does not handle file inputs. All techniques not using Flash rely on an invisible iframe as the upload form submit target. JavaScript then grabs the response content from the iframe and present it, giving the same illusion as Ajax. webtoolkit AIM The technique by webtoolkit is very simple. It involves 3 simple steps: include the AIM script, implement the start/finish JavaScript functions, and add an onsubmit handler to the normal file upload form. The hooked up form looks like:
<head> <script type="text/javascript" src="webt... The AIM script is also quite simple: /** * * AJAX IFRAME METHOD (AIM) * http... The above code only supports HTML responses. In order to support JSON responses, the above...
Created by James on October 11, 2009 21:15:53
Last update: October 11, 2009 21:19:39
Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors).
Example 1: Nifty Cube with JavaScript
<html>
<head>
<base href="http://www.html.i...
Example 2: modx Simple Rounded Corner Box
<html>
<head>
<title>Round Corner</title>
...
Example 3: CSS3 (does not work in IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Example 4: This is one that actually works ! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Created by Dr. Xi on September 07, 2008 21:14:46
Last update: September 07, 2008 21:14:46
In the simplest form, JavaScript debugging is simply looking at the JavaScript error messages. For IE, there's a yellow mark at the left bottom screen of the browser when a JavaScript error occurs. For Firefox, you need to enter javascript: in the address bar to see the JavaScript errors. These simple tools aren't enough when your JavaScript s become less simple. For IE, you can use the "Microsoft Script Debugger" or "Microsoft Script Editor", which comes with Microsoft Office. This is a pretty good tutorial on the subject: http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html For Firefox, I use firebug , which not only allows you to debug JavaScript, but also to inspect the HTML, DOM and CSS on the page. I use it a lot to modify the CSS on...
Created by Dr. Xi on November 15, 2007 04:40:44
Last update: November 15, 2007 04:40:44
Here's some simple Ajax code. The Ajax response is delivered as XML with attributes and an array of data payloads contained in CDATA sections:
<?xml version="1.0" encoding="utf-8"?>
<ajax-re...
And the JavaScript that does the Ajax magic:
// ajax.js
function ajaxGet(url, ajaxCallback) ...
And the HTML test code:
<html>
<head>
<script language="JavaScript"...
