Recent Notes

Displaying keyword search results 1 - 10
Created by James on October 16, 2013 09:14:24    Last update: October 16, 2013 09:14:24
The initial attempt was to compile the bunch of LESS files with: lessc less/* But then I got errors like: NameError: variable @line-height-computed is undef... The order of LESS files listed is important. Variables are defined in variables.less , so it should be listed first. For Bootstrap, the ordering is defined in bootstrap.less . So all you have to do is ( this is the right way ): lessc bootstrap.less bootstrap-compiled.css Just for the reference, this is the content of bpptstrap.css : /*! * Bootstrap v3.0.0 * * Copyright 2...
Created by James on November 01, 2012 13:51:42    Last update: November 01, 2012 13:51:42
One way to vertically center a line of text in a container div is to set line-height to be the same as the height of the container. But that requires specifying line-height in pixels. This technique avoids that. <!doctype html> <html> <head> <style typ...
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 January 10, 2011 12:35:53    Last update: November 04, 2011 19:28:03
The events mouseover and mouseout are fired when the mouse enters/leaves the element where the event handlers are registered, and any nested elements which do not handle these events (because of event bubbling ). The events mouseenter and mouseleave are fired only when the mouse enters/leaves the specified element. Nested elements do not come into play. This following is a test page. You need Firebug to view the console output. Or use the JavaScript Executor bookmarklet. If none of these are available, an alert will popup (but you won't be able to fully test with alert.). <!DOCTYPE HTML> <html> <head> <title>jQu... For the above test page, when you move the mouse through both the outer and inner areas of the mouseover/mouseout rectangle, the output is...
Created by Fang on October 31, 2011 21:10:10    Last update: October 31, 2011 21:13:10
In this example I'll add a parameter to a facelets template. The example contains three tabs, each tab points to a different page. The tab control is shared among all pages, therefore, it is put in the template. Starting from the simple facelet example , make these additions: Create a new template WEB-INF/templates/tabs.xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... Add a page for the about tab ( about.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Add a page for the news tab ( news.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Add a page for the partner tab ( partner.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Build and re-deploy the application. Launch the browser and load page http://localhost:8080/facelet-demo/about.jsf . This is a screenshot:
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 March 02, 2011 12:29:38    Last update: March 11, 2011 08:42:50
jQuery event delegation allows you to bind event handlers to elements not yet created, under these conditions: The DOM element must nest inside the element to which the event is delegated to The inner element must not stop event bubbling The opposite of delegate is undelegate . <!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 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...
Previous  1 2 Next