Notes by James
Displaying keyword search results 1 - 11
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 May 19, 2011 16:02:40
Last update: May 19, 2011 16:05:05
Finally, MathJax makes showing math equations in the browser a reality! Here are some simple demos.
A simple example:
<!doctype html>
<html>
<head>
<title>Math...
Add HTML styling for Firefox:
<!doctype html>
<html>
<head>
<title>Math...
Created by James on September 06, 2010 03:09:35
Last update: January 11, 2011 21:24:36
With the following code, the body occupies the whole height (100%) of the browser window:
<html>
<head>
<title>100% body height</title...
However, when you add <!doctype html> to the top of the file, the browser renders the page in Full Standards Mode instead of Quirks Mode :
<!doctype html>
<html>
<head>
<title>100%...
In Full Standards Mode , the body no longer occupies the whole browser height. Why? Because body 's parent is html and the browser does not know the height of html ! Adding a height to html fixes the problem:
html {
height: 100%;
}
Created by James on September 07, 2010 03:11:39
Last update: January 11, 2011 20:28:33
I didn't know how hard it was to vertically align something to the middle until I had to do it. An excellent writeup about the various techniques (or should I say hacks?) to achieve this is here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Here I present a technique with the help of jQuery. To make it simple, what I'm doing is to display a single line of text in the middle of the page instead of at the top. The markup is made simple because the logic is moved to JavaScript. There are two requirements to make this work: The parent container uses relative positioning jQuery code added to re-position the content with absolute positioning
<!doctype html> <html> <head> <title>Vert... For some reason, the following code did not work although...
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 March 16, 2010 16:55:51
Last update: March 16, 2010 19:29:28
I had this seemingly innocent code that did not work:
<html>
<body>
<script language="JavaScript"...
I fired up the Chrome JavaScript console and it told me that:
Uncaught TypeError: object is not a function .
When the name sameAsInputName appeared in the inline event handler, the browser thinks that it refers to the input field(s), not the JavaScript function!
It works as expected if you attach the event handler later:
<html>
<body>
<script language="JavaScript"...
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 James on July 19, 2009 04:51:22
Last update: July 19, 2009 14:52:24
Ever wonder if you can use images as border in CSS? Actually this is part of CSS3: http://www.w3.org/TR/css3-background/#the-border-image . These properties are supported:
border-image
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
However , browser support is flaky at best. There is an example on css3.info , where they tell you that the fancy border was styled with (in accordance with the spec):
border-image: url(border.png) 27 27 27 27 round ro...
But the actual CSS looked like this:
#left_column #border-image-1 {
margin: 0 30px;
...
Such is the beauty of CSS!
Created by James on July 13, 2009 02:56:04
Last update: July 15, 2009 15:56:53
The CSS 2.1 spec has these definitions about the position property: static : The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply. relative : The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. absolute : The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block . Absolutely positioned boxes are taken out of the...
Created by James on May 23, 2009 19:46:01
Last update: May 23, 2009 19:49:46
This topic comes up once in a while: I need to generate a random string in JavaScript to get around browser (IE) cacheing.
Method 1 (not really random, but a new value every millisecond):
function randomString() {
return '' + n...
Method 2 (generate a random alpha-numerical string):
function randomString(length) {
var chars =...
Created by James on February 22, 2009 00:12:50
Last update: February 23, 2009 02:55:31
This note records my struggle to get a checkbox aligned with its label in Firefox and IE. Starting HTML code. Use default attributes. Both checkbox and label float to the left.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... IE looked OK. Firefox is messed up. Long label shifted to the next line. IE 7: Firefox 3.0.6: Set width of label to that of the containing DIV: <style type="text/css"> label { display:... Both IE and Firefox shift the label to the next line. That's reasonable because the DIV isn't wide enough to contain the label and the browser tried its best to render the label properly. IE 7 and Firefox 3.0.6: Set width of label to be less than the containing DIV: <style type="text/css"> label { display:......
