Topic: fanposter community site based on xajax

Fanposter.org (http://www.fanposter.org) is a community site that allows you to create your own Fanposter for anything.

The site is built extensively upon xajax (I started off 18 months ago with 0.2.4 and run now 0.5 beta 3 - cheers guys) - BigBrownChunx, remember the World Cup Fanposter?!

I'm using xajax for:
- image upload with status bar
- form validation (incl. inline validation similar to auto-search completion)
- content popup, content changes, puh, pretty much everything, xajax became so natural to me, it's almost part of PHP for me.
- I plan to include star rating later on. In general, the sky is the limit hehe.

Guys, I welcome your feedback and invite you to join Fanposter.org and create your own Fanposter for anything!!!
(Who wants to create the xajax fanposter??)

cheers
Mike

Fanposter.org - http://www.fanposter.org - create your own Fanposter for anything!

Re: fanposter community site based on xajax

I remember this from before, but I see you've continued to enhance it nicely!  Great job!

It seems to be quite intuitive.  I was able to navigate easily.  My only request would be to support larger pictures (or at least the ability to zoom in a bit more, even if the image is stretched to twice it's size as the images are still a bit small on a high res screen)

Also, I noticed the highlight rectangle / square would (on rare occasion) be off by 10 or 20 pixel vertically from the picture it was over... until I'd move the mouse over the image, then it would correctly position around the image.

An excellent example of xajax in action!

// Joe

xajax Developer
Connect to me on LinkedIn:
http://www.linkedin.com/in/calledtoconstruct

3 (edited by gringuito 2007-12-14 2:23:10 AM)

Re: fanposter community site based on xajax

Hey CtC!

thanks for your nice words wink and the tips.
I've implemented being able to view a bigger image version now. When you click on a field you get the picture popup - in there you can use the magnifying glass to preview.

The other issue with the hover rectangle was a little trickier and I will post the solution here:

Basically it consisted of three problems:

1.) IE box model hack (IE does not count the border - in my case 2px to each side - as part of the inner content vs. other browsers do according to the specs)
2.) IE assigns a default height to empty div containers
[ 3.) I didn't re-assign the new position of the rectangle after opening a menu item]

Solutions (my div container is called "mover"):

1.) IE will use the second definition and then crap out vs. all other browsers will discard second definition and use the third one
div.mover {
    position: absolute;
    top: -100;
    left: -100;
    border: 2px solid #990000;
    display: none;
    background: transparent !important;
    z-index: 1;
    cursor: crosshair;
}
div.mover {
    width:<?= ($size)?>px;
    height:<?= ($size)?>px;
    voice-family: "\"}\"";
    voice-family:inherit;
}
html>body .mover {
    width:<?= ($size-4)?>px;
    height:<?= ($size-4)?>px;
}

2.) adding a comment to the div (so it's not empty anymore)
<DIV id="mover" class="mover"><!-- --></DIV>

3.) solved internally

Cheers, Mike

Fanposter.org - http://www.fanposter.org - create your own Fanposter for anything!