<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>qrisper &#187; modal</title>
	<atom:link href="http://blog.qrisper.com/tag/modal/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.qrisper.com</link>
	<description>the making of qrisper.com</description>
	<lastBuildDate>Fri, 14 Aug 2009 22:32:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>With great power comes great responsibility</title>
		<link>http://blog.qrisper.com/2009/02/41/</link>
		<comments>http://blog.qrisper.com/2009/02/41/#comments</comments>
		<pubDate>Sat, 07 Feb 2009 17:23:41 +0000</pubDate>
		<dc:creator>Jung Lee</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[modal]]></category>
		<category><![CDATA[nettuts]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://blog.qrisper.com/?p=41</guid>
		<description><![CDATA[
Decided to take a breather on the php to focus on the interface.  Actually, the php issue was interface related so I guess what I really mean is focus on making qrisper a bit flashier looking.
The landing page was getting a little noisy so I decided to put the registration into a modal window. I [...]]]></description>
			<content:encoded><![CDATA[<p><a title="best beach" href="http://qrisper.com/answers/best-beach-in-the-world/"><img class="size-medium wp-image-46 alignright" title="best beach in the world" src="http://blog.qrisper.com/wp-content/uploads/2009/02/beach-300x181.gif" alt="best beach in the world" width="300" height="181" /></a></p>
<p>Decided to take a breather on the php to focus on the interface.  Actually, the php issue was interface related so I guess what I really mean is focus on making qrisper a bit flashier looking.</p>
<p>The landing page was getting a little noisy so I decided to put the registration into a modal window. I used jquery and followed a tutorial from <a title="Popup Window" href="http://yensdesign.com/tutorials/popupjquery/">yensdesign.com</a>.  Implementation was pretty straightforward. One thing I want to tinker with is the location of the window.  It looks a bit off-center&#8230;I noticed that on the tutorial as well.  If anyone can see the reason why, please holler (code below).</p>
<pre>function centerPopup(){

        var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $j("#popupSignup").height();
	var popupWidth = $j("#popupSignup").width();

	$j("#popupSignup").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
}</pre>
<p>I&#8217;m using jquery with prototype so I needed to make sure that I included jquery&#8217;s noconflict clause and change the $ variable for all jquery scripts (hence the $j).  There&#8217;s so much information out there about jquery that it&#8217;s hard not to use it.  But now that I have the power, I need to be responsible and practice restraint.  qrisper&#8217;s getting a little large around the waist from overindulging on all of those image files. Found this site on <a title="web optimization" href="http://www.websiteoptimization.com/">web optimization</a>, telling me that qrisper needs to go on a  diet.</p>
<p>Also added a little feedback button&#8230;meh&#8230;looks alright.  The button made me realize that I&#8217;m digging myself into a trap.  I am maintaining slightly different versions of the same page.  Which version the users see depends on whether or not they&#8217;re logged in.  Decided that I could probably use a php if statement to swap out includes depending on whether or not a session id exists.</p>
<p>Wanting to trim the fat further, I went to clean up my css files and optimize them with a few new tricks I learned.  Big mistake that was.  Spent a few hours fixing all of the damage I caused.  I found the <a title="css optimization" href="http://www.thefloatingfrog.co.uk/frog-blog/2008/09/10-css-shorthand-techniques-youll-use-everyday/">tips</a> from <a title="Bone Structure" href="http://bonestructure.com/blog/">David&#8217;s</a> <a title="dbone webdev" href="http://webdevconversations.blogspot.com/">old blog</a>.  Actually found a number of good resources&#8230;a few of which I used to fix a few issue that had been bugging me.</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2F41%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.qrisper.com%2F2009%2F02%2F41%2F" height="61" width="51" /></a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.qrisper.com/2009/02/41/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 0.212 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2009-10-04 11:16:53 -->
