Put your message here! Contact me for more information
 
 







 

Archive for the ‘Web Scripting’ Category


 

One of my little ColdFusion projects is to allow users to download a dynamically generated word document, whose contents are fetched from the database. Luckily, to open a file in word is pretty simple: just rename it into .doc and Word will open it. Especially, for HTML content, I can just force the user to download the HTML page and have him/her save it with a .doc extension and be done with it.

In my case, I didn’t want to write the dynamic content to a file and force the download via the Header of “Content-Disposition: attachment”. What I did was capturing all output into a file, then craft the HTTP header using the cfhead tag to force the inline download. Let me show you real quick how to do this, it may save you some time messing around with ColdFusion.

===== The script =====







…. output your database result here …





#content#

===== Explanation =====
Let’s go over the A, B, C, D in the above code snippet.

* **A**: Since we don’t want ColdFusion to randomly send the contents (and of course, the header too, which will mess up the force download) to the client’s browser, we explicitly tell ColdFusion to only flush out the content contained within the cfoutput tag.
* **B**: Here you can do all of your data access, such as running retrieval queries, etc. It’s the R in the CRUD, **C**reate, **R**etrieve, **U**pdate, **D**elete
* **C**: We capture all output produced by cfoutput into a variable, which allows us to do filtering or word replacment later on.
* **D**: Now we craft the header to force the download. We explicitly say that this is a word document, so if the user has Word installed, s/he will have the option to open the file with Word directly.Here is the heart of the solution. Since we don’t have a file to read the contents from but a whole bunch of HTML contained in a variable, we set the Content-Disposition to inline and specify the name of the file that the user is about to download. You can set the file to be .doc if you’d like the downloaded file to be associated with Word.We provide some description to the downloaded file.#content#And now we can just flush out the content to the browser. That wasn’t too bad, was it? When the user accesses the CFML script, s/he will be prompted to download the file to the local computer. Nice!

