Embed CSS/HTML/javascript demos on blog posts using jQuery
Writing about techie things, tips and tricks about various technical things become more useful when you attach an example with it or a running demo is shown. As I myself do this on this blog, many times I require to demonstrate the example then and there in blog post.
It is difficult to include execution code with in your blog post as it can conflict with existing code and styling and also most of the blogging engines doesn’t allow that. Few things can be done using plug-ins (in WordPress) but using those plugins can help little as yo can not include conflicting javascript files and different version of same library on same page.
Then I started creating a different page for example code or demo and started embedding the examples using iframe. I found this plugin recently using which you can easily include examples and demos on blog pages. This is the same approach which i used recently of embedding an example page using iframe.
This plugin loads the page when you click on the link having a predefined class defined. Here is an example blow. Click on the link to open this website again inside a frame, Click again on the link to close the frame.
Techie Gyan ExampleFind the required javascript and CSS at http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jquery
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment