Code Block Toolbar 1.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on jquery.com fails, e-mail me.
What it Does
If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example, switch to plain text or increase the font-size.
How to Use
jQuery('p.code-block').codeBlockToolbar(); Would add the toolbar to every paragraph with a class of 'code-block'.
Example
I'm a piece of example-code
I should have some buttons beneath me if JS is enabled.
Example Code
HTML
<div id="jquery-code-block-toolbar-example">
<p class="code">
<code>
Im a piece of example-code<br />
I should have some buttons beneath me if JS is enabled.
</code>
</p>
</div>
JS
jQuery('#jquery-code-block-toolbar-example p.code').codeBlockToolbar();
Source Code
jQuery.fn.codeBlockToolbar = function (conf) {
var config = jQuery.extend({
className: 'jquery-code-block-toolbar',
increaseText: 'Increase code font-size',
decreaseText: 'Decrease code font-size',
expandText: 'Expand code-block',
textareaText: 'Switch to textarea',
textareaText2: 'Switch back'
}, conf);
return this.each(function () {
var codeBlock = jQuery(this);
var cbMaxHeight = parseInt(codeBlock.css('max-height'), 10);
var cbHeight = codeBlock.outerHeight();
var cbHTML = codeBlock.html();
var cbText = codeBlock.html().replace(/n/ig, '').replace(/<br.*/ig, '\n').replace(/<.*/ig, '');
var ul = jQuery('<ul class="' + config.className + '"></ul>').insertAfter(codeBlock);
var textarea = jQuery('<p><textarea rows="4" cols="60" class="'
+ config.className
+ '" style="height: '
+ (cbHeight - 10)
+ 'px;">'
+ cbText
+ '</textarea></p>').insertAfter(codeBlock).hide();
jQuery('<li class="increase"><a href="#">' + config.increaseText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('font-size', parseFloat(codeBlock.css('font-size'), 10) * 1.2);
return false;
});
jQuery('<li class="decrease"><a href="#">' + config.decreaseText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('font-size', parseFloat(codeBlock.css('font-size'), 10) * .8);
return false;
});
jQuery('<li class="textarea"><a href="#">' + config.textareaText + '</a></li>').appendTo(ul).find('a').toggle(function () {
jQuery(this).text(config.textareaText2);
codeBlock.hide();
textarea.show();
textarea.find('textarea')[0].focus();
textarea.find('textarea')[0].select();
return false;
}, function () {
jQuery(this).text(config.textareaText);
textarea.hide();
codeBlock.show();
return false;
});
if (cbHeight > cbMaxHeight) {
jQuery('<li class="expand"><a href="#">' + config.expandText + '</a></li>').appendTo(ul).find('a').click(function () {
codeBlock.css('max-height', 'none');
jQuery(this).parent().remove();
return false;
});
}
});
};
Download
Plug-in
- jquery.codeBlockToolbar.js (3.11 kb Unpacked) (Minified)
- jquery.codeBlockToolbar.css (2.11 kb Unpacked)
- jquery.codeBlockToolbar.png
Requires
Random jQuery Plug-ins
Max Length Form Controls
Gives form-controls with a 'maxlength-XXX'-class a max-length and prohibits user from entering more than set amount. It also displays number of charac...
Center
This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.
Checked checkbox-parent
This tiny plug-in adds and removes a 'checked'-class to input[type=checkbox]'s parents. Very useful if you want to style the entire wrapping <label>-e...
