Notes by James
Displaying keyword search results 1 - 11
Created by James on January 10, 2011 15:20:10
Last update: February 03, 2012 10:10:14
Dojo ShrinkSafe: http://shrinksafe.dojotoolkit.org/ : command line utility written in Java, based on Rhino - JavaScript engine written in Java.
Douglas Crockford's JSMIN: http://crockford.com/javascript/jsmin : command line utility written in C, can download MS-DOS exe.
Dean Edwards' Packer: http://dean.edwards.name/packer/ : online tool, or .NET, Perl, PHP application.
YUI Compressor: http://developer.yahoo.com/yui/compressor/ : command line utility written in Java.
Google Closure Compiler : command line Java application, web application, or RESTful API.
One problem is, the compressor utility may not be 100% reliable. So make sure to test the compressed script.
Created by James on March 28, 2010 22:09:34
Last update: January 11, 2011 21:23:03
This CSS behavior looks weird to me and I don't know if it's by the spec. It doesn't make sense to me at all.
Using this markup:
<!doctype html>
<html>
<body style="width:25...
the page is rendered like this:
i.e., the text of the non-floating div wraps around the floating div.
However, by simply adding an overflow property to the non-floating div (doesn't matter what the value is, anything except inherit ), the text no longer wraps!
HTML:
<!doctype html>
<html>
<body style="width:25...
Page:
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 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 March 29, 2010 03:11:38
Last update: January 11, 2011 20:19:39
This is an age old problem. Since it comes up time and time again, I'm writing this down for future reference. Let's start with a two-column layout generated by the 2 Column Layout Generator :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans... It renders like this: The left column is shorter than the right column. How to make the left and right column the same height? Adding height: 100% to the style sheet of the left column doesn't cut it. There are several hacks, none of them are straightforward: In search of the One True Layout Faux Columns Creating Liquid Layouts with Negative Margins In short, there's no instruction in CSS that tells a DIV that its height should be 100% of that of the...
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 January 10, 2011 16:37:20
Last update: January 10, 2011 16:37:20
The following page injects CSS rules with JavaScript. It works fine in Firefox and Chrome.
<html>
<head>
<script type="text/javascrip...
But in IE, it breaks with "Unknown runtime error" (seemed like it's trying to interpret the curly brackets in the CSS as JavaScript blocks!):
In order to make it work in IE, the code need to be changed to:
<html>
<head>
<script type="text/javascrip...
The tricks to identify IE and insert new CSS rules came from Paul Irish .
Created by James on October 29, 2010 19:05:10
Last update: October 29, 2010 19:06:04
Some slider panel links:
Javascript and CSS Tutorial - How to make Sliding Panels
jQuery Sliding Panel
Coda-Slider 1.1.1
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
Step Carousel Viewer v1.9
jCarousel
YUI 2: Carousel Control
Created by James on September 03, 2010 20:43:28
Last update: September 03, 2010 20:43:48
Match a regex:
'Free online videos for $.10 each'.match(/each$/);...
Search for a regex pattern:
'Jack Jake Jason'.search(/son/);
// 12
Replace by regex match:
'Jack Jake Jason'.replace(/.a/g, 'Ma');
// Mack...
Split by regex:
'She sells seashells by the seashore'.split(/\s/);...
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 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:
