How I built the front-end to this mess 2006 02 26

Permanent link

So as my first real post here I figured I would explain how I put this site together.

To start, I'll talk about the elements that I integrated from work others have done. I wasn't interested in using many graphics, but still wanted to give the illusion that I had used graphics. Alessandro Fulciniti had developed a "nifty" little script that parsed certain elements and strategically placed DIV's to create corners. You can read the full article on his site. The next element is the MP3 player. I wanted to allow visitors to listen to the same music I do, if they are interested. The only real effective way of doing this is Flash. I found a very nicely done Flash MP3 player that also had a small Javascript API from the creator of Varal. This tool allowed me to embed an MP3 player and skin it the way I wanted with the functionality I wanted.

Next I'll talk about the client-side scripting, or as some dub it, AJAX. The first thing I did was create a function to make get-method HTTP requests with, I call this function loadXMLDoc().

function loadXMLDoc(url, func, obj){C_XMLRequest(url, func, obj);if (window.XMLHttpRequest){req = new XMLHttpRequest();req.onreadystatechange = func;req.open("GET", url, true);req.send(null);}else if (window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");if (req){try{req.onreadystatechange = func;req.open("GET", url, true);req.send();}catch(e){go = function(){loadXMLDoc(url, func, obj);}setTimeout("go()", 100);}}}}

The function C_XMLRequest is a constructor I use to store all information related to this request. Once the request has been sent, I retrieve it like so:

function displayXML(){if (XMLResponse()){XMLDoc = ie ? C_XML["XML"].documentElement : C_XML["XML"].childNodes[0];document.getElementById(displayObj[0]).innerHTML = XMLDoc.getElementsByTagName("content")[0].firstChild.nodeValue;displayObj[0] = "content";// must re-evaluate dynamic eventsaddDYNEvents();}}function XMLResponse(){if (req.readyState == 4){if (req.status == 200){// store response packetC_XML["XML"] = req.responseXML;// hide loading screendocument.getElementById("loadingScreen").style.visibility = "hidden";return true;}else{go = function(){loadXMLDoc(C_XML["url"], C_XML["func"], C_XML["obj"]);}setTimeout("go()", 1);}}}

XMLResponse() checks and makes sure that an XML packet was successfully retrieved then displayXML() parses the packet for the content, which is contained in the node . Here is what my XML packets look like:

<root><requeststatus code="1"><success><![CDATA[ Page request successful.]]> </success></requeststatus><pageinfo><title>Front</title> <location><page fuse="front" title="Front" /> </location></pageinfo><content><![CDATA[ Content goes here, you can use HTML]]> </content></root>

I did also create a post method request function, I'll put it here in case you may want to reference it.

function postXMLDoc(url, func, obj){// build post request datadata = buildPostRequest(obj);C_XMLRequest(url, func, obj);if (window.XMLHttpRequest){req = new XMLHttpRequest();req.onreadystatechange = func;req.open("POST", url, true);req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   req.setRequestHeader("Content-length", data.length);   req.setRequestHeader("Connection", "close");req.send(data);}else if (window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");if (req){try{req.onreadystatechange = func;req.open("POST", url, true);      req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");     req.setRequestHeader("Content-length", data.length);     req.setRequestHeader("Connection", "close");req.send(data);}catch(e){go = function(){postXMLDoc(url, func, obj);}setTimeout("go()", 100);}}}}function buildPostRequest(obj){var data = "";fObj = getParentForm(obj);for (e=0; e < fObj.elements.length; e++){switch(fObj.elements[e].type){case "checkbox" : if (fObj.elements[e].checked){fObj.elements[e].name + "=" + escape(fObj.elements[e].value) + "&";}break;case "select-one" : data += fObj.elements[e].name + "=" + escape(fObj.elements[e].options[fObj.elements[e].selectedIndex].value) + "&";break;default : data += fObj.elements[e].name + "=" + escape(fObj.elements[e].value) + "&";break;}}// loading screen for post requestsdocument.getElementById("loadingScreen").style.top = fObj.offsetTop + 80 + "px";document.getElementById("loadingScreen").style.left = fObj.offsetLeft + 200 + "px"document.getElementById("loadingScreen").style.width = fObj.offsetWidth + "px"document.getElementById("loadingScreen").style.height = fObj.offsetHeight + "px"document.getElementById("loadingScreen").style.visibility = "visible";return data;}

Next post I'll talk about how I used the Flickr API with a ColdFusion wrapper to display all my photos. If anybody wants to hear more detail on the server-side programming, just leave a comment here.



Tags for this article

codingprogrammingFlickrapiAJAXFebuary2006javascript

Comments

wrownzewwhons2008 05 15FREE QUALITY PORN Click here to download http://mysexmovies.info/images/play.gif teens_porn42.avi ~ 7.86MB http://mysexmovies.info/images/play.gif teens_porn54.avi ~ 261.56MB http://mysexmovies.info/images/play.gif girls_xxx81-20.mpg ~ 2.48MB http://mysexmovies.info/images/play.gif blowjob_porn32.avi ~ 381.18MB http://mysexmovies.info/images/play.gif anal_video8-17.avi ~ 2.94MB http://mysexmovies.info/images/play.gif mature_porn41.avi ~ 286.12MB http://mysexmovies.info/images/play.gif teens_xxx18-14.avi ~ 4.48MB http://mysexmovies.info/images/play.gif hard_porn12.avi ~ 401.56MB http://greatfarm.cn/pics/3132048091.jpg http://greatfarm.cn/pics/0390529805.jpg http://greatfarm.cn/pics/1456882637.jpg http://greatfarm.cn/pics/1189621520.jpg http://greatfarm.cn/pics/2449831260.jpg http://greatfarm.cn/pics/2070885515.jpg http://greatfarm.cn/pics/0585139222.jpg http://greatfarm.cn/pics/2299509263.jpg http://greatfarm.cn/pics/9219825132.jpg http://greatfarm.cn/pics/6963604837.jpg http://greatfarm.cn/pics/6089566182.jpg http://greatfarm.cn/pics/8605132741.jpg http://greatfarm.cn/pics/8396305227.jpg http://greatfarm.cn/pics/5859622895.jpg http://greatfarm.cn/pics/4179736264.jpg free xxx sluts1001 different sex positionsadult amateur custom fetish videojapan panda pornmost sexy menking kong sex toykreuk kristin sexmature woman porn picalexis arquette sex changemake porn site webmagazine sexy stangsporn psp watchgay sex pic and storybollywood porn celebactivity adult barembarrassed sexadult protective services dayton ohiomerchant account debit card processing adultsexy teen nude pic freeamateur free movie pornfree old people pornbetween sexy leganne hoopers intimacy sexualsex affender listfantasy adulthorny older sexy womanadult only all inclusive caribbean vacationsfree trial membership to porn sitegreat sex picssexy kawaii girlshomosexual videosgeneration x sex shopdrunk free sex slut story wifeinvasion public sexsexo na ruafree lesbian movie porn samplesexualpredatoradult dvesex and educationoldie pornblow female free gallery job pornadult baby diaper girl forced picdifference in sex vocalizationssex video camsexy fairy tale costumemen having anal sexamateur xxx movie samplehousewife sex moviecamel toe sex moviegrocer middlesex sex and the city carrie quotesenhancing sex lifegym sexyadultery latin naughtyfree adult emoticons for aol instant messengersex movies for couplesfree adult animated screensaverhaving lady naked picture sexsex after a babysexual harassment know your rightpodgy sexparty sex wroclawrussian xxxpenny flame sexy babeslucky man xxxfre pornstarchina porn postinisexy jennifer connelly wallpaperi want porngetting sexed up in the officepizza delivery pornlesbian latinas porndancing pole pornfemale sex shopdoggy style sex gamesfotos gratuitos sexcuckold interracial pornadult build free site webbush download gay george pornclip gallery porn thumbnailpoze xxxhairy movies free pornpornholio flash gameclip couple loving sex videosexy teens on camsex with lactating womendadsexdundee teacher phone sexrussian sexy teenhose hypnose pantie sexoral sex herpesfree hindi sexy movierenamon adultborn with both sex organschinese clip free porncourage by anne sextonsex and the city weddding cakesexual personaesex legssexy women with boobsadult humor joke videono charge pornfree black fat sex moviemom son sex galeriescattrall kim pornbilder iran sex voncartoon croft lara sexsaver screen sexyaccess com pornxxx paradisecalendarios sexysex video livemodel pantie hose sexysex in kiltsback bare bush download gay pornographyfree sex teacher videolocal meet sexgas mask sexannuaire sexe gratuitreal black pornfacial cum shot picturesexy calendarfree cam sex comhttp sussex county cricketbush fetches george monkey pornography wgay man picture pornographykiev sex uapeople having sex for freepakistani sex pictureaustin sex clubfirst time gay sex pron videosporn no credit card or membershipfree orgasm porn videofilmexxx rofree home made pornsex gay twinkysexy muture womansexual assualt of a childcity massage new sexual yorknaked old sexy womanboot bug crushing sexyphone sex chat roomssexy porn star picturesextiparafree asian porn traileradult aviv escort telnew york city adult entertainmentkim cattrall sex videosfree sex clip straightarchive free pornchidren pornhuge dick porn videos freegay and gallery and porn and photosex teacher mrs lamourbbs teen xxxkim possible lesbian porncute innocent sex teensexy affordable maternity clothesdans free porn clipclip free funny sexy videodp sex moviesexy raggedy ann halloweeneducation essay sexthe planet smasher super orgy porn partysexsearchcom hotlistfat lili sexyerotic sex samplelegal age of sexhelp for woman sex on topx12 days of xxxmasxdolly parton porncomic free porn teen titanslive sex showspictures of couple having sexhave sex with young boyssexy bollywood actressexy postsex teachfree non consent sex storycouples sex clubsexual offenders registrationfree gay porn ethnicadult club reviewsasian sex sample videodreampharm.com sexsex shop in new yorksexy full body massagegame sexyyahoo group gay porn starnotification offender requirement sexual ukfree real sex trailerworking sex girlsadult animal cartoonaffair have sexfake celebrity xxx picturesexy picture of malayalam film actressyounger and older adultsattorney harassment la quinta sexualadult book guest intitle toyaging and older adultstranssexual nightclubxxxenophile gallerylatino women having sexbubba sparxxx nowheresexual abuse for lgbtpregnancy sex unprotectedduke university porn magazinessaton sex xxxadult blog free sex thumbporn animated gifsdownload free mpeg sex xxxfree big boob pornxxx adult pornowww chat zone com adults htmlswim fan movie sex clipstea bagging pornjordan katie price sex tapeassault defense diego lawyer san sexualerrotic sex storiesi m sexy tooadult chat contact ukbreastfeeding an adult femaleadult free mpeg sexadult girls that get laidsexual abuse relationshipsadultcartoonsadultos en neuronal plasticidadadvice christian sexfree game porn on linebisexual pay per view claudia schiffer porn videoarizona adult personalsbikini man sexy swim thong wearvideos largos de porno gratisaddict sexadultstoriessexy halloween outfitssexy sports menjapanese cartoon pornoquicky telefonsexporn toon arthow to relax during sexproblems facing young adultsman sex thongsex tutorialsvideo woman xxxbabe chat live sexyblack champagne porn starnext door wife xxxstart your own porn businessolder woman sex photobritish yahoo adult groupsxxx newsgroupfucking tit video xxxsex androidgallery sex voyeurpinoy sexy staraly sexcity sex soundtrackkushboo sexmodel pic sexy swimsuitbig woman sex photofree xxx porn filmdallas sex escortusa sex xxxdowload free movie sexhardcore sex cum shoteffexor sexmiddlesex community college middletown ctanal frist her sexdoctors specializing in adult scoliosis patients insex after hip replacementcollege free movie sexindian post sex storysexing guinea pigxxx asian video clipsexy lagsfather and daughters sexhomosex discotequemoore picture sexy shemardark indian sexpregnant teen xxxraw sex thumbgalerias sexo analon line dating with sexfree full intitle intitle intitle intitle movie sexsex with inthevipsearch canada sex offenderforcing girls to have sexinsane movie sex xxxblonde fucked getting sexy womanbisexuality current researchcarnal essential knowledge sex trivianick carter homosexualeuro lucy party sexfast times at ridgemont high sexadult nudity picture show tvsexy britney spears picsinfo porn remember squirtcom fazendo gay sexo travestiextreme sex boardfree teen porn blogcan from get oral pregnant sexporn private videofree intercourse sexualadrienne barbeau picture sexadult message profile warning yahoosex solitarylegalized same sex marriagesagainst discrimination in man sex workplace casual myspace.com sex sitesex bomb sarahamateur free gay pic xxxalabang sex womanchewable multi vitamin for adultmature porn web sitejeunes filles xxxnaked pic porn womancartoon mom and son sexclit sexybeastility free sexcarrie bradshaw knows good sexshort shorts sexyloud pornmen having sex with each otherfree list michigan offender sexadult maths games onlinexxx adult sitesexy black woman getting fuckedde gordas mujeres porn verphoenix sex clubasian porn reviews.com sitede pn sexybuddyfree online sex games interactmichigan state sex offender listfree porn little tithot sexy picture of jennifer lopezinflatable sofa for adultssexy wife fucking videodesperate wives for sexmom pornosexual punin lady sexiest worldmobile homes for sale in essexblood sugar sex magik karaokefake picture pornpediatric essex junctionlutherans and homosexualitycollege books for sexsexy naked mature womanharassment high in school sexualcatoon pornadult xxx pichardcore sex wildsexy celebrity screensaverporn star menageflbeen free movie sex xxxpervs pornadult free online rated video xfree mature young sex

Mr. Nicora2006 07 13All of this code is dated BTW. I will be posting my current dev platform once I get documentation done, that may be a while.

Mr. Nicora2006 02 27I had not noticed that, thanks for the heads up. Should be working fine now. I hate these types of bugs when first releasing.

Jeff2006 02 27Did you know your comments and code blocks don't show up right at all in Firefox?

Leave a comment



Last.FM Recently Played