ryndel/demo.html

## readme.md

      
    Raw
  

              readme.md
            
          
    jquery.modulize


## demo.html
<!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>

## jquery.modulize.css
#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 }

## jquery.modulize.js
(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 );
	<!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 );