jodriscoll's public fiddles
-
Nomogram Form - BASE
No-Library (pure JS), HTML, CSS, JavaScript
-
Nomogram Form
No-Library (pure JS), HTML, CSS, JavaScript
-
anythingSlider - Full (fancyBox)
Fancy Box Troubleshooting
-
anythingSlider - Half
MGH anythingSlider
-
After DOM Update
This helps adjust static elements that don't allow access to the content within it.
-
anythingSlider - Full
MGH anythingSlider
-
The One Hundred CSS Button
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece Footer
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece - Call to Action Example
Mootools 1.4.5, HTML, CSS, JavaScript
-
Ask Yourself for Health - FancyBox
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece - Interior Navigation
Mootools 1.4.5, HTML, CSS, JavaScript
-
XAFDz
jQuery 1.8.3, HTML, CSS, JavaScript
-
hgRqZ
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece - Connect
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece Button Styles
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece Call to Action
Mootools 1.4.5, HTML, CSS, JavaScript
-
Be a Piece Pull Up
jQuery 1.8.3, HTML, CSS, JavaScript
-
Tiled containers with small thumbnail
Our plan was to approach the image with a caption dilemma the same way but with more of a focus on content. Initially, we used older templates but realized that the overwhelming presence with the image was too extreme. We decided to go with a single image and position the background depending on the content and have it spread out evenly within a grid pattern.
-
MGH Branded CSS containers
Without using the standard, image left/image right, we wanted to combine the caption of a photo with the actual photo in a simple yet elegant treatment. I decided to put the actual caption or message for the thumbnail over the bottom half of it and apply it with a custom container treatment. Other than the image and the border, everything else is being driven through simple CSS.
-
Search and you type drop menu
Prior to implementation, the cancer center homepage used a simple, yet long, unordered list with all the conditions listed out. This caused a large amount of white space for the page, which resulted in our exploration in using a drop list of some sort. After much research, testing and trials, we were able to find the jQuery library "chosen" and completed modify it to work with our style guide and on the other hand allow the user to quickly type a condition and have the "search as you type" functionality carry over to this system.