Edit

Nodes

Items

86

Per Page

/ 5

Subject Attribute

  • Insert email as username at registration

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    <?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;
    
        // Otherwise, replace username with email address field
        db_update("users")
            ->fields(array("name" => $edit["mail"]))
            ->condition("uid", $account->uid)
            ->execute();
    
        $edit["name"] = $edit["mail"];
        $account->name = $edit["mail"];
        return;
    }
    
    
    function HOOK_user_register_form_alter( &$form, &$form_state, $form_id ){
    
        $form["account"]["name"]["#value"] = "temporary_".user_password();
        $form["account"]["name"]["#access"] = FALSE;
    
    }?>
  • Login redirect

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    <?php
    
    function HOOK_user_login_submit( $form, &$form_state ){
        $form_state["redirect"] = "";
    }
    
    function HOOK_form_user_login_alter( &$form, $form_state ){
        $form["#submit"][] = "HOOK_user_login_submit";
    }
    
    ?>
  • Make Drupal Module Most Important

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    So other modules don't supersede your module, run this code once.
    <?php
    db_query("UPDATE {system} SET weight = 100 WHERE name = 'MODULE_NAME'");
    ?>
  • Image Desaturation Effect

    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    .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-transform: translateZ(0);
    }
    .box img:hover{
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
      <filter id=\'grayscale\'>
       <feColorMatrix type=\'saturate\' values=\'1\'/>
      </filter>
     </svg>#grayscale");
     -webkit-filter: grayscale(0%);
    }
  • Slideshow

    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics

    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="title">002</span>
       </a>
       <div class="rotator_full"><img src="002_0.jpg" alt=""/></div>
      </li>
      <li>
       <a href="/node/13">
        <span class="title">001</span>
       </a>
       <div class="rotator_full"><img src="001_0.jpg" alt=""/></div>
      </li>
     </ul>
    </div>

    JavaScript

    jQuery(function($){
    
    
    
    
        function processSlideshow( nextElem ){
            currentElem = $("#photos_rotator ul li.selected");
            if( !nextElem ){
                currentElemIndex = $("#photos_rotator ul li").index(currentElem);
                nextElem = $('#photos_rotator ul li').get(currentElemIndex+1);
                if( !nextElem ) nextElem = $("#photos_rotator ul li").get(0);
            }
            //fade out
            $(currentElem).removeClass("selected");
            $(currentElem).find(".rotator_full").css("left","-600px");
            setTimeout(function(){
                $(currentElem).find(".rotator_full").css("z-index","-2");
                $(currentElem).find(".rotator_full").css("left","600px");
            }, 700);
            //fade in
            $(nextElem).addClass("selected");
            $(nextElem).find(".rotator_full").css("z-index","-1");
            $(nextElem).find(".rotator_full").css("left","0");
        }
    
        if( $("#photos_rotator").length ){
            processSlideshow( $("#photos_rotator ul li").get(0) );
            setInterval(function(){ processSlideshow(); }, 6000);
            $("#photos_rotator ul li a").click(function(){
                processSlideshow( $(this).parent() );
                return false;
            });
        }
    
    
    
    
    });

    CSS

    #photos_rotator{
        position: relative;
        width: 600px;
        height: 400px;
        margin: 15px auto 0 auto;
        z-index: 0;
        overflow: hidden;
    }
    #photos_rotator ul{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 300px;
    	padding: 370px 0 0 25px;
    }
    #photos_rotator ul:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    #photos_rotator ul li{
        float: left;
        width: 30px;
        height: 30px;
    }
    #photos_rotator ul li a{
        display: block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
    }
    #photos_rotator ul li.selected a{
        background-color: #2bd06a;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    #photos_rotator ul li .rotator_full{
        z-index: -1;
        position: absolute;
        top: 0;
        left: 600px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
  • Webcam Image Refresher

    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types

    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;
    	setTimeout('refreshCam("webcamImage","'+file+'")',10000);
    }
    
    window.onload = function(){
    
        if( document.getElementById("webcamImage") )
            refreshCam( "webcamImage","http://orgnsm.org/webcam.jpg" );
    
    }
  • AJAX Remote Read, Local Write

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics

    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('Content-Type', 'application/json;');
     xhr.setRequestHeader('Accept', 'application/json;');
    
     // send the collected data as JSON
     xhr.send(JSON.stringify({"status_id":"1"}));
    
     xhr.onloadend = function () { alert("Wrote test data"); };
    
    }
    
    
    
    window.onload = function(){
    
    
     //add event to a button that loads remote JSONp
    
     document.getElementById('loaderButton').onclick = function(){
      var script = document.createElement('script');
      script.src = 'http://shellfiche.anoml.net/test.php5?callback=test_results_loaded';
      document.getElementsByTagName('head')[0].appendChild(script);
     }
    
    
    }

    w/JQuery

    $(document).ready(function(){
    
    
     $("#loaderButton").click(function(){
    
      $.ajax({
       url: 'http://shellfiche.anoml.net/test.php5',
       dataType: "jsonp",
       jsonpCallback: "callback",
       success: function( testreply ){
        alert("Test results obtained.. Posting results...");
    
        $.ajax({
         url: 'https://orgnsm.testrail.com//index.php?/api/v2/add_result/1',
         username: "orgnsm@orgnsm.org",
         password: "lkAGWUE01H",
         contentType: "application/json;",
         accepts: "application/json;",
         dataType: "json",
         type: "POST",
         data: '{"status_id": "1"}',
         processData: "false",
         headers:{"Content-Type": "application/json;"},
         beforeSend: function(jqXHR){
          jqXHR.overrideMimeType("application/json;");
          jqXHR.setRequestHeader("Accept", "application/json;");
         },
         success: function( postreply ){
          alert("Wrote test data");
         }
        });
    
       }
      });
    
      return false;
    
     });
    
    
    });
  • DOM Inject and Add Event

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics

    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 new button
     document.getElementById('addedbutton').onclick = function(){
      alert("Success");
     }
    
    }

    w/JQuery

    $(document).ready(function(){
    
     var test = $("<a href='#'>Run Me</a>").click(function(){
      alert("Success");
      return false;
     });
    
     $("body").append(test);
    
    });
  • Pagination Logic

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Installation URL: 
    http://stage.orgnsm.org/code/pagination.php
    <?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 numb of pages
    $pages = ceil(count($items) / $perpage);
    
    # which page are we on?
    if( isset($_GET["page"]) && round($_GET["page"]) <= $pages && round($_GET["page"]) > 0 )
    	$page = round($_GET["page"]);
    else $page = 1;
    
    # calc start and end item
    $startItem = (($page - 1) * $perpage);
    $endItem = $startItem + ($perpage - 1);
    if( $endItem > $items ) $endItem = $endItem - ($endItem % $items);
    
    
    
    
    
    ######## PRINT ITEMS #########
    
    echo( "<div>\n" );
    echo( " <ul>\n");
    
    for( $i=$startItem; $i<=$endItem; $i++ ){
    
    	echo( "  <li>\n");
    	echo( "   <a href=\"/node/".$items[$i][2]."\">\n");
    	echo( "    <span class=\"title\">" . $items[$i][0] . "</span>\n" );
    	echo( "   </a>\n" );
    	echo( "  </li>\n" );
    }
    
    echo( " </ul>\n" );
    echo( "</div>\n\n" );
    
    
    
    # print page links as: URL/?page=##
    
    echo("<ul class=\"pagination\">\n");
    
    if( $page > 1 )
    	echo(" <li>");
    	echo("  <a href=\"?page=".($page-1)."&perpage=".$perpage."\" class=\"previous\">Previous</a>");
    	echo(" </li>\n");
    
    for ($i=1; $i<=$pages; $i++) {
    	if ($i == $page) {
    		echo(" <li>");
    		echo("  <a href=\"?page=".$i."&perpage=".$perpage."\" class=\"active\">".$i."</a>");
    		echo(" </li>\n");
    	} else {
    		echo(" <li>");
    		echo("  <a href=\"?page=".$i."&perpage=".$perpage."\">".$i."</a>");
    		echo(" </li>\n");
    	}
    }
    
    if( $page < $pages )
    	echo(" <li><a href=\"?page=".($page+1)."\" class=\"next\">Next</a></li>\n");
    
    echo("</ul>\n\n");
    
    
    ?>
  • Device-Responsive Layout

    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    Installation URL: 
    http://code.orgnsm.org/viewport.html

    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 a svg{
            width: 60px;
            height: 60px;
        }
    }
    @media (min-width: 768px) and (max-width: 979px){
        #container{
            padding: 0 35px;
        }
        nav ul li a{
            font-size: 120%;
            padding: 20px 0;
            border-radius: 40px;
        }
        nav ul li a svg{
            width: 80px;
            height: 80px;
        }
    }
    @media (max-width: 979px){
    }
    @media (min-width: 980px){
        /* default rules */
    }
    @media (min-width: 1200px){
        #container{
            padding: 0 75px;
        }
        nav ul li a{
            font-size: 170%;
            padding: 30px 0;
            border-radius: 60px;
        }
        nav ul li a svg{
            width: 133px;
            height: 133px;
        }
    }
  • Dynamic Form Submission

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Installation URL: 
    http://stage.orgnsm.org/code/form.html

    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
            $.ajax({
                type: "POST",
                url: $("#contact").attr('action'),
                data: values,
                success: function(re){
                    $("#contact").html(re);
                }
            });
            return false;
        });
    
    });

    PHP

    <?php
    if( $_SERVER["REQUEST_METHOD"] == "POST" ){
        $to = "orgnsm@orgnsm.org";
        $subject = "Contact through website";
        $message = "Message: ".$_POST["message"]."\r\rFrom: ".$_POST["nombre"]."\r\rEmail: ".$_POST["email"];
        $from = $_POST["email"];
        $headers = "From:" . $from;
        mail($to,$subject,$message,$headers);
        echo( "<p>Your message has been sent. Thank you</p>\n" );
    }
    ?>

    HTML

    <form action="/sites/all/themes/visionarysports/contact.php" method="POST" id="contact">
     <div><input type="text" name="nombre" id="nombre" placeholder="Your Name"/></div>
     <div><input type="email" name="email" id="email" placeholder="Your E-mail"/></div>
     <div><textarea name="message" id="message" placeholder="Your Message"></textarea></div>
     <div><input type="submit" value="Send"/></div>
    </form>
  • Read and Process RSS

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    <?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->loadXML( $tumblr_raw );
    
    		//echo( "<pre>".$tumblr_xml->saveHTML()."</pre>" );
    
    		if( $tumblr_xml->getElementsByTagName("item") instanceof DOMNodeList &&
    			$tumblr_xml->getElementsByTagName("item")->item(0) instanceof DOMElement &&
    			$tumblr_xml->getElementsByTagName("item")->item(0)->hasChildNodes() ){
    
    			foreach( $tumblr_xml->getElementsByTagName("item") as $tweet ){
    				foreach( $tweet->childNodes as $deetz ){
    					if( $deetz->nodeType == 1 && $deetz->nodeName == "title" )
    						$tweet_title = $deetz->textContent;
    					elseif( $deetz->nodeType == 1 && $deetz->nodeName == "pubDate" )
    						$tweet_date = $deetz->textContent;
    					elseif( $deetz->nodeType == 1 && $deetz->nodeName == "guid" )
    						$tweet_url = $deetz->textContent;
    					elseif( $deetz->nodeType == 1 && $deetz->nodeName == "description" )
    						$tumbl_img = $deetz->textContent;
    				}
    				$tweetz[] = Array( "title" => $tweet_title,
    				                   "date" => $tweet_date,
    				                   "url" => $tweet_url,
    				                   "img" => $tumbl_img );
    			}
    
    
    		}
    		else return "Tumblr is broken";
    	}
    	else return "Tumblr is broken";
    
    	return $tweetz;
    
    }
    
    
    
    if( $tumblr = getRSS("http://ominousss.tumblr.com/rss") ){
    
    	echo( "<section id=\"recent-tumbls\">\n" );
    	echo( "<div><ul>\n" );
    	//echo("<pre>\n");print_r( $tumblr );echo("</pre>\n");
    
    	for( $i=0; $i < 9; $i++ ){
    		if( isset($tumblr[$i]) ){
    			echo( "<li>\n" );
    			echo( "<a href=\"".$tumblr[$i]["url"]."\" rel=\"external\">\n" );
    			echo( "<span class=\"tumblr_title\">".$tumblr[$i]["title"]."</span>\n" );
    			echo( "<span class=\"tumblr_date\">\n" );
    			echo( substr($tumblr[$i]["date"],0,strlen($tumblr[$i]["date"])-6) );
    			echo( "</span>\n" );
    			echo( "<span class=\"imgry\">" . $tumblr[$i]["img"] . "</span>\n" );
    			echo( "</a>\n" );
    			echo( "</li>\n" );
    		}
    	}
    
    	echo( "</ul></div>\n" );
    	echo( "<a href=\"http://ominousss.tumblr.com\" rel=\"external\" title=\"Tumblr page\">Tumblr</a>\n" );
    	echo( "</section>\n\n" );
    
    }
    ?>
  • La Picolla Scolla Italia

    Subtitle: 
    Italian Preschool Information
    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    Installation URL: 
    http://stage.orgnsm.org/lpsi/
    Images: 
    Layout & Typography, Semantic XHTML content structuring, Site Template & Request Handler, Flash & GoogleMaps Embedding
  • Incubator

    Subtitle: 
    Artwork Project Archive
    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    45
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Weight: 
    100
    Attribute Type: 
    Topics
    Installation URL: 
    http://incubator.orgnsm.org
    Images: 

    Typography & Layout, Content Structuring, UI/X Design, Interactivity & Sorting

  • Jellyfish Frequency

    Subtitle: 
    Record Label Website
    Context: 
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Installation URL: 
    http://jellyfishfrequency.com
    Images: 
  • Attributes

    Context: 
    Connection: 
    Attribute Type: 
    Types
  • Page Layout Method

    Context: 
    Connection: 
    Attribute Type: 
    Types
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Installation URL: 
    http://code.orgnsm.org/layout_example.html
    Images: 

    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 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                </div>
                <div id="content2" class="column">
                    <p>This page utilizes positioning, <strong>not floating</strong>, to create a fluid layout. Adding more dimensionality to the page flow while at the same time giving the CSS attribute <em>'float'</em> back some lost meaning when overly used for page layout <em>positioning</em>.</p>
                    <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 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                    <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 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                    <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 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                </div>
                <div id="content3" 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 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                </div>
            </div>
            <div id="footer">
                <div>Lorem ipsum</div>
            </div>

    CSS

    #hub{
        position: relative;
    }
    #content1{
        position: absolute;
        border-right: 1px solid #ccc;
        right: 85%;
        background-color: #eee;
        color: #000;
    }
    #content3{
        position: absolute;
        border-left: 1px solid #ccc;
        left: 67%;
        background-color: #eee;
        color: #000;
    }
    #content2{
        position: absolute;
        left: 15%;
        right: 33%;
    }
    
    .column{
        padding: 10px 10px 50px 10px;
        /* padding-bottom here should be approximate height of footer */
    }
    
    #footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px dashed #999;
        background-color: #fff;
        color: #000;
    }
    #footer > div{
        padding: 10px;
    }
  • Stylesheet Switcher

    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types

    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/spaecial/style.css" title="spaecial"/>
            <link rel="alternate stylesheet" type="text/css" href="/theme/touchpanel/style.css" title="touchpanel"/>
            <link rel="stylesheet" type="text/css" href="/theme/blawk/style.css" title="blawk"/>

    Style Switch Links HTML

            <div id="style_chooser">
                <a href="#" onclick="setActiveStyleSheet('KATALOG');this.blur();return false;">KATALOG</a>
                <a href="#" onclick="setActiveStyleSheet('SCREEN');this.blur();return false;">SCREEN</a>
                <a href="#" onclick="setActiveStyleSheet('touchpanel');this.blur();return false;">(touchpanel)</a>
                <a href="#" onclick="setActiveStyleSheet('spaecial');this.blur();return false;">spæcial</a>
                <a href="#" onclick="setActiveStyleSheet('blawk');this.blur();return false;">blawk</a>
            </div>

    JavaScript functions

    function setActiveStyleSheet(title) {
    	var i, a;
    	for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    		if (a.getAttribute("rel")
    		    && a.getAttribute("rel").indexOf("style") != -1
    		    && a.getAttribute("title")) {
    			a.disabled = true;
    			document.getElementById( "style_choice_"+a.getAttribute("title") ).className = "";
    			if (a.getAttribute("title") == title){
    				a.disabled = false;
    				document.getElementById( "style_choice_"+title ).className = "selected";
    			}
    		}
    	}
    }
    
    function getActiveStyleSheet() {
    	var i, a;
    	for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    		if (a.getAttribute("rel")
    		    && a.getAttribute("rel").indexOf("style") != -1
    		    && a.getAttribute("title")
    		    && !a.disabled) {
    			return a.getAttribute("title");
    		}
    	}
    	return null;
    }
    
    function getPreferredStyleSheet(){
    	var i, a;
    	for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    		if( a.getAttribute("rel")
    		    && a.getAttribute("rel").indexOf("style") != -1
    		    && a.getAttribute("rel").indexOf("alt") == -1
    		    && a.getAttribute("title") ){
    			return a.getAttribute("title");
    		}
    	}
    	return null;
    }
    
    function createCookie(name, value, days) {
    	if (days) {
    		var date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		var expires = "expires="+date.toGMTString();
    	}
    	else expires = "";
    	document.cookie = name+"="+value+"; "+expires+"; "+"path=/";
    }
    
    function readCookie(name) {
    	var nameEQ = name + "=";
    	if( typeof document.cookie != "undefined" ){
    		var ca = document.cookie.split(';');
    		for(var i=0;i < ca.length;i++) {
    			var c = ca[i];
    			while( c.charAt(0)==' ' ) c = c.substring(1,c.length);
    			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    		}
    	}
    	return null;
    }

    JavaScript load/unload event

    window.onload = function(e){
    
        var cookie = readCookie("style");
        var title = cookie ? cookie : getPreferredStyleSheet();
        if( cookie == null || cookie == "null" ) var title = getPreferredStyleSheet();
        else{ var title = cookie;/ *alert("received style through cookie: "+title);* / }
        setActiveStyleSheet(title);
    
    }
    window.onunload = function(e){
    
        var title = getActiveStyleSheet();
        createCookie("style", title, 30);
    
    }
  • BossaNova Robotics

    Subtitle: 
    Robot Toy Product Promotion
    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    Installation URL: 
    http://stage.orgnsm.org/bossanova
    Images: 
    Process Imagery: 
    Site Request Handler, Framework for loading XML content from Flash nav click. Flash, GoogleMaps and YouTube Embedding.
  • TiedyeJohn

    Subtitle: 
    Tiedye Artist Examples and Ordering
    Context: 
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Attribute Type: 
    Types
    Connection: 
    Weight: 
    100
    Attribute Type: 
    Topics
    Connection: 
    Weight: 
    5
    Attribute Type: 
    Topics
    Installation URL: 
    http://tiedyehobo.anoml.net
    Images: