Recent Notes

Displaying keyword search results 1 - 10
Created by Captain on November 22, 2010 04:34:37    Last update: July 22, 2012 20:36:26
HDTV modeline example: 1920x1080 148.5 1920 2008 2052 2200 1080 1084 1088... MythTV modeline database: http://www.mythtv.org/wiki/Modeline_Database <!DOCTYPE html> <html> <head> <style ... Reference: Custom Resolutions on Intel Graphics
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 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 James on March 29, 2011 11:37:53    Last update: March 29, 2011 11:37:53
The test page below reports the column and row indexes of the table cell you clicked. <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:34:53    Last update: March 29, 2011 11:34:53
The width() function returns the width of an element. The test page below shows how to retrieve widths for table cells. The row parameter can be omitted if columns in all rows are of same width. <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:28:33    Last update: March 29, 2011 11:30:12
The test page below shows how to count the number of columns for a given table row with jQuery: $('table tr:eq('+row+') td').length <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on March 29, 2011 11:25:35    Last update: March 29, 2011 11:25:35
With jQuery, it is pretty easy to access a table cell: just use the $('table tr:eq('+row+') td:eq('+column+')') selector. Below is a test page: <!DOCTYPE html> <html> <head> <title>jQu...
Created by Dr. Xi on February 25, 2011 08:43:40    Last update: February 28, 2011 11:16:10
If you think the JavaScript code below is simple, think again. Try it in different browsers and see if you can explain what you see. What is displayed in the browser window with this HTML page? <!doctype html> <html> <body> <p>befor... What is displayed inside the iframe? Try different browsers. <!doctype html> <html> <head> <style t...
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...
Previous  1 2 Next