Create bullet list in mindmap selection using js-mindmap - javascript

I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>

Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/

Related

Use the tab bar html/css/js from Material Design

I'm trying to use get this tab bar from Material Components: https://material.io/develop/web/components/tabs/tab-bar/
I'm having trouble following the installation steps. This is what I have so far:
tab.html:
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
<span class="mdc-tab__text-label">Favorites2</span>
<span class="mdc-tab__text-label">Favorites3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
tab.css:
<style lang="scss">
#import "#material/tab-bar/mdc-tab-bar";
#import "#material/tab-scroller/mdc-tab-scroller";
#import "#material/tab-indicator/mdc-tab-indicator";
#import "#material/tab/mdc-tab";
body{
background-color: blue;
}
#app
{
main
{
margin-top:65px;
}
div.mdc-layout-app--main-container{ display: block !important;}
div.mdc-layout-app
{
max-width: 1000px;
background-color: white !important;
margin: 0 auto;
}
header.mdc-top-app-bar
{
max-width: 1000px;
}
}
</style>
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
I want it to look like the demo, but right now it looks like something completely different. I was wondering if someone could break down these steps more for me as I'm extremely confused. Thanks. All help is appreciated.
This is what it looks like: enter image description here
I wanted it to look like this: enter image description here
Are you trying to run SCSS in the browser? If so, this is the problem. The "CSS" portion of your code is actually SCSS, a nested syntax that needs to be compiled down to regular CSS in order for the browser to be able to read it. For example:
SCSS (Browser cannot read)
#app {
main {
margin-top: 65px;
}
}
CSS (Works fine)
#app main {
margin-top: 65px;
}
Material should provide plain CSS version for you, otherwise you will need to use a compiler.
To add on Simran his answer:
I see no <script src="app.js"></script> in your HTML.
You need to compile the code below using babel and include the output file in your HTML.
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
If it is unclear how you do this re-read the Getting started
Step 3: Webpack with ES2015 is about compiling JavaScript using Babel

Cannot get this simple script to run correctly

I am a beginner to JavaScript and jQuery.
My objective is to use the slideToggle() function in jQuery to hide/show <div> sections in HTML(inspired by the answer to [this question](How can I expand and collapse a <div> using javascript?). Cannot get it to work though :(
Here is what I have tried:
1 test.html (in my Desktop directory)
<html>
<title>Test jQuery</title>
<head>
<script charset="UTF-8" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
I have downloaded jquery-1.12.0.min.js, renamed it to jquery.js and it's in the same local directory as test.html (viz. Desktop)
style.css (on the Desktop)
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
I have searched and read answers to the following questions already:
Local jQuery.js file not working
Why jQuery does not work on my home (local) machine?
...but seem to be still doing something basic wrong. Any help would be much appreciated!
First of all, language="JavaScript" should be type="text/javascript"
Second, you need to wrap your code into $(document).ready(....) - note that this is better practice than to simply trust on the order of the html, although you should have the scripts at the bottom of your body
See working snippet below
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</body>
</html>
This is because your script is run before your elements have loaded, thus not having any elements to act upon. Simply move the script under the content, or add a $('document').ready().
$('document').ready():
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$('document').ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
Moving script:
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</body>
</html>
$(".header").click(function() .. fails, because the div with the class 'header' doesn't exist yet when the script is executed.
There are several ways to solve this. One is wrapping everything in a function that is only executed when the DOM is fully loaded, another is moving the script to the end of the page, so it is executed when the div is available.
But my personal favorite is using on to bind events.
Old:
$(".header").click(function() {
New:
$(document).on("click", ".header", function() {
As adeneo already stated in his comment, your JavaScript is at the wrong position in your HTML.
The browser executes the code as soon as he sees it. Now in your example, the code is in the header, but your code tries to work with an element, which will be defined later in the file. Of course this cannot work, as the element does not exist at the time of the execution.
There are two solutions:
Move your code: You can move your JavaScript to the end of the HTML page, just above the closing </body> tag
Use $( document ).ready(): You can give this function a function, that will be called as soon as the document is ready and all HTML elements are parsed and useable for the JavaScript. See this example, taken from the JQuery site
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
Additionally, the use of the language="JavaScript" tag is obsolete and was never really standardized. You should use the type attribute. See this MDN entry.

PHP file upload inside modal window

I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.

Highlight the navigation tab on current page with CSS?

I'm new to html/css stuff so please bear with me.
I have specific images that I want to use as a navigation menu.
My html,css basically look something like this:
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}
When I hover over the image it does get change to highlighted image but when I click on the link the tab goes back to normal image. I want it to stay highlighted when the user is currently on that page. Can anyone help me with this?
I tried "visited" but it doesn't seem to work and everything I found on Google search was a little bit different than what I'm trying to do.
Thanks in advance.
To answer the specific question, when a user clicks a link, they are taken to a new page. The links have no concept in and of themselves as to what page they exist on.
So you have a few options. The common solution is to use server-side code to send HTML with some indicator that that is the current link. You could add a class like 'current' for example. Furthermore, if that is the page you are on, there's no need for the link either, so one should not have that text linked.
But if you don't have access to the server, then you need to add this manually. You could either create a new style for .current and then on that page, apply that class to your active link.
However, perhaps you are including this menu as an include...meaning the code is the same for every single page. In that case, you will want to target the active link with your CSS. So on each page you'd have a custom bit of CSS on the page.
On the tips page, for example, you'd do this:
#tips {put your style here for active links}
To get a bit fancier/more automated, you could write some javascript that would:
parse the URL
figure out the file name of the page
match that filename up to something in your list of links
apply the class for you dynamically
PS. there is no real need to use the syntax of a#tips in your CSS. The reason is that if you are using an id, there can only be one id on the page, so the a is somewhat redundant.
There are many ways to do this. With PHP, JavaScript or pure CSS with some extra markup.
Since you said you are new to HTML/CSS I think the CSS way would be best for you?
So you have 3 pages with exact the same menu code? Just put this on each site:
For your main page:
<div id="navigation">
<a id="main" class="active" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your tips page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your news page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>
Add CSS:
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}
This example works fine for me...
Home Page
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
Second Page
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
A way to highlight the navigation tab on the current page with CSS is to create an active class to append to the class of the tag you are currently on. Your active css class would detail how you want it to look when it's considered active. Then, depending on what tab you are on, you insert the active as class for that tab as seen below.
`
<html>
<head>
<title>Highlight Nav Tab of Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
background-color: purple;
font-size: 12px !important;
line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: purple !important;
background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li class = "active">About</li>
<li >More</li>
<li >Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
`
Image shows what nav highlight looks like

Resizable split screen divs using jquery UI

I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.

Categories

Resources