Notes by James
Displaying keyword search results 1 - 10
Created by James on January 11, 2011 22:08:26
Last update: February 03, 2012 11:23:25
By default Firefox puts a dotted line box around the link or button label when you click them. Sometimes it's annoying and makes your sexy buttons look ugly. You can get rid of the dotted lines for links with outline:none in CSS, but that doesn't work for buttons.
<!doctype html>
<html>
<head>
<style t...
For buttons you need " button::-moz-focus-inner { border: 0; } ":
<!doctype html>
<html>
<head>
<style t...
I've also seen this:
/* get rid of those system borders being generated...
For more information :
Remove Button Focus Outline Using CSS
Created by James on February 02, 2012 16:00:15
Last update: February 02, 2012 16:00:15
Video for Everybody seems to be a generic way to embed video in a web page, even without flash. This code snippet comes from that site.
<!-- first try HTML5 playback: if serving as XML, ...
Created by James on November 27, 2011 16:02:11
Last update: November 27, 2011 16:02:11
This is an example that uses the XSLTProcessor jQuery plugin for client side XSLT. Unfortunately it didn't work in IE or Chrome. It worked in Firefox but somehow disable-output-escaping="yes" was ignored.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/...
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 February 14, 2011 12:10:19
Last update: February 14, 2011 20:22:05
I have long noticed that IE8 displays a "broken page" icon while showing my web pages, but didn't pay much attention. Since the world in general considers IE to be broken, it's not so unlogical for IE to see much of the world as broken. Until one day I noticed that the Google home page was not "broken". Then I thought may be I should fix my pages also. So I moused over the "broken page" icon, and this is what I saw: Compatibility View: websites designed for older browsers will often look better, and problems such as out-of-place menus, images, or text will be corrected. Very descriptive indeed! Older browsers? Such as Firefox 1.5? When it comes to MS products, I often had better...
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 May 24, 2009 20:14:25
Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added.
<html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
Created by James on April 07, 2009 03:29:45
Last update: January 11, 2011 20:04:31
This is a test HTML form with almost all kinds of input types.
It is weird that both IE and Firefox list the fieldset in the forms[0].elements array as an element with undefined name , type and value .
<html>
<body>
<form name="MyTestForm">
...
Created by James on January 10, 2011 16:41:46
Last update: January 10, 2011 16:41:46
It seems that in IE, " \v " has no special meaning, while in other browsers it meant vertical tab . I tested these in three browsers:
'\v' == '\013'; // true in Chrome and Firefox,...
