the making of qrisper.com

Tag: javascript


best beach in the world

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 used jquery and followed a tutorial from yensdesign.com.  Implementation was pretty straightforward. One thing I want to tinker with is the location of the window.  It looks a bit off-center…I noticed that on the tutorial as well.  If anyone can see the reason why, please holler (code below).

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
	});
}

I’m using jquery with prototype so I needed to make sure that I included jquery’s noconflict clause and change the $ variable for all jquery scripts (hence the $j).  There’s so much information out there about jquery that it’s hard not to use it.  But now that I have the power, I need to be responsible and practice restraint.  qrisper’s getting a little large around the waist from overindulging on all of those image files. Found this site on web optimization, telling me that qrisper needs to go on a  diet.

Also added a little feedback button…meh…looks alright.  The button made me realize that I’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’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.

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 tips from David’s old blog.  Actually found a number of good resources…a few of which I used to fix a few issue that had been bugging me.

Best flat-panel TV 40 - 49Thanks again to everyone that provided feedback so far.  It’s crazy how much tunnel-vision you get when you’re preoccupied with just making the darn thing work!

Anyway, just wanted to highlight all of the changes I made already based on people’s feedback:

Amos:

  • added Q and A icons in the recent answers column.  Tried adding image icons but decided that the simple text looked cleaner.
  • inverted the colors for questions and answers in recent answers.  Was trying to keep the answer colors consistent across the site…need to rethink this.
  • got rid of most of the target=”_blank”.  Still debating whether to keep the ones that link to a Google search or any site outside of qrisper.
  • replaced the ad with a banner providing more info on qrisper – need to work on my animated ads.
  • reorganized the What tab a bit.  Still need to work on the content and new screenshots.
  • combined View 1 and View 2.  Made View 2 available as titles.
  • added some text describing what users can do after signing up under all results pages – need to work on that.
  • changed the links so that the category name takes you to a list of all questions for that category (before you had to click on the number to do that).
  • changed the question page so that the first thing you see are the questions and their answers, with an add your own answer section on the bottom.
  • changed the results page to include a suggest a question section.

I still need to make the content more readily accessible, both for registered and non-registered users.  I’m gonna dive into some ajax to do that.

David:

  • login button doesn’t work – the forgot id/pw div was on top of the login button – oops!
  • form fields don’t fit – that was cuz I never checked for Mac Firefox/Safari.  Only way I could fix it was to shorten it for PC Firefox/IE.

Jack:

  • javascript errors – leftovers from previous code…didn’t even realize they were there!

Chris, thanks for your comment.  That’s basically the idea.