Recent Notes

Displaying keyword search results 61 - 70
Created by Dr. Xi on August 27, 2008 19:40:19    Last update: January 14, 2011 09:33:20
There's a limit to the number of characters a bookmarklet can contain. Browser Max chars Netscape > 2000 Firefox > 2000 Opera > 2000 IE 4 2084 IE 5 2084 IE 6 508 IE 6 SP 2 488 IE 7 ~2084 IE 8 ~2200-2300 I tried it in the IE6 browser. The following code (573 characters) doesn't work as a bookmarklet. However, <a href="alert('Hi');">Short Bookmarklet</a> works. Actually, you don't have to save the link as a bookmark in order to test, just click the link, nothing happens if the length limit is exceeded. <a href='javascript:alert("var c = document.create... If the bookmarklet code is too long, you can save the JavaScript code on a server and use this function to bring it back to the page:...
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 October 11, 2010 18:14:41    Last update: January 11, 2011 20:36:01
Test page: <!DOCTYPE html> <html> <head> <title>jQu... Documentation: UI/Effects - jQuery JavaScript Library Effects - jQueryAPI
Created by James on September 28, 2010 18:57:58    Last update: January 11, 2011 20:35:02
Test page to demo that preventDefault works perfectly for a text input but fails for select , even though the event is cancelable: <!DOCTYPE html> <html> <head> <title>Pre...
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 September 03, 2010 15:52:12    Last update: January 11, 2011 20:22:40
Use the siblings function to find all siblings of the current jQuery object: $(this).siblings() which is equivalent to: $(this).parent().children().not(this) Or, use an optional selector to further limit the selection of siblings: $(this).siblings('li .hilighted') Test page: <!DOCTYPE html> <html> <head> <title>jQu...
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 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...
Previous  2 3 4 5 6 7 8 9 10 11 Next