Make an Auto Expanding Code Box with jQuery

Posted in Online Tips by admin

expand-pre-block

On blogs/website that share some snippets of code usually use <pre> tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. But now here is another solution from Digging into WordPress which using javascript to expand the code box automatically when mouse over.

Using jQuery javascript framework, the code box will expand when pre block is hovered. Of course you can use css with pre:hover to make a similar action but with javascript your pre block only expand to as wide as needed with animation and back to original size on mouse out. More elegant right?

Bookmark and Share

Tags: , , , ,

If you like this post then please consider to subscribe my feed. You can also have new post directly to your inbox if you prefer subscribe by email.

Leave a comment?

SEO Powered by Platinum SEO from Techblissonline