Code for Artists - Miles DeCoster

Filter examples:

p.change {
	padding:10px;
	background:#f00;
	display:block;
	width:200px;
	transition: all 2s;
	-moz-transition: all 2s;
	-webkit-transition: all 2s; 
	-o-transition: all 2s; 
}
.change:hover {
	background:#0f0;
	padding:80px;
}

Bits and pieces (small bits of code that do specific things)

• Floating buttons demo from class.

  Simple navigation buttons styled with CSS for class demo. (Digital Translation)

• jQuery index() and eq() functions

  An example using both of these functions in conjunction to set list item background colors by clicking some boxes.

• jQuery index() and eq() functions - variation

  An example using both of these functions in conjunction to set matching background colors. This variation makes some small boxes and sets a random background colors for each. The number of boxes is based on the number of list items in the html and when a box is clicked it toggles the list item bg color to match the bg color of the link box.

• HTML5 Slider

  HTML5 slider element with jQuery function. This just changes the size of a div using a slider.

• HTML5 Sliders set RGB colors

  HTML5 slider element with jQuery function. This changes the color of a div using 3 sliders.

• Javascript conditional syntax variations

  There are several ways to write conditionals in JavaScript and hence jQuery as well.

• Leap years

  Type in a year and a function written in JavaScript checks to see if it is a leap year.

• Using loops to populate form elements

  This sample uses "for loops" to populate form elements to select a date. The month names are stored in an array. This file uses jQuery. Variables are used to set a upper and lower limit to the year.

• Using loops to populate form elements - version 2

  This sample uses "for loops" to populate form elements to select a date. The correct number of days for each month is updated in the day dropdown and we check for leap years if the date selected is February 29. I considered only putting in 28 days for non-leap year Februaries, but that actually seemed awkward in use as we usually select the year last.

• jQuery eq() and index() functions

  This sample shows how the related jQuery function eq() and index() work.

• Using PHP to add a set of radio buttons

  This sample uses a PHP function to add a set of radio buttons to a page. Pass the values to the function.

• Using PHP to add multiple sets of radio buttons

  This sample uses a PHP function to add multiple sets of radio buttons to a page. Pass the group name and the values to the function. When submitted selections are cleared.

• Using PHP to add radio buttons and remember selections

  This sample uses a PHP function to add multiple sets of radio buttons to a page. When submitted it “remembers” selections.

• Image info from the PHP getimagesize() function

  This displays information from array returned by the PHP getimagesize() function.

• Image info from the PHP exif_read_data() function

  Display the array returned from the exif_read_data() function.

• Adding custom titles to PHP included header files

  This uses a PHP variable to set custom titles on pages using a common header file.

• Adding custom scripts and styles to PHP included header files

  This uses PHP variables to set custom script and style links on pages using a common header file.

• Simple passward access using PHP

  This uses a PHP script to make a password and check it against the input value of a form element.

• Randomizing a set of consecutive numbers

  A bit of JavaScript to creat an array of consecutive numbers and randomize the order. Usful for games and slideshows.

• Dealing a deck of cards

  A variation on the previous example. Instead of showing numbers, we use the numbers to load images of cards. Each deal is random.

Leaving a message

Leave a message and it is appended to a text file on the server. Click the View Messages link to see the updated set of messages.

Motion effects (page samples with various motion effects)

• Multi-plane camera effect

  This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. The different layers scale at different rates.

• Multi-plane camera modified for touch interfaces

  This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. The different layers scale at different rates. This version is modified a bit to make it work with touch interfaces as well as desktop browsers.

• Multi-plane camera effect - variation

  This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. This version adds a sliding panel.

• Parallax side-scroll effect

  This uses background image positioning to create a parallax effect. Scrolling side-to-side moves the layers at different speeds.

• Arbitrary motion vertical-scroll effect

  This uses div positioning reacting to vertical scrolling. Each div moves in a different direction/speed when you scroll.

Image galleries (page samples with various image galleries)

• Thumbnails and one large image version 1

  Click thumbnail images to display larger versions. A simple jQuery code using file names to change the larger picture.

• Thumbnails and one large image version 2

  Click thumbnail images to display larger versions. A simple jQuery code that hijacks regular HTML links to change the larger image.

• Upload an image for the page header

  Use a form to select an image (gif, jpeg or png) from your local drive and upload it to the server. The image will be resized, saved and placed in a folder. The saved file will be named "banner.jpg" and that image source is then inserted into the banner div.

• jQuery image preloader

  Script preloads a set of images. It has three functions that can be called are called when the script loads, each image loads and all of the images are loaaed.

• jQuery image preloader and slideshow

  Script preloads a set of images. The fist image is faded in once it is loaded. When all of the images are loaded the links for the "slideshow" appear. The slide show uses the jQuery animate function to fade out the image and fade in the chosen image. We use jQuery to hijack the links and to hide the things we want to show only when the images are loaded so the page still has basic functionality with JavaScript disabled.

• jQuery image preloader and slideshow version 2

  Script preloads a set of images. The fist image is faded in once it is loaded. When all of the images are loaded the thumbnails appear. The slide show uses the jQuery animate function to fade out the image and fade in the chosen image. We use jQuery to hijack the links and to hide the things we want to show only when the images are loaded so the page still has basic functionality with JavaScript disabled.

• Upload images for a "banner" slideshow.

  An image uploader that scales, crops, numbers and saves image files. Another page uses the images for a banner with a slide show of preloaded images based on the file list generated by the uploader.

Change an image during vertical scroll

This sample has a fixed position image that changes the source file when scrolled. It works with touch devices (iPhone, iPad) as well as desktop browswers.

Color (some color stuff)

• Build a grid of swatches

  This example uses a script to build a grid of greyscale swatches.

• Build a grid of web-safe color swatches

  Set the way-back for 1995. This example uses a script to build a grid of swatches using the once-popular web-safe colors.

• Build a grid of 1331 swatches

  A variation on the previous example, just useing 11 color steps instead of 6.

• Build a grid of HSL color swatches

  A variation on the previous example, using HSL (hue, saturation and lightness) values.

Color wheel generated by Processing

This is one of the examples that comes with the Processing 1.5 installation saved as a Java applet. Version 2 of Processing is now available.

• Color wheel generated by Processing - modified

  Processing JS is replacing Java applets as the preferred method of rendering Processing sketches on the Web. This example fixes the TINT function in the Colorwheel example.

• Processing JS - Translate Processing sketches to JavaScript

  A Processing sketch translated to JavaScript via Processing-JS and added to a canvas element. Simple and cool. No need to change the Sketch code!

• RGB Color Mixer

  A color mixer with HTML5 sliders showing primary and secondary colors. In Webkit browsers the sliders are also color coded via CSS.

Josh Miller

Some cool stuff coming soon.

• Swap background images when you scroll

  Includes an image preloader to avoid flashing when you scroll to the image the first time.

Temporary link to the previous version of this site.

©copyright 2013 Miles DeCoster