Recent Notes

Displaying keyword search results 1 - 10
Created by James on January 26, 2012 21:23:56    Last update: January 26, 2012 21:23:56
In an HTML page, elements can overlap because of position styles. When there's an overlap, elements coming later in the HTML code are displayed on the top. This can be altered by specifying z-index in the CSS. Elements with higher z-index are placed on the top. However , z-index only works for elements that are not static positioned. Static positioned elements are always at the bottom compared to relative , fixed and absolute positioned elements. This is a test page: <!DOCTYPE html> <html> <head> <style t... Effects of z-index can be tested by adding it to the elements, for example: <div id="bg" class="big" style="z-index: 3"></div>...
Created by James on March 13, 2011 13:44:37    Last update: March 21, 2011 11:30:55
This is a jQuery input control that lets you enter any number of input rows of name and value pairs. <!DOCTYPE html> <html> <head> <title>jQu...
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 October 11, 2010 19:01:28    Last update: January 11, 2011 20:38:56
Test page (click the "new window" icon to see the transition): <!DOCTYPE html> <html> <head> <title>jQu...
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 June 22, 2010 18:46:31    Last update: January 11, 2011 20:24:42
This is the page: <!DOCTYPE html> <html> <head> <title>jQu... It renders like this in IE 7: However, when you try to scroll to the bottom of the dialog, IE takes long time to respond, the it messes up the title bar: Everything works fine if you take away the relative position in CSS: <style type="text/css"> #dialog .input { ...
Created by James on July 06, 2010 15:27:28    Last update: January 11, 2011 20:20:03
This example shows three jQuery icons with hover effects. <!DOCTYPE html> <html> <head> <title>jQu... Hint: mouseover an icon on the ThemeRoller page to get the CSS classname.
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 Dr. Xi on October 26, 2010 04:47:37    Last update: January 11, 2011 20:00:36
The code presented here is a simple implementation of a tab set. It is used to demo how a tab set could be implemented. The code is stand alone and does not depend on any JavaScript libraries. Multiple tab sets within the same page is supported. The HTML markup is fairly simple: Tabs sets are contained within a DIV element with class name "tabsContainer". Define a UL list for the tabs. Follow the UL list with equal number of DIVs for the tab contents. The Nifty Corners Cube technique is used to draw the rounded corners (original form, not the enhanced JavaScript form). HTML, CSS and JavaScript: <!doctype html> <html> <head> <style typ...
Created by James on October 15, 2010 20:10:26    Last update: October 15, 2010 20:10:26
Download the Cufon Javascript and save it as cufon-yui.js . Generate the font JavaScript and save it as myfont.js (upload the font file through http://cufon.shoqolate.com/generate/ ). Add these lines to the header element: <script type="text/javascript" src="cufon-yui.js">... Replace selected elements with JavaScript like this: <script type="text/javascript"> Cufon.rep... Full HTML page: <!DOCTYPE html> <html> <head> <title>C... Reference: Cufonize Your Pages – How to add Cufon to your Web Design
Previous  1 2 Next