Ξ Notes

Recent Notes

Created byJameson 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 byDr. Xion 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 byDr. Xion August 31, 2008 20:43:44
Last update: January 22, 2011 12:48:08

It's probably more useful to make the JavaScript executor a bookmarklet. That way it gains access to the page on which it is invoked. Therefore, more helpful while debugging. Here's the code:
<html>
<body>
<a href="javascript:(funct...
Or, you can add this link to your bookmarks, name it "JS Executor". For a full featured JavaScript console, you may need Jash

Created byJameson 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 byJameson 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...