Items | Organic Interfaces

Attribute Type:

Types

Connection:

Template Coding

Weight:

100

Attribute Type:

Topics

Connection:

Drupal

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

Submitted by orgnsm on Thu, 11/21/2013 - 10:43
Context:

Connection:
Code
Attribute Type:
Types

Connection:
Template Coding
Weight:
100
Attribute Type:
Topics

Connection:
Drupal
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

Submitted by orgnsm on Thu, 09/19/2013 - 12:05

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

Submitted by orgnsm on Fri, 09/13/2013 - 18:33

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

Submitted by orgnsm on Wed, 09/11/2013 - 12:54

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

Submitted by orgnsm on Mon, 09/09/2013 - 10:36

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

Submitted by orgnsm on Mon, 09/09/2013 - 10:09

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

Submitted by orgnsm on Tue, 08/27/2013 - 14:13

Context:

Connection:

Attribute Type:

Types

Connection:

Template Coding

Weight:

100

Attribute Type:

Topics

Connection:

PHP

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

Submitted by orgnsm on Tue, 08/27/2013 - 14:03

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

Submitted by orgnsm on Tue, 08/27/2013 - 13:35

Context:

Connection:

Attribute Type:

Types

Connection:

Weight:

100

Attribute Type:

Topics

Connection:

PHP

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

Submitted by orgnsm on Sun, 08/25/2013 - 19:36

Context:

Connection:

Attribute Type:

Types

Connection:

Template Coding

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

Submitted by orgnsm on Tue, 02/05/2013 - 23:06

Subtitle:
Italian Preschool Information
Context:

Connection:
Stylesheet Coding
Weight:
100
Attribute Type:
Topics

Connection:
Information Structuring
Weight:
100
Attribute Type:
Topics

Connection:
Template Coding
Weight:
100
Attribute Type:
Topics

Connection:
JavaScript
Weight:
100
Attribute Type:
Topics

Connection:
Work
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

Submitted by orgnsm on Mon, 01/28/2013 - 11:32

Subtitle:
Artwork Project Archive
Context:

Connection:
Work
Attribute Type:
Types

Connection:
Stylesheet Coding
Weight:
100
Attribute Type:
Topics

Connection:
Information Structuring
Weight:
100
Attribute Type:
Topics

Connection:
Graphic Design
Weight:
100
Attribute Type:
Topics

Connection:
Template Coding
Weight:
100
Attribute Type:
Topics

Connection:
JavaScript
Weight:
45
Attribute Type:
Topics

Connection:
Drupal
Weight:
100
Attribute Type:
Topics

Connection:
Organic Connectivity Module
Weight:
100
Attribute Type:
Topics

Installation URL:
http://incubator.orgnsm.org
Images:
Typography & Layout, Content Structuring, UI/X Design, Interactivity & Sorting
Jellyfish Frequency

Submitted by orgnsm on Sat, 12/29/2012 - 18:56

Subtitle:
Record Label Website
Context:

Connection:
Work
Attribute Type:
Types

Connection:
Template Coding
Weight:
100
Attribute Type:
Topics

Connection:
Information Structuring
Weight:
100
Attribute Type:
Topics

Connection:
Stylesheet Coding
Weight:
100
Attribute Type:
Topics

Connection:
Drupal
Weight:
100
Attribute Type:
Topics

Installation URL:
http://jellyfishfrequency.com
Images:
Attributes

Submitted by orgnsm on Wed, 04/25/2012 - 20:52

Context:

Connection:
Types
Attribute Type:
Types

Page Layout Method

Submitted by orgnsm on Wed, 04/25/2012 - 00:48

Context:

Connection:

Attribute Type:

Types

Connection:

Information Structuring

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

Submitted by orgnsm on Wed, 04/25/2012 - 00:20

Context:

Connection:

Weight:

100

Attribute Type:

Topics

Connection: