Skip to content

Allow to create a map in a different root HTML element than body #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
saul-mtz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allow to create a map in a different root HTML element than body #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 73 additions & 53 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<!-- Kenneth Kufluk 2008/09/10 -->
<title>js-mindmap demo - JavaScript Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="js-mindmap.css" />
<link href="style.css" type="text/css" rel="stylesheet"/>
<!-- Kenneth Kufluk 2008/09/10 -->
<title>js-mindmap demo - JavaScript Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="js-mindmap.css"/>
<link href="style.css" type="text/css" rel="stylesheet"/>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.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.15/jquery-ui.min.js"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.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.15/jquery-ui.min.js"></script>

<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="raphael-min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="raphael-min.js"></script>

<!-- Mindmap -->
<script type="text/javascript" src="js-mindmap.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="js-mindmap.js"></script>

<!-- Kick everything off -->
<script src="script.js" type="text/javascript"></script>
<!-- Kick everything off -->
<script src="script.js" type="text/javascript"></script>

</head>
<body>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/">Kenneth</a>
<ul>
<li><a href="http://twitter.com/kennethkufluk" target="_blank" class="icon twitter">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/kennethkufluk" target="_blank" class="icon linkedin">LinkedIn</a></li>
<li><a href="http://www.facebook.com/kenneth.kufluk" target="_blank" class="icon facebook">Facebook</a></li>
<li><a href="http://feeds.feedburner.com/KennethKufluk" target="_blank" class="icon rss">RSS Feed</a></li>

<li><a href="http://kenneth.kufluk.com/blog/">Blog categories</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/blog/general/" title="View all posts filed under General">General</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/personal/" title="View all posts filed under Personal">Personal</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/physics/" title="View all posts filed under Physics &amp; Astronomy">Physics &amp; Astronomy</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/projects/" title="View all posts filed under Projects">Projects</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/rant/" title="View all posts filed under Ranting">Ranting</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/work/" title="View all posts filed under Work">Work</a></li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Pages</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/about/" title="About Kenneth">About Kenneth</a></li>
<li><a href="http://kenneth.kufluk.com/blog/work/" title="Employment">Employment</a></li>
<li><a href="http://kenneth.kufluk.com/blog/experiments/" title="Experiments">Experiments</a></li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Friends</a>
<ul>
<li><a href="http://coderonfire.com/" title="Coder on Fire" rel="friend met co-worker colleague neighbor">Andrew Mason</a></li>
<li><a href="http://www.wait-till-i.com" title="Wait till I come!" rel="met">Christian Heilmann</a></li>
<li><a href="http://www.danwebb.net" rel="friend met" title="Godlike JavaScript Guru">Dan Webb</a></li>
<li><a href="http://www.sitedaniel.com" rel="friend met co-worker colleague neighbor" title="Flash Whizz">Daniel Goldsworthy</a></li>
<li><a href="http://dean.edwards.name" rel="friend met" title="Godlike JavaScript Guru">Dean Edwards</a></li>
<li><a href="http://www.dotsonline.co.uk" title="My auntie&#8217;s music shop.">Dot&#8217;s Shop</a></li>
<li><a href="http://simonwillison.net/" title="PHP, Python, CSS, XML and general web development.">Simon Willison</a></li>
</ul>
<div id="container">
<ul>
<li><a href="http://kenneth.kufluk.com/blog/">Kenneth</a>
<ul>
<li><a href="http://twitter.com/kennethkufluk" target="_blank" class="icon twitter">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/kennethkufluk" target="_blank"
class="icon linkedin">LinkedIn</a></li>
<li><a href="http://www.facebook.com/kenneth.kufluk" target="_blank" class="icon facebook">Facebook</a>
</li>
<li><a href="http://feeds.feedburner.com/KennethKufluk" target="_blank" class="icon rss">RSS Feed</a>
</li>

