Portfolio: JavaScript / jQuery

JavaScript jQuery

While HTML and CSS tell a web browser what to include and what to look like, JavaScript is a loose language that tells a browser what to do! The use of JavaScript leads to the term Dynamic HTML or DHTML. Although it is nice to look at a web page, it is much nicer to interact and visually see changes in the content and display.
jQuery is a compiled library of JavaScript classes, functions, methods, and syntax handler. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. Since jQuery is a subset of JavaScript, I present both intermingled in the portfolio below.

“Full Websites”

Below are a few samples of “Full Websites” that rely heavily on JavaScript and jQuery.

GrokDD.com Screen Shot

“GrokDD.com”

Tags: JavaScript jQuery HTML5 CSS3

“GrokDD.com” breaks from traditional websites, with it’s minimal appearance, and unconventional menu selection. The site keeps with the theme ‘Grok’ meaning “To Drink.” Furthermore it pushes the message, “In this era when everything is ran by computers in the background as well as ever encroaching digital mediums over our fluid organic lives, Grok Digital Designs can find your solution.”

While GrokDD.com uses imbedded content, it heavily draws on the power of JavaScript and jQuery to drive the interaction on the page.

Things to look for:
View More...
  • A cross-browser fully dynamically resizing site. Should always fill the browser.
  • Rolling source code blurred and faded in the background.
  • Inactive/Active social media links.
  • Unique vertical sliding dropdown menu.
  • Unique horizontal sliding content.
  • Pixelated white squares encroaching from the right.
  • Use of the “Fresco Lightbox” gallery.
  • Use a jQuery collapsing menu.

This web application features:

  • Fully dynamic resizing. Extending Tyson Matanich’s viewportSize.    View jsFiddle Sample.
  • 16×32 pixel art enlarged to its own canvas without bilinear filtering using a custom function.    View jsFiddle Sample.
  • Lightbox galleries with separate categories.    View Code Sample.
  • Continous scrolling image in background.    View jsFiddle Sample.
  • jQuery to control collaping menu.    View Code Sample.
  • “Fresco Lightbox” gallery. Courtesy of http://www.frescojs.com/.
  • Mary Lou’s collapsing menu tutorial.
  • PHP script to detect mobile platform; redirects user. See PHP Example.

Launch website in a new window.

“mobile.GrokDD.com”

Tags: JavaScript jQuery HTML5 CSS3

The mobile version of GrokDD.com takes the concept and theme of the desktop site and pushes it even further. The simplicity is made even simpler, the navigation is more streight forward and minimal, optimized images for downloading, and less animation and scripting. All in an effort to streamline a mobile devices’ experince.

Things to look for:
View More...
  • Fully cross-browser dynamic resizing.
  • Easy to use intuitive navigation.
  • Gallery slideshow with separate categories.
  • Dynamic contact information verification.
  • Light minimal download.

This web application features:

  • Fully dynamic resizing. Extending Tyson Matanich’s viewportSize.    View jsFiddle Sample.
  • 16×32 pixel art enlarged to its own canvas without bilinear filtering using a custom function.    View jsFiddle Sample.
  • Dropdown menu extended from Chris Wharton’s MeanMenu.
  • Gallery slideshow extended from PhotoSwipe.
  • Dynamic contact information verification.

Launch website in a new window.

Resume ScreenShot

“Resume”

Tags: JavaScript jQuery HTML5 CSS3

This second project “Resume” demonstrates an entire page’s content dynamically created by JavaScript and jQuery. The base HTML document houses a few one-time referenced links and images, as well as a few parent containers the jQuery will be dynamically propagating. The key focus on this site was to use jQuery to take the contents of a specifically structured XML file and parse it into my Resume’s layout. This greatly improves the reusability of the code.

Below is the jQuery that drives Resume's content.
View More...

This web application features:

  • Fully dynamic content.
  • Content parsed from external XML file with jQuery.
  • Tags are conditionally tested to verify they have valid content before displaying the tag’s values.
  • Mouse event listeners are attached to two classes of DIVs.
  • Dynamic content is added using the append() method.

Launch website in a new window.
View page’s XML sample.

“jsFiddle Demos”

To better highlight specific sections of code, “jsFiddle Demos” will be devoted to doing just that: Showcasing sections of code with the help of the site jsFiddle.net.

Image Scrubber

“Image Scrubber”

Tags: JavaScript jQuery HTML5 CSS3

“Image Scrubber” layers two images on top of each other with a draggable handle that will quickly reveal the differences between the two images.

View live Demo in new window.

In addition to being just an image scrubber, this script allows for different images to be displayed by passing additional URL properties. In the above demo, the page sends a URL request with the following data:
scrubber.html?before=before.jpg&after=after.jpg

This project features:

  • A before image.
  • An after image canvas.
  • A draggable handle.
  • Hidden content.
  • Dynamically resizing containers
  • Dynamically loaded images, based on URL data.
  • Cross browser compatibility.
View jsFiddle Demo
American Gothic Pixelated

“Pixel Art Enlarge”

Tags: JavaScript HTML5 CSS3

“Pixel Art Enlarge” enlarges pixel art to any desired size, and draws it on a canvas element. This is much more effective than simply up-scaling an image. Modern browsers typically try to apply a bilinear filter to blur the edges and fill in missing pixel data. Normally this is acceptable. However, Pixel Art is best showcased without any filtering, so I have devised this function.

Secondly, file sizes can be greatly reduced. For example, in the demo below the source image is a 3KB .png file vs. an enlarged version at 35KB .jpg file. That is a factor of 10. Multiply that by thousands of images, and that is quite a lot of bandwidth.

This project features:

  • A source image.
  • A target canvas.
  • User specified pixel size dimension.
  • An enlarged version of the source image.
  • Pure JavaScript.
View jsFiddle Demo
Viewport ReSize

“Resize to ViewPort”

Tags: JavaScript jQuery HTML5 CSS3

“Resize to ViewPort” enables a site to dynamically resize its elements in response to the user’s viewport size.

This is allows sites to appear as intended, keeping elements in place, shrinking/enlarging elements as needed, as well as preventing any anomalies from occurring.

This project features:

  • jQuery re-calculates elements during resizing. Extending Tyson Matanich’s viewportSize.
  • Calculates on window load.
  • Calculates on window resize.
  • HTML values are updated to display current container’s height and width.
  • Waterline image scaled to width of container.
View jsFiddle Demo
Rolling Code

“Rolling Code”

Tags: JavaScript HTML5 CSS3

“Rolling Code” is a small script written in pure JavaScript that creates the effect of a continuously scrolling image. For my site GrokDD.com I use it to simulate code running the shadow government of the digital world.

This project features:

  • Calling upon a canvas element and manipulating it.
  • A call to window.requestAnimationFrame.
  • A call to window.setTimeout.
  • Reference an external source image.
View jsFiddle Demo