Skip to content

Instantly share code, notes, and snippets.

@ryndel ryndel/demo.html

Created Jul 17, 2012
Embed
What would you like to do?
jquery modulize

jquery.modulize

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Modulize</title>
<link rel="stylesheet" href="jquery.modulize.css">
<style>
* {
margin: 0;
padding: 0;
}
body, html {
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
overflow:hidden;
}
</style>
</head>
<body>
<div id="main">
<!-- start sidebar -->
<section class="sidebar fl">
<!-- mod -->
<article>
<h2>Module 1</h2>
</article>
<!-- mod -->
<article>
<h2>Module 2</h2>
</article>
<!-- mod -->
<article>
<h2>Module 3</h2>
</article>
</section>
<!-- end sidebar -->
<!-- start main-content -->
<section id="main-content"></section>
<!-- end main-content -->
<!-- start sidebar -->
<section class="sidebar fr">
<!-- mod -->
<article>
<h2>Module 1</h2>
<p>Lorem ipsum dolor sit amet</p>
</article>
<!-- mod -->
<ul>
<li>
<h2>Module 2</h2>
<p>I'm in a list</p>
</li>
</ul>
<!-- mod -->
<div>
<h2>Module 3</h2>
<p>I'm a div</p>
<div style="background-color:#f00">I'm a div inside</div>
</div>
</section>
<!-- end sidebar -->
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.modulize.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sidebar").modulize();
});
</script>
</body>
</html>
#main {
width:100%;
height:100%;
padding-bottom:20px;
background-color:#f1f1f1;
overflow-y: scroll;
}
.sidebar {
position:relative;
width:20%;
height:100%;
}
.sidebar article {
padding:15px;
}
.sidebar > * {
padding:15px;
}
.sidebar ul {
list-style:none;
}
#main-content {
float:left;
width:60%;
background-color:#999;
height:100%;
}
.sidebar-control {
height:100%;
width:9px;
position:absolute;
padding:0;
}
.sidebar-control.left {
}
.sidebar-control.right {
left:0;
}
.sidebar-control {
position:absolute;
right:0;
}
.sidebar-control:hover {
background:#999;
}
.sidebar-control a {
position:relative;
margin:5px auto;
display:block;
}
.arrow-right-5 {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
}
.arrow-left-5 {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #ccc;
}
.fl { float:left }
.fr { float:right }
(function( $ ) {
$.fn.modulize = function(options) {
var settings = $.extend( {
'exclude' : false,
}, options);
return this.each(function() {
var $this = $(this);
$this.each(function () {
var modules = $(this).children();
if(settings.exclude) modules = modules.not(settings.exclude);
var numModules = (modules.length);
var moduleHeight = 100 / numModules - 3;
$(modules).css({'height' : '' + moduleHeight + '%'});
// increase height of module on hover and decrease others
$(modules).hover(function () {
$(this).css({'height' : (100 - numModules *10)+'%'}).siblings().not(settings.exclude).css({'height' : '10%'});
},
function () {
$(modules).css({'height' : moduleHeight + "%"});
});
});
});
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.