Notes by James
Displaying keyword search results 1 - 10
Created by James on February 02, 2012 15:40:32
Last update: February 02, 2012 15:40:32
It's pretty easy to embed Flash video in HTML with swfobject . This example comes directly from the docs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
where swfobject.js and expressInstall.swf comes with swfobjects. I provide these files:
swf/MySwfFile.swf
images/CoverArt.jpg
video/MyFlashVideo.flv
Created by James on January 30, 2012 10:39:33
Last update: January 30, 2012 10:39:33
The qTip tooltip hides when mouse is off the target but on the tooltip itself. This makes it hard to click links in the tooltip - when you try to click the link, it disappears. Add the " fixed: true " flag to prevent it from disppearing:
<script type="text/javascript">
$(function() {
...
Created by James on January 27, 2012 12:38:53
Last update: January 27, 2012 12:39:46
A brief summary of jQuery DOM manipulation methods for reference.
.before() and .insertBefore() : insert content before target element - as sibling.
Examples:
// insert summary before details
$('#detail').b...
.after() and .insertAfter() : insert content after target element - as sibling.
Examples:
// insert details after summary
$('#summary').a...
.prepend() and .prependTo() : insert content as first child of target element.
Examples:
// prepend caption to table
$('table').prepend(...
.append() and .appendTo() : insert content as last child of target element.
Examples:
// append row to table
$('table').append('<tr><...
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 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 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 September 10, 2010 23:01:14
Last update: September 10, 2010 23:01:14
By default, heights for jQuery UI tab panels expand or contract depending on the height of each tab. The code snippet here sets the height of all tabs to be equal to that of the container.
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Created by James on September 07, 2010 22:12:01
Last update: September 07, 2010 22:13:45
I had a need to use Ajax to get a response from the server and conditionally render the results based on a status code. Additionally, I need to update multiple areas on the page from the results of one request. The code presented here uses jQuery and an XML response with CDATA sections to achieve that goal.
Server side code (perl cgi):
#!C:/perl/bin/perl.exe
##
## redirect
##...
The HTML page:
<html>
<head>
<script type="text/javascript...
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...
