KevinGuyer.com - Stranded on Midgard

Entries in JavaScript (3)

Wednesday

Mar252015

Creating a Dynamic Table of Contents for PHPKB

Wednesday, March 25, 2015 at 3:13PM

We use phpkb at work for an internal knowledge base and overall I'm pretty happy with it, it does pretty much everything that I wanted in a KB except for one or two things. One of those was to allow for a dynamic table of contents based on use of heading tags in your article, something that most wiki software does out of the box, as does MS Word, which is where much of the content we are migrating into phpkb lived before.

So I wrote a little bit of JavaScript to enable a dymanic TOC myself. It is easy to implement if you are using phpkb, here is how it looks and how to turn this on for article pages.

The TOC is inserted at the top of your article and indented based on heading use

You can cheat and just get the jscript file and my modded article.php in this zipped copy.

Step 1 - Modify article.php (back it up first..)
Paste these lines in that page right before the '$include_files' insertion.

<script type=\"text/javascript\" src=\"$path_kb/thesaurus/js/jquery1-7-1.js\"></script>
<script type=\"text/javascript\" src=\"$path_kb/include/toc.js\"></script>

Step 2 - Create a custom field called 'Show TOC' and make it a non-required checkbox with Yes,No options.

Step 3 - Drop the toc.js file into the include folder for your installation. Here is the source for that file so you can see what is going on.

$(document).ready(function(){
	$('.customfields').find('li').each(function(i) {  // Looks at custom fields on page to see if enabled
		var current = $(this);
		if(current.text() == 'Show TOC: Yes') {  // Enabled, show table of contents		
			$("#ARTICLECONTENT").prepend('<div id="toc"><b>Table of Contents</b></div>');
			$("#toc").css('border','1px solid #eccf59');
			$("#toc").css('background','#f1eddf');
			$("#toc").css('margin','5px 0 0 0');
			$("#toc").css('padding','5px 5px 15px 5px');
			$("#toc").append("<ul>");
			var iToc = 0; // to track if we find any headings
			$('article').children("h1, h2, h3, h4, h5").each(function(i) {
				iToc ++;
				var current = $(this);
				current.attr("id", "title" + i);
				var sp = '';
				switch(current.prop("tagName")){
					case 'H1': sp = '10px'; break;
					case 'H2': sp = '20px'; break;
					case 'H3': sp = '30px'; break;
					case 'H4': sp = '40px'; break;
					case 'H5': sp = '50px'; break;				
				}
				if(current.html().trim()){
					$("#toc").append("<li style='padding-left:" + sp + ";'><a id='link" + i + 
						"' href='#title" + i + "' title='" + current.attr("tagName") + 
						"'>" + current.html() + "</a></li>");
				}
			});	
			$("#toc").append("</ul>");
			if(iToc == 0) { $("#toc").hide(); } // if no content for TOC we just hide it			
		}
	});
});

As you can see, with some very little changes you can repurpose this for other applications that use the same 'H tag' heading hierarchy that you commonly run into.

Kevin |

2 Comments |

tagged

JavaScript,

PHP in

Code,

JavaScript

Friday

Nov162012

Easy Scroll-Aware Hovering HTML Container with jQuery

Friday, November 16, 2012 at 9:23AM

I needed a quick and easy way to have a container hover on the side of a page and update with details as the user selected options. This is a simple, jQuery-based approach to doing so. Note that the portion at the end is included if you are needing to fire the positioning from a repost in asp.net, in this instance I needed to do so as the floating container was only displayed and filled via an async event when the user selected their first item.

<!DOCTYPE HTML>
<style>
	#oHeader {height:200px;width:100%;background:lightyellow;margin-bottom:20px;} /* Not needed */
	#oAnchorObject {height:2000px;width:450px;background:lightgreen;} /* Not needed */
	#oSidebar {position:fixed;left:500px;border:1px solid #ff0000;padding:40px} /* Position and left or right value needed */
</style>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
		RepositionCard();
	});	
	
	$(window).scroll(function () {
		RepositionCard();
	});
	
	function RepositionCard() {
		try{
			var eTop = $('#oAnchorObject').offset().top;
			if (eTop - $(window).scrollTop() <= 1) {
				$("#oSidebar").css("top", 0);
			}
			else {
				$("#oSidebar").css("top", eTop - $(window).scrollTop());
			}
		}
		catch(err) {}
	}

</script>

<div id="oHeader">
	Here is some header content to show how the locking works
</div>

<div id="oAnchorObject">
	Here is your large content block to which the sidebar will orient
</div>

<div id="oSidebar">
	This will hover/stick
</div>

Optional for firing the client event after ajax postback from C#, use in page load where needed:

ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "MyScript", "RepositionCard();", true);

Kevin |

Code – Disabling the Enter Key on Web-Forms

Sunday, February 3, 2008 at 5:36AM

An old entry from a few years back, it had a number of hits so it may be useful, qualified for migration...

I got burned a while back by not having this in place when the submit button in a web-app only appeared under certain circumstances. Place this in the top of a web page to squelch the ENTER key in an INPUT=TEXT in your form. Then they gotta use the button when you say that the time is right =)

<script type="text/javascript">

function stopRKey(keyp) {
  var keyp = (keyp) ? keyp : ((event) ? event : null);
  var node = (keyp.target) ? keyp.target : ((keyp.srcElement) ? keyp.srcElement : null);
  if ((keyp.keyCode == 13) && (node.type=="text"))  {return false;}
}

document.onkeypress = stopRKey;

</script>

Kevin |