<li><a href="http://kenneth.kufluk.com/blog/">Blog categories</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/blog/general/"
title="View all posts filed under General">General</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/personal/"
title="View all posts filed under Personal">Personal</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/physics/"
title="View all posts filed under Physics &amp; Astronomy">Physics &amp; Astronomy</a>
</li>
<li><a href="http://kenneth.kufluk.com/blog/blog/projects/"
title="View all posts filed under Projects">Projects</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/rant/"
title="View all posts filed under Ranting">Ranting</a></li>
<li><a href="http://kenneth.kufluk.com/blog/blog/work/" title="View all posts filed under Work">Work</a>
</li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Pages</a>
<ul>
<li><a href="http://kenneth.kufluk.com/blog/about/" title="About Kenneth">About Kenneth</a></li>
<li><a href="http://kenneth.kufluk.com/blog/work/" title="Employment">Employment</a></li>
<li><a href="http://kenneth.kufluk.com/blog/experiments/" title="Experiments">Experiments</a>
</li>
</ul>
</li>
<li><a href="http://kenneth.kufluk.com/blog/">Friends</a>
<ul>
<li><a href="http://coderonfire.com/" title="Coder on Fire"
rel="friend met co-worker colleague neighbor">Andrew Mason</a></li>
<li><a href="http://www.wait-till-i.com" title="Wait till I come!" rel="met">Christian
Heilmann</a></li>
<li><a href="http://www.danwebb.net" rel="friend met" title="Godlike JavaScript Guru">Dan
Webb</a></li>
<li><a href="http://www.sitedaniel.com" rel="friend met co-worker colleague neighbor"
title="Flash Whizz">Daniel Goldsworthy</a></li>
<li><a href="http://dean.edwards.name" rel="friend met" title="Godlike JavaScript Guru">Dean
Edwards</a></li>
<li><a href="http://www.dotsonline.co.uk" title="My auntie&#8217;s music shop.">Dot&#8217;s
Shop</a></li>
<li><a href="http://simonwillison.net/"
title="PHP, Python, CSS, XML and general web development.">Simon Willison</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</body>
</html>
5 changes: 3 additions & 2 deletions js-mindmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@

// create the element for display
this.el = $('<a href="' + this.href + '">' + this.name + '</a>').addClass('node');
$('body').prepend(this.el);
$(this.options.selector).prepend(this.el);

if (!parent) {
obj.activeNode = this;
Expand Down Expand Up @@ -483,7 +483,8 @@
updateIterationCount: 20,
showProgressive: true,
centreOffset: 100,
timer: 0
timer: 0,
selector: this.selector
}, options);

var $window = $(window);
Expand Down
10 changes: 5 additions & 5 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// load the mindmap
$(document).ready(function() {
// enable the mindmap in the body
$('body').mindmap();
$('div#container').mindmap();

// add the data to the mindmap
var root = $('body>ul>li').get(0).mynode = $('body').addRootNode($('body>ul>li>a').text(), {
var root = $('div#container>ul>li').get(0).mynode = $('div#container').addRootNode($('div#container>ul>li>a').text(), {
href:'/',
url:'/',
onclick:function(node) {
Expand All @@ -13,13 +13,13 @@ $(document).ready(function() {
});
}
});
$('body>ul>li').hide();
$('div#container>ul>li').hide();
var addLI = function() {
var parentnode = $(this).parents('li').get(0);
if (typeof(parentnode)=='undefined') parentnode=root;
else parentnode=parentnode.mynode;

this.mynode = $('body').addNode(parentnode, $('a:eq(0)',this).text(), {
this.mynode = $('div#container').addNode(parentnode, $('a:eq(0)',this).text(), {
// href:$('a:eq(0)',this).text().toLowerCase(),
href:$('a:eq(0)',this).attr('href'),
onclick:function(node) {
Expand All @@ -34,7 +34,7 @@ $(document).ready(function() {
$(this).hide();
$('>ul>li', this).each(addLI);
};
$('body>ul>li>ul').each(function() {
$('div#container>ul>li>ul').each(function() {
$('>li', this).each(addLI);
});

Expand Down