Html5 Panel

Invoke the prepend method of the jqxPanel. Author: http://jqwidgets.com

by Alexey Sharifullin

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="back">

</div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus urna eget suscipit consequat. Cras luctus lobortis nulla id ultricies. Donec erat sapien, rhoncus tincidunt arcu vitae, tempor volutpat odio. Vivamus id augue et elit mattis aliquam. Proin bibendum sodales justo vel pellentesque. Donec eu odio et lacus euismod molestie dapibus in arcu. Integer quis nunc vel nulla vestibulum iaculis. Duis ullamcorper purus orci, et consectetur augue pretium eu.
 </p>
 <p>
Nam non consequat nulla. Nam nibh sem, tincidunt nec ligula at, egestas porta nunc. Nunc turpis libero, lobortis vitae nibh eget, sagittis sodales nisl. Etiam placerat leo lorem, vitae gravida tortor tincidunt sed. Proin eleifend metus magna, quis lobortis nibh lacinia at. Mauris finibus condimentum neque quis facilisis. Proin scelerisque id turpis vitae tristique. Sed auctor finibus ante, venenatis condimentum purus congue ut. Sed pellentesque ex urna, et cursus mi lacinia sit amet. Quisque rutrum lectus in semper viverra. Integer dignissim ipsum a lobortis posuere. Quisque fringilla metus ut aliquam vestibulum. Cras lobortis vitae purus at consectetur. Duis vitae ultrices orci. Etiam et suscipit nibh, non feugiat augue.
</p>
<p>
Cras commodo interdum felis vel vestibulum. Nunc sollicitudin vitae ex non pretium. Nam in lacus nec odio congue hendrerit. Suspendisse sollicitudin lorem eget nulla malesuada sagittis. Pellentesque vestibulum dui in mi gravida, sit amet ornare lectus aliquet. Vestibulum vulputate mi a...

CSS

#back{
  display: inline-block;
  position: fixed;
  top: -50px;
  left: -50px;
  width: 200%;
  height: 200%;
  overflow: hidden;
  background: #000000;
  
  visibility: visible;
}
#back {
  opacity: 0.2;
  vertical-align: top;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}

JavaScript

$("#jqxPanel").jqxPanel({
     width: 250,
     height: "99%",
     theme: 'energyblue'
 });
var div = $("<div>Custom Content</div>");
$('#jqxPanel').jqxPanel('prepend', div);
var opened = true;
$(".hide-panel").click(function(){
	if(opened) {
  	$('#back').css("visibility", "hidden");
    opened = false;
  } else {
  	opened = true;
  	$('#back').css("visibility", "visible");
    
  }
  
 	$('#jqxPanel').toggle( "slide" , {direction: "right"});
  
});