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><a href="http://jeffbarcay.com/">ALS</a> <ul> <li><a href="#" target="_blank" class="alert" style="background:green !important;">Chest Pain</a></li> <li><a href="#" target="_blank" class="icon linkedin" color="blue">Shortness of Breath</a></li> <li><a href="#" target="_blank" class="icon facebook">Allergic Reaction</a></li> <li><a href="http://www.google.com" target="_blank" class="icon twitter" title="goo">Diabetic</a></li> <li><a href="#">STEMI</a> <ul> <li><a href="#" target="_blank" class="icon twitter" title="9">ACS</a></li> <li><a href="#" target="_blank" class="closebtn" title="13">STEMI</a> <ul> <li><a href="#" title="A">Treatment</a></li> <li><a href="#" title="C">Protocol</a></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> 1 Answers
Answers 1
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.
0 comments:
Post a Comment