Notes by James
Displaying keyword search results 1 - 8
Created by James on February 02, 2012 15:51:47
Last update: February 02, 2012 15:51:47
Arista is a simple and very convenient tool to convert video between common formats. Below are some screenshots:
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 November 19, 2009 04:55:01
Last update: November 19, 2009 04:55:01
JavaScript
<script type="text/javascript">
<!--
if ...
CSS
<img src="http://www.thedomain.com/images/cool...
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 23:29:42
Last update: July 19, 2009 23:33:24
Existing techniques use background images to make round corners. I present a technique here that uses four foreground images: .
I think this technique is easier to understand and use. The only requirements are:
Add position: relative to the CSS for the box to be rounded
Matching border and color between the box to be rounded and the corner images
Here's the HTML with static elements:
<!doctype html public '-//W3C//DTD HTML 4.01//EN' ...
The markup is even easier if we use jQuery to add the corners dynamically:
<!doctype html public '-//W3C//DTD HTML 4.01//EN' ...
This is the result:
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 05, 2009 02:21:15
Last update: July 05, 2009 02:25:20
This is a JavaScript wrapper for Bare Naked App's progress bar.
As usual, download their images and add this to the CSS:
img.progressBar {
background: white url(images...
Then, add my JavaScript function, which takes a parent HTML element as input and returns the progress bar object with a setValue method:
function createProgressBar(elem) {
var img = d...
Test code:
<html>
<head>
<!-- setup code START -->
...
