Viewers
-
Image Desaturation Effect
.box img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'grayscale\'>
<feColorMatrix type=\'saturate\' values=\'0.5\'/>
</filter>
</svg>#grayscale");
filter: gray alpha(opacity=50);
-webkit-filter: grayscale(50%);
-webkit-transfo...
Stylesheet Coding
Code
2013
-
Slideshow
HTML
<div id="photos_rotator">
<ul>
<li>
<a href="/node/15">
<span class="title">003</span>
</a>
<div class="rotator_full"><img src="003_0.jpg" alt=""/></div>
</li>
<li>
<a href="/node/14">
<span class="t...
JavaScript
Stylesheet Coding
Code
JQuery
2013
-
Webcam Image Refresher
HTML
<img src="http://orgnsm.org/camoff.jpg" alt="Webcam" id="webcamImage"/></div>
JavaScript
function refreshCam(id, file) {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
document.getElementById(id).src = file + "?time="+h+m+s;
setTime...
JavaScript
Code
2013
-
AJAX Remote Read, Local Write
w/JavaScript
//the callback function run after loading JSONp below
function test_results_loaded(data){
//post data to a service via ajax
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://orgnsm@orgnsm.org:lkAGWUE01H@orgnsm.testrail.com//index.php?/api/v2/add_result/1", true);
xhr.setRequestHeader('Cont...
Code
JavaScript
JQuery
2013
-
DOM Inject and Add Event
w/JavaScript
window.onload = function(){
//create new button
var btn = document.createElement("a");
btn.setAttribute("id", "addedbutton");
var btntxt = document.createTextNode("Run Me");
btn.appendChild(btntxt);
//inject new button
document.getElementById("sidebar").appendChild(btn);
//add event to ...
Code
JavaScript
JQuery
2013
-
Pagination Logic
<?php
$items = array(
0 => array( "item 1", "2013-09-13", "1" ),
1 => array( "item 2", "2013-09-14", "2" ),
2 => array( "item 3", "2013-09-15", "3" ),
);
######## CALCULATIONS #########
# set per-page var
if (isset($_GET["perpage"])) $perpage = $_GET["perpage"];
else $perpage = 10;
# calc ...
Code
Template Coding
PHP
2013
-
Device-Responsive Layout
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0;"/>
CSS
@media (max-width: 480px){
}
@media (max-width: 767px){
#container{
padding: 0 25px;
}
nav ul li a{
font-size: 100%;
padding: 15px 0;
border-radius: 30px;
}
nav ul li ...
Stylesheet Coding
Code
2013
-
Dynamic Form Submission
The JavaScript
jQuery(function($){
$("#contact").submit(function(){
//grab form values before blowing it out of the DOM in the next line
values=$(this).serialize();
$("#contact").html( "<p>Sending message...</p>\n" );
//send the values to the PHP handler
$.aja...
Code
JavaScript
PHP
JQuery
2013
-
Read and Process RSS
<?php
function getRSS( $url ){
$cobj = curl_init( $url );
curl_setopt( $cobj, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt( $cobj, CURLOPT_CONNECTTIMEOUT, 0 );//0 = no timeout
$tumblr_raw = curl_exec( $cobj );
curl_close( $cobj );
if( $tumblr_raw ){
$tumblr_xml = new DOMDocument();
$tumblr_xml->lo...
Code
Template Coding
2013
-
La Picolla Scolla Italia
Italian Preschool Information
Layout & Typography, Semantic XHTML content structuring, Site Template & Request Handler, Flash & GoogleMaps Embedding...
Stylesheet Coding
Information Structuring
Template Coding
JavaScript
Work
2013
-
Incubator
Artwork Project Archive
Typography & Layout, Content Structuring, UI/X Design, Interactivity & Sorting...
Work
Stylesheet Coding
Information Structuring
Graphic Design
Template Coding
JavaScript
Drupal
Organic Connectivity Module
2013
-
Jellyfish Frequency
Record Label Website
Work
Template Coding
Information Structuring
Stylesheet Coding
Drupal
2012
-
Attributes
Types
2012
3
-
Page Layout Method
HTML
<div id="hub">
<div id="content1" class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio...
Code
Information Structuring
Stylesheet Coding
2012
-
Stylesheet Switcher
Style Links HTML
<link rel="alternate stylesheet" type="text/css" href="/theme/KATALOG/style.css" title="KATALOG"/>
<link rel="alternate stylesheet" type="text/css" href="/theme/SCREEN/style.css" title="SCREEN"/>
<link rel="alternate stylesheet" type="text/css" href="/theme/spaeci...
JavaScript
Code
2012
-
BossaNova Robotics
Robot Toy Product Promotion
Site Request Handler, Framework for loading XML content from Flash nav click. Flash, GoogleMaps and YouTube Embedding....
Stylesheet Coding
Template Coding
JavaScript
Work
2011
-
TiedyeJohn
Tiedye Artist Examples and Ordering
Stylesheet Coding
Template Coding
JavaScript
Information Structuring
Work
Drupal
Graphic Design
2011
-
Kimochis Portal
Forum for Users of Educational Toys
Work
Stylesheet Coding
Information Structuring
Template Coding
Drupal
2011
-
Frameworks
...
Google
Attributes
Types
Topics
Topics
2011
6
3
-
IAS
Data Management Services Promotion
Salesforce Form Submission Connectivity, AJaX Content Filtering, Flash Video Embedding...
Stylesheet Coding
Information Structuring
Template Coding
JavaScript
Work
Drupal
2011
-
PaulBird.tv
Mixed Martial Arts Fighter Information & Media
Layout & Typography, DrupalNodes, DrupalBlocks, UI Design/Background Art, DrupalViews Templates, YouTube Embedding...
Work
Stylesheet Coding
Information Structuring
Graphic Design
Template Coding
JavaScript
Drupal
2011
-
777
Dimensionality Study Tool
Work
Information Structuring
Template Coding
Stylesheet Coding
Drupal
Organic Connectivity Module
Graphic Design
2011
-
Organic Interfaces
Portfolio Website
Work
Information Structuring
Template Coding
Stylesheet Coding
Graphic Design
Drupal
Organic Connectivity Module
2011
-
Luscious Hawaiian
Natural Island Food Products
Graphic Design
Template Coding
Stylesheet Coding
Work
2011
-
N.i. Portfolio
Website Work Portfolio & Team Biographies
Layout & Typography, Request Handler & Site Template ((This is an "HTML Version" of their main Flash site - the PHP template uses the same XML data as the Flash site)), XML...
Work
Stylesheet Coding
Template Coding
Information Structuring
Google
2011
-
Visionary Sports Group
Athlete Management
Work
Information Structuring
Template Coding
Stylesheet Coding
Drupal
2011
-
Interactivity
Disciplines
Topics
2011
1
-
Layout & Typography
Disciplines
Topics
2011
2
-
Content Strategy
Storing and retrieving information
Disciplines
Topics
2011
2
-
RosaPharma
Pharmaceutical Development Services Information
Layout, Typography & Navigation, Semantic XHTML, Site Template & Request Handler [custom built with PHP], drop-down navigation...
Stylesheet Coding
Information Structuring
Template Coding
JavaScript
Work
2010
-
Ouroboros
Inspirational Imagery Archive
Work
Information Structuring
Stylesheet Coding
Template Coding
Drupal
Organic Connectivity Module
Graphic Design
2010
-
Business Researchers
Business Strategy Services Information
Layout & Typography, Site Template & Request Handler, Animated Dropdown Menus, Google Maps Embed, Flash Embed
See also: businessresearchers.com...
Work
Stylesheet Coding
Template Coding
JavaScript
2010
-
Drupal
<?php
function HOOK_menu_link( array $variables ){
$element = $variables['element'];
$sub_menu = '';
$name_id = strtolower(strip_tags($element['#title']));
// remove colons and anything past colons...
Frameworks
Topics
Frameworks
2010
33
-
Radiesse
Dermal Product Information for Doctors & Patients
Helped with overall framework
built main XHTML+template
constructed the map section and before and after section
View this Site
radiesse.com
...
Work
Information Structuring
Stylesheet Coding
JavaScript
Template Coding
2010
-
Process
Information Gathering
Initial Concepting
Front-End & User Interface Design
Information Design & Systems Development
Front-end & UI Code
User Experience & Syste...
Topics
Topics
2010
-
FlipVideo
Digital Video Camera Information & Purchasing
...
Work
Stylesheet Coding
JavaScript
JQuery
2010
-
N.i. Extranet
[Internal + Client] Project Planning Platform
clients.native-instinct.com...
Work
Stylesheet Coding
Information Structuring
Template Coding
Drupal
2010
-
Resumé
Curriculum Vitæ
Topics
Topics
2010
-
Disciplines
...
Topics
Topics
Types
2010
3
-
Code
Snippets / Examples
see also: code.orgnsm.org for testable examples...
TTF - Works in most browsers except IE and iPhone
EOT - IE only
WOFF - Compressed, emerging standard
SVG - iPhone/iPad...
w/JavaScript
window.onload = function(){
//create new button
var btn = document.createElement("a");
btn.setAttribute("id", "addedbutton");
var btntxt = document.createTextNode("Run Me");
btn.appendChild(btntxt)...
Adds custom post type called "Reviews"
<?php
function create_post_type(){
register_post_type('review',
array(
'labels'=>array(
'name'=>__('Reviews'),
'singular_name'=>__('Review'...
Topics
Types
Topics
2010
38
-
Graphic Design
Interface Visuals
...
...
Layout & Typography
Topics
2010
21
-
JavaScript
AJaX & Motion
HTML
<div id="photos_rotator">
<ul>
<li>
<a href="/node/15">
<span class="title">003</span>
</a>
<div class="rotator_full"><img src="003_0.jpg" alt="...
Interactivity
Topics
2010
22
-
Stylesheet Coding
Information Presentation
...
Layout & Typography
Topics
2010
46
-
Information Structuring
Nodal Connectivity
...
Content Strategy
Topics
2010
28
-
Template Coding
Information Transmutation
...
<?php
function HOOK_user_insert( &$edit, &$account, $category = NULL ){
// Don't create a new username if one is already set
if( strpos($account->name, 'temporary_') !== 0)
return;
// O...
Content Strategy
Topics
2010
47
-
Amniot
Personal Journal / Progression Log / Public life document site / Homepage
Work
Information Structuring
Template Coding
Stylesheet Coding
Organic Connectivity Module
Graphic Design
2010
-
FlipVideo - Store
Store Updates for Designable Video cameras
Heavy amount of legacy updating
/XHTML for new sections
some ASP template work
...
Work
Stylesheet Coding
2010
-
Organic Planner
Private Notes & Organizational Tools
...
Work
Template Coding
Information Structuring
Stylesheet Coding
Drupal
Organic Connectivity Module
Graphic Design
2010
-
Triple Goddess
Collective / Events Microsite
Work
Information Structuring
Template Coding
Stylesheet Coding
Drupal
Graphic Design
2009
-
LiamShy
musician listenable song portfolio, DJ events and photo gallery
DrupalViews, UI/X Design & Image Slicing...
Work
Information Structuring
Template Coding
Stylesheet Coding
Template Coding
Graphic Design
Drupal
2009