bit dojo labs : file explorer
Inspecting: home > prototype > project-soddy > index.html (download)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Soddy - Expend your social network</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
var SoddySortableEditor1 = $('SoddySortableEditor1');
var SoddySortableEditor2 = $('SoddySortableEditor2');
//var SoddyEditorInfo = $('SoddyEditorInfo');
Sortable.create(SoddySortableEditor1, {
tag: 'div',
only: 'SoddySortableItem',
containment: ['SoddySortableEditor1','SoddySortableEditor2'],
overlap: 'horizontal',
constraint: false,
dropOnEmpty: true,
onUpdate: function(e) {
//s = Sortable.sequence(SoddySortableEditor1).join(', ');
//SoddyEditorInfo.update(s);
if(Sortable.sequence(SoddySortableEditor1).length==0){
$('SoddySortableEditorEmpty').appear();
} else {
$('SoddySortableEditorEmpty').hide();
dynamicResize();
}
},
onChange: function(e) {
//SoddyEditorInfo.update(e.title);
dynamicResize();
}
});
Sortable.create(SoddySortableEditor2, {
tag: 'div',
only: 'SoddySortableItem',
containment: ['SoddySortableEditor1','SoddySortableEditor2'],
overlap: 'horizontal',
constraint: false,
dropOnEmpty: true,
onUpdate: function(e) {
if(Sortable.sequence(SoddySortableEditor2).length==0){
Effect.Appear('SoddySortableEditor2Empty');
} else {
$('SoddySortableEditor2Empty').hide();
}
},
onChange: function(e) {
//SoddyEditorInfo.update(e.title);
}
});
function dynamicResize(){
newHeight = $('DymanicResizeWatcher').getHeight();
//if(newHeight<100)newHeight=100;
//$('DymanicResizer').morph('height:'+newHeight+'px');
new Effect.Morph('DymanicResizer', {
style:'height:'+newHeight+'px;',
transition: Effect.Transitions.spring
});
}
// initial page effects //////////////////////////////////
$('page-loading').hide();
$('wrapper').show();
dynamicResize();
var icons = $$('div.SoddySortableItem');
icons.each(Element.hide);
Effect.multiple(icons, Effect.Appear);
}); // end of Event.observe
</script>
<style type="text/css">
div.SoddySortableEditor {
margin: 25px 0 0 34px;
}
div.SoddySortableItem {
float:left;
display:block;
width:48px;
height:48px;
margin-left: 22px;
margin-bottom: 22px;
cursor: move;
}
div.SoddySortableEditor,
div.SoddySortableEditor2 {
display: block;
min-height: 20px;
text-align: center;
}
div.SoddySortableEditor2 {
/*padding: 0 35px;*/
}
div.SoddySortableEditor2 div.SoddySortableItem {
/*display: inline;*/
/*float: none;*/
/*margin: 5px;*/
}
#SoddyEditorInfo {
color: #000;
margin-top: -15px;
margin-bottom: 25px;
text-align: center;
font-weight: bold;
}
#SoddySortableEditor2Empty{
color: #000;
}
#DymanicResizer {
/*overflow: hidden;*/
height: 0;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
h4 {
font-weight: bold;
}
#page-loading {
width: 100%;
text-align:center;
margin-top: 350px;
}
#page-loading h2 {
background-color: #000;
display:inline;
padding: 10px 30px;
}
</style>
<!--[if IE 6]>
<style type="text/css">
img, div, ul li a, ul li { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
</head>
<body>
<div id="page-loading"><h2>getting the good stuff...</h2></div>
<div id="wrapper" style="display:none;">
<div id="containerTop">
<div id="header">
<img src="images/face.png" alt="Your face" title="Your Face" class="imgGoRight"/>
<h2>BitDojo</h2>
<em>Lorem ipsum dolor sit amet, consectetur aiscing elit. Fusce ttitor elum ctm. Lorem ipsum dolor sit amet, consectetur aiscing elit. </em>
</div>
<div id="nav">
<ul>
<li><a href="#" class="network marginRight">Network</a></li>
<li><a href="about.html" class="about marginRight">About</a></li>
<li><a href="contact.html" class="contact last">Contact</a></li>
</ul>
</div>
<div id="DymanicResizer"><div id="DymanicResizeWatcher">
<div id="content">
<div id="SoddySortableEditor1" class="SoddySortableEditor">
<div id="SoddySortableEditorEmpty" style="display:none;"><h4>( drag icons here to add )</h4></div>
<div class="SoddySortableItem" id="SoddyItem_Furl" title="Furl"><img src="images/tool_icons/Furl_48x48.png" alt="Furl" title="Furl" /></div>
<div class="SoddySortableItem" id="SoddyItem_Delicious" title="Delicious"><img src="images/tool_icons/delicious_48x48.png" alt="delicious" title="delicious" /></div>
<div class="SoddySortableItem" id="SoddyItem_Digg" title="Digg"><img src="images/tool_icons/digg_48x48.png" alt="digg" title="digg" /></div>
</div>
<div class="cleaner"></div>
</div>
</div></div> <!-- end of #DymanicResizer -->
</div> <!-- end of #containerTop -->
<div id="containerBottom"></div>
<!--<h4 id="SoddyEditorInfo">Drag the icons to add, remove and sort</h4>-->
<div id="SoddySortableEditor2" class="SoddySortableEditor2">
<div id="SoddySortableEditor2Empty" style="display:none;"><h4>( drag icons here to remove )</h4></div>
<div class="SoddySortableItem" id="SoddyItem_Reddit" title="Reddit"><img src="images/tool_icons/Reddit_48x48.png" alt="Reddit" title="Reddit" /></div>
<div class="SoddySortableItem" id="SoddyItem_Magnolia" title="Magnolia"><img src="images/tool_icons/Magnolia_48x48.png" alt="Magnolia" title="Magnolia" /></div>
<div class="SoddySortableItem" id="SoddyItem_Flickr" title="Flickr"><img src="images/tool_icons/Flickr_48x48.png" alt="Flickr" title="Flickr" /></div>
<div class="SoddySortableItem" id="SoddyItem_Stumbleupon" title="Stumbleupon"><img src="images/tool_icons/Stumbleupon_48x48.png" alt="Stumbleupon" title="Stumbleupon" /></div>
<div class="SoddySortableItem" id="SoddyItem_Newsvine" title="Newsvine"><img src="images/tool_icons/Newsvine_48x48.png" alt="Newsvine" title="Newsvine" /></div>
<div class="SoddySortableItem" id="SoddyItem_Twitter" title="Twitter"><img src="images/tool_icons/Twitter-48x48.png" alt="Twitter" title="Twitter" /></div>
<div class="SoddySortableItem" id="SoddyItem_Blinklist" title="Blinklist"><img src="images/tool_icons/Blinklist_48x48.png" alt="Blinklist" title="Blinklist" /></div>
</div>
</div><!-- end of wrapper -->
</body>
</html>