Usage

Include the JS

HTML:


	 						<script src="jquery.flxBar.min.js"></script>

Initialize

JavaScript:


	 						$(function(){

$('#ElementToMove').flxBar($('#targetFrame'), options);

});

Options

Property	Default	Description
initialFrame
minHeight	none	If element's height < minHeight => element is placed inside targetFrame.
minWidth	none	If element's width < minWidth => element is placed inside targetFrame.

Callbacks

Property	Param	Description
fnInit		Occurs directly after initialization of the plugin.
fnChanged		Triggered when position of the element has changed.

Example

Error: cannot find element for replacement!

JavaScript:


	 						$(document).ready(function(){	
$("#testContainer").flxBar($("#movTarget"), {initialFrame: $("#sideBar")});
			
});

HTML:


	 						<div id="frameExample">
<table>
<tr>
<td>
<h3>When you change the width of your browser to an amount smaller than 600px, the sidebar will move!</h3>
</td>
<td id="sideBar">
<div id="testContainer">
<div><div class="inlay">Element1</div></div>
<div><div class="inlay">Element2</div></div>
<div><div class="inlay">Element3</div></div>
</div>
</td>
</tr>
</table>
<div id="movTarget">
<div style="clear: both"></div>
</div>
</div>

CSS

CSS:


	 						#frameExample > table { 
				width: 100%; 
				background-color: #C2ECBC;	
			}

#frameExample h3 { margin: 12px; }
			
#testContainer .inlay {
				padding: 12px;
				
border: 2px solid navy;
				
border-radius: 5px;
				
display: block;
				
background-color: #FFFFA3;
				
margin: 2px;
				
color: navy;
			}
			
#sideBar #testContainer > div {
				float: none;
				display: block;
			}

			@media(min-width: 601px){

#movTarget{ dsplay: none; }

#sideBar { width: 20%; }
			
}


/* showing the target frame will trigger the movement of #testContainer */
@media(max-width: 600px){

#movTarget{ display: block; }
				
#movTarget > #testContainer > div {

float: left;
					
display: inline;
					
width: 33%;
					
margin: 0;
					
padding: 0;
				
}
				
#sideBar { width: 0; }
			
}

Requirements

Requires jQuery 1.7+
flxBar was tested in following browsers:

Firefox 40.0
Opera 34.0
Google Crome 49.0
MS Edge 32.0
MS Internet Explorer 11.0
iOS Safari
Android 4.4.2