GLayout - hide
How do I make an glayout - hide?
What is a glayout - hide? How do you make a glayout - hide? This script and codes were developed by Alexandru Puiu on 27 November 2022, Sunday.
GLayout - hide - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GLayout - hide</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//golden-layout.com/files/latest/js/goldenlayout.js"></script>
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
<input type="button" value="HidePlaylistLib" onClick="doHide();"/>
<input type="button" value="ShowPlaylistLib" onClick="doShow();"/>
<input type="button" value="HidePlaylistEditor" onClick="doHide2();"/>
<input type="button" value="ShowPlaylistEditor" onClick="doShow2();"/>
<div id="wrapper"> <ul id="menuContainer"></ul> <div id="layoutContainer"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
GLayout - hide - Script Codes CSS Codes
h2{ font: 14px Arial, sans-serif; color:#fff; padding: 10px; text-align: center;
}
html, body{ height: 100%;
}
*{ margin: 0; padding: 0; list-style-type:none;
}
#wrapper{ height: 100%; position: relative; width: 100%; overflow: hidden;
}
#menuContainer{ width: 20%; height: 100%; position:absolute; top: 0; left: 0; background: #222;
}
#menuContainer li{ border-bottom: 1px solid #000; border-top: 1px solid #333; cursor: pointer; padding: 10px 5px; color: #BBB; background: #1a1a1a; font: 12px Arial, sans-serif;
}
#menuContainer li:hover{ background: #111; color: #CCC;
}
#layoutContainer{ width: 80%; height: 100%; position:absolute; top: 0; left: 20%; box-shadow: -3px 0px 9px 0px rgba( 0, 0, 0, 0.4 );
}
GLayout - hide - Script Codes JS Codes
var newItem = { type: 'component', componentName: 'template', id: 'playlistLibrary', componentState: { text: 'templates/mvision/playlistLibrary.html' }, width: 50 };
var config = { settings: { hasHeaders: true, selectionEnabled: true, selectionEnabled: true, showPopoutIcon: false, showMaximiseIcon: false, showCloseIcon: false }, dimensions: {headerHeight: 0, dragProxyWidth: 300, dragProxyHeight:200}, content: [{ type: 'column', content: [{ type: 'row', content: [{ type: 'column', width: 70, id: 'tag_playlist_container_up', content: [{ type: 'row', id: 'tag_playlist_container', content: [{ type: 'component', id: 'tagLibrary', componentName: 'template', width: 50, height:30, componentState: { text: 'templates/mvision/tagLibrary.html' } }, { type: 'component', componentName: 'template', id: 'playlistLibrary', componentState: { text: 'templates/mvision/playlistLibrary.html' }, width: 50 }] },{ type: 'row', content: [{ type: 'component', componentName: 'template', id: 'mediaLibrary', componentState: { text: 'templates/mvision/mediaLibrary.html' }, width: 60 }, { type: 'component', componentName: 'template', id: 'playlistEditor', componentState: { text: 'templates/mvision/playlistEditor.html' }, width: 40 }] }] }, { type: 'row', content: [{ type: 'component', componentName: 'template', id: 'mediaProperties', componentState: { text: 'templates/mvision/mediaProperties.html' } }] }] }, { type: 'row', height: 20, content: [{ type: 'component', componentName: 'template', id: 'channelLibrary', componentState: { text: 'templates/mvision/channelLibrary.html' }, width: 20 }, { type: 'component', componentName: 'template', id: 'channelEditor', componentState: { text: 'templates/mvision/channelEditor.html' }, width: 80 }] }] }] };
var myLayout = new window.GoldenLayout( config, $('#layoutContainer') );
myLayout.registerComponent( 'template', function( container, state ){ container.getElement().html( '<h2>' + state.text + '</h2>');
});
myLayout.init();
var addMenuItem = function( title, text ) { var element = $( '<li>' + text + '</li>' ); $( '#menuContainer' ).append( element ); var newItemConfig = { title: title, type: 'component', componentName: 'template', componentState: { text: text } }; element.click(function(){ myLayout.root.contentItems[0].addChild( newItemConfig, 1 ); });
};
addMenuItem( 'Add me!', 'You\'ve added me!' );
addMenuItem( 'Me too!', 'You\'ve added me too!' );
var tag;
var p;
function doHide() { var tmp = myLayout.root.getItemsById('playlistLibrary')[0]; //var selected = tmp.select(); tmp.container.hide(); tmp.setSize(0,0); tmp.container.setSize(0,0); tag = tmp;
}
function doShow() { var x = 2;
var tmp = myLayout.root.getItemsById('playlistLibrary')[0]; tag.container.show(); tag.container.setSize(443,143);
}
Developer | Alexandru Puiu |
Username | apuiu |
Uploaded | November 27, 2022 |
Rating | 3 |
Size | 3,103 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
GLayout1 | 3,018 Kb |
Move array elements | 1,768 Kb |
RxJs observable array | 1,565 Kb |
Move array elements2 | 2,016 Kb |
A Pen by Alexandru Puiu | 1,505 Kb |
GLayout | 3,064 Kb |
Parse date | 1,480 Kb |
Calculate fday of week | 1,403 Kb |
Phosphor | 66,943 Kb |
Dynamic NgBind | 1,848 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
To Do List with Delete | Mattlbrody | 2,068 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Out of the blue | Giaco | 2,537 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!