===== Further Readings =====
No good tutorials are without a reference section, so here is the list of interested articles that I find useful
* [[http://livedocs.macromedia.com/coldfusion/7/htmldocs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=ColdFusion_Documentation&file=00000232.htm|Macromedia manual on Cfheader]]
* [[http://us2.php.net/readfile|PHP manual on readfile()]] and [[http://us2.php.net/header|PHP manual on header()]] - The 2 articles are particularly helpful to see how the header can be sent to the browser. Eventhough we used ColdFusion in this short tutorial, the same technique can also be applied to PHP.
* [[http://www.ietf.org/rfc/rfc2183.txt| RFC2183]] - The EITF Request for Changes technical details on header messages. I did use this as the starting point. When in doubt, look for RFC documents as they are is always the definitive (and most correct) guide.

view comments
 

Light Reading logoSo LightReading is a news portal for coprorate computer stuff, like networking, networking security, etc. They sometimes send out invitations for subscribers for extra info, web-minars.

I have come to know about Light Reading a while ago, and I randomly signed up for their newsletter. But I decide this is the day I unsubscribe from their list, so I clicked on the Unsubscribed linke at the footer area of the email.

Here’s is the link that I was taken to..

http://www.lightreading.com/unsubscribe.asp?subscriberid=6xx7xxx ( I masked out my ID # for privacy)

So I unsubscribed myself, but also changed the subscriberID to something else, just to see how the page works … oh uh, I got the “Unusubscribe Page” for someone else who is subscribing to 11 other newsletters from Light Reading. Phew. Too little work and I already discover a vulnerability.

I know portals like Light Reading can sell their services because they collect a huge database of emails of supposingly “C?O”, “Networking Engineers”, etc., so the commercial contents and products can be sold directly to these important corporate figures. Well, not if one day, LR find out that their newsletter has no reader because someone has conveniently (or mischievously) unsubscribed everyone else using the previous link. Of course noone will do that manually, but s/he can write some script that loop through any possible IDs (may take a while, I know, mine is in the upper 6 millions, LR has a pretty big colection of users), then request the page, and make a POST submit to the form. Or just make a page that continuously submitting POST requests to unsubscribe everyone (PHP CURL would make this an easy task). This method is faster, since I doubt that LR do any double checking for “unsubscribe request”. I mean something in the light reading of …

POST to unsubscribe.asp with subscriberID = #####

Humh … If I were Light Reading, I would seriously rewrite the unsubscribe mechanism.

(Disclaimer: I did accidentally unsubscribe someone else other than myself from the list while experiment with the site, so oops, sorry, don’t sue me. I did point out where you guys did wrong, so go fix it and thanks me later)

view comments
 

I was trying to setup a MySQL cluster with CentOS 4.4 and VMWare and I was initially successful at getting the NDB storage engine to work. However, I could not start the MySQL API (or MySQL client, whatever you call it) because I ran into the infamous MySQL error of “ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ (2)“. Googling didn’t help much either because people were just asking and very few got the answer.

After a while, I was desparate. My cluster was up and I had no way to connect to it and test out the exciting cluster’s replicate feature. I went to bed at 4:00am last night and kept thinking what could go wrong? Setting up the ndb engine for the nodes was pretty straightforward but why just getting mysql client to run is so problematic? Well, here’s my solution to the puzzle:

My Setup

  • CentOS 4.4 installed from DVD with most packages unchecked, especially MySQL
  • The newest MySQL 5.0.27-max was used. See, I’m on the bleeding-side of technology.
  • MySQL is locaed in the default location at /usr/local/mysql/
  • When I installed MySQL, the mysql.server script was cp from /usr/local/mysql/support-files/mysql.server to /etc/init.d/
  • The my.cnf file is very simple like this

#file: /etc/my.cnf
ndbcluster
ndb-connectstring=’host=192.168.2.100′
[mysql_cluster]
ndb-connectring=’host=192.168.2.100′

Cause:

When the MySQL server (mysqld) starts, it created a sock file. Since I overwrote the original /etc/my.cnf without the socket parameter under [mysqld], the MySQL server (mysqld) created the socket file under /tmp/mysql.sock instead. Furthermore, I was also missing the socket parameter under [client] section in the my.cnf - I didn’t even have the [client] section.

What happens when I tried to start the mysql client (#mysql -u root) was that the mysql client was looking for the mysql.sock file but coudln’t find the path to the file. It then looked into the default path /usr/lib/mysql/ to find the mysql.sock file. Of course this doesn’t work because when mysqld was started, the socket file was created in /tmp instead. The client gave up, spit out the connect error prompt.

In brief, the cause of the infamous error is because the mysql client cannot find the socket file at run time.

Solutions

First of all, you should verify that mysqld is running by typing #ps aux | grep [m]ysqld. Then there are 2 ways to solve this: one is to fix the socket path in the /etc/my.cnf under [mysqld] and [client] like this

# file: /etc/my.cnf
[mysqld]
… # someother settings
socket=/var/lib/mysql/mysql.sock
[client]
… # some other settings
socket=/var/lib/mysql/mysql.sock

then restart the mysqld server so that the mysql.sock file is generated. The next time you start the client with #mysql -u root, you will magically get it. This fix is permanently but the catch is you will have to shutdown mysqld, the MySQL server itself.
The other way when you want to just login really fast to the mysql server, try this (actually I used this method to obtain the overall solution to the infamous error)

  • #find / | grep mysql.sock
    this will do a look up on the entire disk and look for the mysql.sock file. You will get back something like /tmp/mysql.sock. This is the socket file we will need to use.
  • #mysql -u root –socket=/tmp/mysql.sock
    this will tell the mysql client to login as root user and use the socket file located in /tmp/mysql.sock

Boom, you should get into the suddenly-loved mysql> prompt. I was so excited when I was able to fix the client and was able to access to the mysql prompt.

I hope this help you all. With this success in installing the MySQL 5.0.27 cluster, I am planning to do a screencast of setting the whole thing up (VMWare is just awesome. It allows me to have 3 CentOS 4.4 servers at the same time, making this installation a breeze)

view comments
 

Coincidentally with the HP scandal, I’m working on an email project, where thousands of emails are sent out every morning to important people. The sender’d like to know the open rate of the emails. The technique used is pretty standard using “web bug”. They implemented a 1×1 transparent gif image whose source url is something like mydomain.com?userID=1234&otherParam=asd. The problem is: the collected open rate is not at all accurate because many of the recipients are using Outlook 2003. To avoid cross-site scripting (XSS) and other possible vulnerabilities, by default, Outlook 2003 (also Thunderbird 1.5) blocks all external images and display them with great skeptical even when the user chooses to unblock the images. As the web bug image is not requested, the collected open rate is way low as most users don’t bother unblock the images (Outlook’s warning text about external images is too blended in so I guess most users don’t even see that feature)

After messing with our own code to keep track of the open rate for the emails, my work buddy and I were set out to use Readnotify.com. We found out about ReadNotify.com mostly through Google. Some sites (wikipdia, for example), said that Readnotify.com was used during the HP’s scandal. I thought that Readnotify.com must be doing some neat tricks to by-pass the strict restriction of Outlook 2003. I was wrong. **Readnotify.com could neither detect if the email has been opened in Outlook 2003 (or Thunderbird 1.5) with the images blocked.** Don’t waste your money on the subscription if your audience are mostly Outlook 2003 users, which happens to be the case of 99% of US corporates. I’m not sure if HP’s Patty had known about this when she probed the emails.

===== Here’s how Readnotify.com do it: =====
When you send an email to your-receipient@somedomain.com.readnotify.com, Readnotify.com will automatically appended some HTML code to the email. This works only for HTML-based emails. For text-only emails, Readnotify.com employs the traditional “read-receipt” mail header which the reciever has to agree to send back a “read receipt” to the sender, which is Readnotify.com, not the actual sender.

With that’s said, below is a copy-paste code segment that Readnotify.com appended to an email


 
The sender of this message requests confirmation when you read it. Click here to confirm.
background
=http://0320.185.64275/nocache/3589j7gxbgtw6P/rspr47.gif>

‏‏‌‍‍‏‌‏‌‌‎</p> <p>‎‍‍‌‎‎‍‍‏‏‌‌‏<br /> ‍‍‎‌‌‎‏‍‌‌‏‏‌</p> <p>… lots of junk character in here …</p> <p>‏‍‍‌‌‏‏‎‏‏‍‏‎<br /> ‏‏‎‎‍‎‎‏‏‎‌‎‎</p> <p>‍‍‌‌‎‎‍‌‌‍‌‌</p> </div alt="3589j7gxbgtw61."></body><br /> </html><br /> </code><br /> Because I chose to display the “confirmation banner”, this code will actually display a colorful banner asking user to click and confirm that s/he has opened the email. I can chose to hide by confirmation banner by selecting “none” in the Readnotify.com admin page and the image will be replaced by a transparent image. So here’s our first Readnotify.com web-bug.</p> <p>I can’t help but notice that the appended HTML has strange line-breaks, I guess it’s meant to trick the internal brower of the email cient to interpret the HTML code. Readnotify.com goes even further, they embedded a wav sound-background. Oh man, I miss those happy-birthday emails with midi files on the backgrounds, back when I was still popular among teenage girls. Then Readnotify.com put a table in next with various external links to the tracking scripts, like a background for the <td>. Too bad, none of these actually do the trick. Outlook 2003 and Thunderbird 1.5 effectively block all external request. </p> <p>I’m not quite sure about the usage of those encoded characters towards the end of the email. Another HTML trap for the rendering engine? By the way, I named my test email “A friendly email-bomb” because I kept on email-bombing myself while testing out the email scripts.</p> <p>===== Final remarks =====<br /> It would be great (or really bad-news) if Readnotify.com can work. It may works with older email clients, as my work buddy were using Outlook 2002, which doesn’t have the automatical image-block, Readnotify.com’s script works fine. However, when it comes to newer email clients such as Outlook 2003 or Thunderbird 1.5, I would say the programmers have done a good job at preventing any potentical XSS, thus making Readnotify.com useless.</p> <p>I tested the Readnotify-generated email on Gmail, well, since Gmail runs inside a browser which have a much more liberal security settings, Gmail fails to filter out the embedded HTML code, so Readnotify.com was working just fine. My take on this: **Readnotify does work with regular web-mail clients** since it’s the browser that actually makes the request for the web bug files. However, in this case, do I need to spend money on Readnotify.com? Probably not - I can write my own tracker (I did, in 5 minutes using coldfusion)</p> <p>I’m not entirely sure how effective the chairman of HP was able to use Readnotify.com to track her board members’ communications, but I guess it did not go very well. Another issue with Readnotify.com is that the appended code is very visible to the tech-savvy receipient: just view the headers or the source of the email. It’s just not avery elegant way to track people. But since some spammers/ phishers abuse the use of web bug images, we, legitimate developers, all now have to suffer from the restriction of email clients.<br /> </wiki></p> <div class="post_action"> <a href="http://alexle.net/archives/147#comments" title="Comment on Web bug & ReadNotify.com: Don’t bother to notify me">view comments</a> </div> </div> </div> <div class="grid_2 alpha"> </div> <div class="grid_8 omega"> <h2 class="post_title"> <a href="http://alexle.net/archives/143" rel="bookmark" title="Permanent Link to Inline Popup with YUI"> Inline Popup with YUI </a> </h2> </div> <!-- Post Info --> <div class="post_info grid_2 alpha"> <div class="post_time"> October<br/>23<br/>2006 <br/><br/> </div> <div class='post_categories'> <a href="http://alexle.net/archives/category/web-technolgy/ajax-web-20" title="View all posts in Ajax & Web 2.0" rel="category tag">Ajax & Web 2.0</a><br/> <a href="http://alexle.net/archives/category/web-technolgy/web-scripting" title="View all posts in Web Scripting" rel="category tag">Web Scripting</a><br/> <a href="http://alexle.net/archives/category/web-technolgy" title="View all posts in Web Technolgy" rel="category tag">Web Technolgy</a> <br/><br/> </div> <div class='post_meta'> <a href="http://alexle.net/archives/143#comments" title="Comment on Inline Popup with YUI">2 comments</a><br/> <a href="http://alexle.net/archives/143" rel="permalink" title="Permalink to Inline Popup with YUI">permalink</a><br/> </div> </div><!-- .post_info --> <!-- Post Body --> <div class="grid_8 omega" id="post-143"> <div class="post_content"> <p><wiki>I just recently completed a demo for a client of mine. The demo was a news portal with lots of links to external news contents. I wanted to spice things up a little, so I implemented a inline link-tip (or inline popup, however, this name may confuse you with the light-box type popup) using the [[http://developer.yahoo.com/yui/|Yahoo! User Interface Library]] (YUI). Thanks to YUI, the effect is now quite easy to be implemented.</p> <p>Here’s a screencast of what the inline link-top looks like</p> <p>{{ http://alexle.net/wp-content/uploads/2006/10/inline.gif }}</p> <p>(If you want to see the actualy demo page or get the sample code, please scroll down to the end of the post)</p> <p>===== The setup =====<br /> Here is the XHTML-compliant markup code for the content and the hover.<br /> <code html></p> <div id="link1"> <a href="www.alexle.net" target="_blank" class="articleTitle" hoverId="hover1">www.AlexLe.net</a> has a few home-writen tutorials.<br/><br /> <a href="#">Link 1</a> to test if the hover is hidden properly. </div> <div id="hover1" class="inlinePopup" style="display:none"; > AlexLe.net is the homepage of Alex Le. He’s cool. Check it out. </div> <p><!-- hover1 --></p> <div id="link2" style="position: absolute; left: 100px; top: 50px"> <a href="www.slashdot.org" target="_blank" class="articleTitle" hoverId="hover2" >www.Slashdot.org</a> </div> <div id="hover2" class="inlinePopup" style="display:none";> Alex reads Slashdot daily. He thinks it’s pretty neat. How about you check it out too? </div> <p><!-- hover2 --></p> <div style="position: absolute; left: 80px; top: 80px"> <a href="www.slashdot.org" target="_blank" class="articleTitle" hoverId="hover3" >www.VentureBeat.com</a><br/>the blog of Matt Marshall <br/>tracking Sillicon Valley,VC, and Startup</div> <div id="hover3" class="inlinePopup" style="display:none";> Since Alex is an entrepreneur, he also reads VentureBeat on a daily basis to catch up with what’s going on in down there in Silicon Valley. </div> <p><!-- hover3 --><br /> </code></p> <p>Basically we have a few DIVs, positioned either inline or absolutely to show how the inline link-tip works in both cases. Inside each container div, we have a link with a className of **articleTitle** and an extra attribute called **hoverId**. This extra **hoverId** attribute specifies the ID of the popup that we’d like to associate with this link.</p> <p>Next, we setup the hover container div. The popup div has the className of ‘inlinePopup’ so that we can style it with CSS later on. Let’s take the div with Id ‘hover1′ as our example.<br /> <code html><br /> ...</p> <div id="hover1" class="inlinePopup" style="display:none"; > AlexLe.net is the homepage of Alex Le. He’s cool. Check it out. </div> <p><!-- hover1 --><br /> …<br /> </code><br /> For this technique to work, we have to explicitly add the **style=”display:none;”** for the popup div. Setting display:none in the inlinePopup CSS class definition will not work.</p> <p>For the CSS styling, we can just add these rules to the page to make things a little nicer.<br /> <code css></p> <style> a.articleTitle {color:#CC0000; text-decoration: none;font-size: 14pt; font-weight: bold; font-family:Arial, Helvetica, sans-serif} .inlinePopup {position: absolute;width: 200px; border: 2px solid red; background-color:#FFFFCC; color: #CC3300; z-index:99;} </style> <p></code></p> <p>===== The Javascript =====<br /> Here is the javascript to handle the inline popup/ tooltip. The idea is after the page has been rendered properly (window onLoad is fired), we scan through the DOM, look for any link with the className of **articleTitle**, then attach custom events for onMouseOver and onMouseOut to handle the display of the popup. And thanks to YUI, adding custom events and web2.0 animations is easier than ever.</p> <p>First of all, we include the YUI’s library to our page<br /> <code html><br /> <head><br /> …<br /> <script type="text/javascript" src="js/yahoo-min.js"></script><br /> <script type="text/javascript" src="js/dom-min.js"></script><br /> <script type="text/javascript" src="js/event-min.js"></script><br /> <script type="text/javascript" src="js/animation-min.js"></script><br /> …<br /> </head><br /> </code></p> <p>Then we insert some javascript codes. Let’s start with the pageInit() function first.<br /> <code javascript>pageInit = function() {<br /> /* Popup summary */<br /> /* We find all items with the articleTitle class */<br /> var els = YAHOO.util.Dom.getElementsByClassName('articleTitle', 'a');<br /> for( var i=0; i < els.length; i++ )<br /> {<br /> /* Get the hover div */<br /> sDivId = els[i].getAttribute('hoverId');<br /> sDiv = document.getElementById( sDivId );<br /> YAHOO.util.Dom.setStyle( sDiv , 'opacity', '0');</p> <p> /* Unhide the Summary layer when mouse over/ out*/<br /> YAHOO.util.Event.addListener( els[i], "mouseover", hoverOver );<br /> YAHOO.util.Event.addListener( els[i], "mouseout", hoverOut );<br /> }<br /> }<br /> YAHOO.util.Event.addListener( window, "load", pageInit );<br /> </code><br /> We basically find all **a** (anchor) elements in the page with the className of **articleTitle**. Then we loop through the result **els** array and look for which popup div is associated with this link. As we stored the popup div’s ID in the hoverId attribute of the link, we can just grab the value by using the getAttribute(’hoverId’). And next, we set the opacity of the popup div to 0. With YUI, we don’t have to worry about the different syntax of different browsers. Only one single line of code to set the opacity! Next, we add our custom functions to the **a** element to handle the **onMouserOver** and **onMouserOut** events with the **YAHOO.util.Event.addListener( element, “eventType”, customHandler )**</p> <p>==== Custom Event Handlers ====<br /> We can now implement our **hoverOver()** and **hoverOut()** handlers. Let’s start with **hoverOut()**<br /> <code javascript><br /> /* This function is to unhide the div, then do a smooth very web2.0 fade-in effect */<br /> function hoverOver()<br /> {<br /> var sDivId = this.getAttribute('hoverId');<br /> var sDiv = document.getElementById( sDivId ); </p> <p> sDiv.style.left = YAHOO.util.Dom.getX( this ) +'px';<br /> sDiv.style.top = (YAHOO.util.Dom.getY( this ) + this.offsetHeight + 2 ) +'px';<br /> sDiv.style.display = '';<br /> var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);<br /> animIn.animate();<br /> }<br /> </code><br /> When the mouse hovers over the link, this hoverOver() function is triggered. However, at this very moment, we find out that we don’t have any reference to targetted popup div, so we go grab the popup div’s id from the hoverId attribute of the a element. Luckily, we can just reference to the a element as **this**. </p> <p>=== Positioning the Popup & Adding Dramatic fading effect ===<br /> As our links can be rendered anywhere in the screen, we have to know where to put our popup div. The solution is to set the position of the popup div to the coordinates of the link. With YUI, it’s quite easy: **YAHOO.util.Dom.getX( this )** and **YAHOO.util.Dom.getY( this )** for the x and y values of the a element. But this will give us the top left corner of the boundary box of the link element, which means our popup would be placed **on top** of the link. So we add the offsetHeight of the a element to the top (Y) value of the popup, plus a few extra pixels as the ‘margin-top’. Now our div is positioned correctly. With this approach, we can place our link anywhere: whether it’s in a absolutely positioned container, or inline within a paragraph, the popup div is still positioned nicely below it.</p> <p>That isn’t t too bad, is it? Now let’s add the fade-in effect. As we already set the opacity of the popup div to 0 when the page is loaded, we can just use the animation feature of YUI for the dramatically fade-in.<br /> <code javascript><br /> ...<br /> var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);<br /> animIn.animate();<br /> ...<br /> </code><br /> I use 0.25 second for the popup div to appear as I think anything longer will be quite annoying to the end-users (”whoever designed this dang page is wasting my time here”). Let’s keep our visitors happy. The YAHOO.util.Easing.easeOut is added so that the animation is eased out for a smoother appearance of our popup div.</p> <p>Next, we added the **hoverOut()** handler to hide the popup div with an equally nice fade-out effect. But for **hoverOut()** to work correctly, we have to do some extra work towards the end. Here’s the code:</p> <p><code javascript><br /> /* This function is to hide the div with a dramatic web2.0 fade effect */<br /> function hoverOut()<br /> {<br /> var sDivId = this.getAttribute('hoverId');<br /> var sDiv = document.getElementById( sDivId );<br /> var animOut = new YAHOO.util.Anim( sDiv, { opacity: { to: 0 } }, 0.25, YAHOO.util.Easing.easeOut);<br /> animOut.animate();<br /> animOut.onComplete.subscribe( hoverHide );<br /> }<br /> </code></p> <p>Again, we get the reference to the popup div, then we fade it out by changing its opacity to 0. At this point, eventhough the user won’t see the popup div anymore, it’s not actually hidden. This means that the popup div is still covering up the space underneath it, thus link or clickable elements underneath won’t work (not clickable). We have to explicitly set the display of the popup div to none when the fade-out animation is finished to remove it from the page. We do this by using the **animOut.onComplete.subscribe()** to hand a callback method to the animation object. Our callback method will be called when the animation is completed and hide the popup div.</p> <p>Here’s the one-line code for the hoverHide() callback function<br /> <code javascript><br /> /* Call back function used in hoverOut() */<br /> function hoverHide()<br /> {<br /> this.getEl().style.display = 'none';<br /> }<br /> </code></p> <p>The **this** keyword now is interpreted as the animation object, not the link item. We use this.getEl() to get the reference to the targetted hover div, and set its style.display to ‘none’. Now everything’s working the way it’s supposed to. Yay!</p> <p>===== Final Remarks =====<br /> Thanks to YUI, the code is truely multi-platform compatible. All the event handlings are done through the YAHOO.util.Event so we don’t have to deal with messy browser sniffing and special cases. The YAHOO animation is simple and flexible enough for us to customize the way we want. The inline popup is also robust enough as we can style it with CSS like adding some neat drop-shadow and round-corner effects. As you can see from the screencast above, the inline popup is working correctly in the extreme case of rapidly hovering in and out. Nobody would do anything that crazy in real life but it’s nice to see how the effect behaves in extreme cases. And I think one important feature of this technique is that we can implement it to any existing page with minimal code editing.</p> <p>I hope you enjoy this small tutorial! </p> <p>Cheers!</p> <p>===== Code & Sample Page =====<br /> You can download the sample code of this tutorial here.<br /> * [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup.zip|Inline Popup Source File]]</p> <p>The same code can be accessed here<br /> * [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup/|Demo Page]]<br /> </wiki></p> <div class="post_action"> <a href="http://alexle.net/archives/143#comments" title="Comment on Inline Popup with YUI">view comments</a> </div> </div> </div> <div class="navigation"> <div class="alignleft"><a href="http://alexle.net/archives/category/web-technolgy/web-scripting/page/5">« Older Entries</a></div> <div class="alignright"><a href="http://alexle.net/archives/category/web-technolgy/web-scripting/page/3">Newer Entries »</a></div> </div> <br style="clear:both;"/> <div class="grid_2 alpha">   </div> <div class="grid_8 omega"> <hr class="thick"/> <div id="footer"> <br/> <p> (C) 2009. Alex Le’s Blog runs on <a href="http://wordpress.org/">WordPress</a> <br /><a href="http://alexle.net/feed">Entries (RSS)</a> and <a href="http://alexle.net/comments/feed">Comments (RSS)</a>. <!-- 21 queries. 0.452 seconds. --> </p> </div> </div> <!-- Google Tracking --> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-193384-4"; urchinTracker(); </script> </body> </html> </div> <br class="clear"/> <div class="grid_6 omega"> <div class="grid_3 alpha"> <div id="sidebar" style="border-left: 1px solid #DFDFDF;"> <br/> <div id='categories'> <div class="title_container"> <span>categories</span> </div> <ul class="list"> <li><a href="http://alexle.net/">home</a></li> <li class="cat-item cat-item-11"><a href="http://alexle.net/archives/category/tid-bits" title="Quotes from Slashdot, THE best site for science-minded people :)">/. Tid Bits</a> <span class="posts_count">8</span> </li> <li class="cat-item cat-item-24"><a href="http://alexle.net/archives/category/money" title="View all posts filed under money">money</a> <span class="posts_count">3</span> </li> <li class="cat-item cat-item-5"><a href="http://alexle.net/archives/category/my-projects" title="News about my Personal Projects">My Projects</a> <span class="posts_count">12</span> <ul class='children'> <li class="cat-item cat-item-63"><a href="http://alexle.net/archives/category/my-projects/tubecaptioncom" title="View all posts filed under TubeCaption.com">TubeCaption.com</a> <span class="posts_count">4</span> </li> <li class="cat-item cat-item-7"><a href="http://alexle.net/archives/category/my-projects/wars-of-earth" title="View all posts filed under Wars of Earth">Wars of Earth</a> <span class="posts_count">4</span> </li> </ul> </li> <li class="cat-item cat-item-17"><a href="http://alexle.net/archives/category/oops" title="View all posts filed under oops">oops</a> <span class="posts_count">2</span> </li> <li class="cat-item cat-item-18"><a href="http://alexle.net/archives/category/personal-confess" title="View all posts filed under personal confess">personal confess</a> <span class="posts_count">1</span> </li> <li class="cat-item cat-item-1"><a href="http://alexle.net/archives/category/uncategorized" title="View all posts filed under Random Walk">Random Walk</a> <span class="posts_count">90</span> <ul class='children'> <li class="cat-item cat-item-14"><a href="http://alexle.net/archives/category/uncategorized/funny" title="View all posts filed under funny">funny</a> <span class="posts_count">7</span> </li> <li class="cat-item cat-item-12"><a href="http://alexle.net/archives/category/uncategorized/music" title="View all posts filed under Music">Music</a> <span class="posts_count">5</span> </li> <li class="cat-item cat-item-10"><a href="http://alexle.net/archives/category/uncategorized/observations" title="View all posts filed under Observations">Observations</a> <span class="posts_count">21</span> </li> </ul> </li> <li class="cat-item cat-item-20"><a href="http://alexle.net/archives/category/ruby-on-rails" title="It's all about the brilliant Ruby on Rails framework">Ruby on Rails</a> <span class="posts_count">11</span> </li> <li class="cat-item cat-item-15"><a href="http://alexle.net/archives/category/tutorials" title="View all posts filed under Tutorials">Tutorials</a> <span class="posts_count">18</span> </li> <li class="cat-item cat-item-2 current-cat-parent"><a href="http://alexle.net/archives/category/web-technolgy" title="View all posts filed under Web Technolgy">Web Technolgy</a> <span class="posts_count">67</span> <ul class='children'> <li class="cat-item cat-item-9"><a href="http://alexle.net/archives/category/web-technolgy/ajax-web-20" title="Ajax!">Ajax & Web 2.0</a> <span class="posts_count">23</span> </li> <li class="cat-item cat-item-19"><a href="http://alexle.net/archives/category/web-technolgy/clustering" title="View all posts filed under Clustering">Clustering</a> <span class="posts_count">2</span> </li> <li class="cat-item cat-item-13"><a href="http://alexle.net/archives/category/web-technolgy/css" title="View all posts filed under CSS">CSS</a> <span class="posts_count">6</span> </li> <li class="cat-item cat-item-8"><a href="http://alexle.net/archives/category/web-technolgy/joomla-mambo" title="View all posts filed under Joomla & Mambo">Joomla & Mambo</a> <span class="posts_count">8</span> </li> <li class="cat-item cat-item-4"><a href="http://alexle.net/archives/category/web-technolgy/server" title="Articles about configuring or installing apps">Server</a> <span class="posts_count">22</span> </li> <li class="cat-item cat-item-3 current-cat"><a href="http://alexle.net/archives/category/web-technolgy/web-scripting" title="PHP, Ajax, and such">Web Scripting</a> <span class="posts_count">42</span> </li> </ul> </li> </ul> </div> <br/> <div id="archives"> <div class='title_container'> <span>archives</span> </div> <ul class="list"> <li><a href='http://alexle.net/archives/date/2008/09' title='September 2008'>September 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/08' title='August 2008'>August 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/06' title='June 2008'>June 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/05' title='May 2008'>May 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/04' title='April 2008'>April 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/03' title='March 2008'>March 2008</a></li> <li><a href='http://alexle.net/archives/date/2008/01' title='January 2008'>January 2008</a></li> <li><a href='http://alexle.net/archives/date/2007/11' title='November 2007'>November 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/10' title='October 2007'>October 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/09' title='September 2007'>September 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/07' title='July 2007'>July 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/06' title='June 2007'>June 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/05' title='May 2007'>May 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/03' title='March 2007'>March 2007</a></li> <li><a href='http://alexle.net/archives/date/2007/02' title='February 2007'>February 2007</a></li> <li><a href='http://alexle.net/archives/date/2006/12' title='December 2006'>December 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/11' title='November 2006'>November 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/10' title='October 2006'>October 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/09' title='September 2006'>September 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/08' title='August 2006'>August 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/07' title='July 2006'>July 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/06' title='June 2006'>June 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/05' title='May 2006'>May 2006</a></li> <li><a href='http://alexle.net/archives/date/2006/04' title='April 2006'>April 2006</a></li> </ul> </div><!-- #archive --> <br/> <ul class="list lead"> <li> <p>You are currently browsing the archives for the Web Scripting category.</p> </li> </ul> <!-- PubMatic ad tag: Sidebar 1 Wide Skyscraper | http://alexle.net | 160 x 600 wide skyscraper --> <script type="text/javascript"> var pubId=7523; var siteId=7524; var kadId=4658; var kadwidth=160; var kadheight=600; var kadtype=1; </script> <script type="text/javascript" src="http://ads.pubmatic.com/AdServer/js/showad.js"> </script> </div> </div><!-- sidebar1 .grid_3--> <div class="grid_3 omega"> <form method="get" id="searchform" action="http://alexle.net/"> <div> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Go" /> </div> </form> <div > <!-- FeedBurner Counter --> <br/> <p><a href="http://feeds.feedburner.com/AlexLe"><img src="http://feeds.feedburner.com/~fc/AlexLe?bg=FF9933&fg=FFFFFF&anim=0" height="26" width="88" style="border:0" alt="" /></a></p> <!-- yahoo Wide Skyscaper --> <script language="JavaScript" type="text/javascript"> <!-- ctxt_ad_partner = "1680444954"; ctxt_ad_section = ""; ctxt_ad_bg = ""; ctxt_ad_width = 160; ctxt_ad_height = 600; ctxt_ad_bc = "3E62B3"; ctxt_ad_cc = "FFFFFF"; ctxt_ad_lc = "0000DE"; ctxt_ad_tc = "333333"; ctxt_ad_uc = "339933"; // --> </script> <script language="JavaScript" src="http://ypn-js.overture.com/partner/js/ypn.js"> </script> </div> </div> </div> <!-- Dynamic Page Served (once) in 0.488 seconds -->