Thursday’s Critique
This is what I showed in Thursday’s critique:
We talked about a few things: that I was having trouble getting Isotope to sort (we concluded that it would be a nice bonus to have, but I’ve met the project’s technical requirements already. I’m still going to try to get it working, but only if I have time), my page’s weird scrolling right (decided to get rid of right scrollbars) and whether or not it is possible to change my navigation image when it is selected (I have to email Andrew when I get to this).
I took some notes during critique and made a to-do list as well, but I don’t have access to a scanner today – will have to put that up later.
Page Fade is Working!
I thought the animation on the first page might look hokey if I didn’t have some sort of other animation, like a fade-in to the second page. I used this to get it working. Here’s my site with it implemented on the second page:
Implementing Reveal
For my popup info box, I am using the plugin Reveal. I’m really happy to have found it because I don’t think I’ll even have to do much tweaking in the CSS – its aesthetic is actually pretty much exactly what I had in mind, so that’s rather convenient!
I first tried to include it so that it would appear when you click on one of my menu buttons, but it didn’t seem to play so nicely with the combo of rollovers/Isotope already in place on those buttons. I’m okay with that, actually, because it might be a better solution to just have a question mark in the bottom right-hand corner with all the information. This way, users won’t be bombarded with a popup box each time they try to sort the items. This is my failed attempt at implementing Reveal over my Isotope-y rollovers:
Here is my working version with the right-corner question mark. I realize the font styling/colour/everything is just terrible, but once again, I’m going to do all of that tweaking once I have my jQuery all in place:
Implementing Mosaic
To do my sliding image captions, I am using the very cool plugin Mosaic, which can be found here. Very easy to implement and I had it up and running on my example in no time!
http://digital-locker.design.yorku.ca/3006Af12/marissakorda/project1/19.%20Mosaic%20Test/Index.html
Then put it in place on my site. Still requires a lot of adjustment because I don’t like the fonts that I’m using and a lot of the words have been cut off, but I’m not planning on doing any of that tweaking until ALL of my jquery is put in place, just in case things change.
Implementing Isotope on My Site
I first finalized my demo by creating horizontal navigation and finally getting the rollovers to work:
Then I tried to put it on my site, but again ran into troubles. Still not entirely sure why it wasn’t working here because it looked fine, appearance-wise (unlike all of my other disastrous demos):
But I did get it all sorted out and now it works! I think this has been the most exciting/rewarding part of this project so far:
Tried to work sorting out but it was posing some troubles (even though I now understand the plugin a lot better) so I decided to leave it for a bit and tackle it once everything else is done, if I have time. Here’s the little progress I made with it at all:
Got Isotope Working!
Decided to try Isotope AGAIN, only to not have it work again. I was getting pretty puzzled at this point because each time I’d try to implement it, it wouldn’t work but I’d get slightly different results every time.
I did this one following a tutorial from Design Lunatic (http://www.designlunatic.com/2011/08/isotope-tutorial/), but it didn’t work either:
FINALLY GOT IT TO WORK!! SUCCESS! I had literally copy/pasted the code from the Design Lunatic tutorial into a blank document and it didn’t work, so I figured there MUST be an error in their code. Line-by-line, I compared the code in their working demo to the code laid out on the actual site and as it turns out, there was an error and it worked using the demo code!:
jQuery Quicksand Experiments
After getting the simple jQuery filtering working, I used another tutorial (http://www.evoluted.net/thinktank/web-development/jquery-quicksand-tutorial-filtering) to try to animate it with the plugin Quicksand.
I sort of got it working:
I then took a couple of attempts to work on implementing my rollover buttons, but with little success… I found this part very very confusing:
After getting frustrated with the rollovers, I decided to start again, very simply. I used the initial simple jQuery rollover page (no Quicksand) to try to do the rollovers, but still found it difficult:
jQuery Filtering Experiments
When I got frustrated with Isotope, I found a tutorial (http://www.evoluted.net/thinktank/web-development/jquery-quicksand-tutorial-filtering) for simple jQuery filtering that can later be augmented with the plugin Quicksand (similar to Isotope).
My first attempt to implement it didn’t go very well:
I then went back to Isotope, thinking I may have better luck after reading through a bunch of tutorials and understanding the code better. Again, no luck:
Finally got the simple filtering working with some of my images – based it off the tutorial’s code and subbed in a bunch of my own stuff:
Isotope Experiments
I spent ages trying to get the plugin Isotope to work on my site. Here are the first two experiments I did:
file:///Volumes/Course_Groups/3006Af12/marissakorda/project1/4.%20Apocalypse%20FINAL%203.0%20-%20Isotope%20Experiments/mainpage.html
Now that I’ve got the plugin working and have spent many more hours muddling through the code, I am not entirely sure what went wrong here. I created the first one of these by attempting to follow the very limited documentation on Isotope’s website, and the latter by piecing together bits from online tutorials.
I Properly Centered my Splash and Main Pages!
Even though I struggled for hours (though it seems so simple now!) to center my splash page in the first place, I still didn’t get it perfectly… I had certain elements aligned to the bottom and others to the top, and I realized that on a larger browser, my page was going to get strangely chopped up. So I worked on re-aligning each page so that all the elements will remain in the same positions relative to each other, and just center in the middle on a larger browser. I was so excited to have this work that I saved a copy of the website in this state just in case things got changed later and it stopped working:
Interactivity 3 Process Work 