Adding Custom Javascript and HTML to Textile Blog Posts
filed under: Programming Languages and Developers
http://tbg.cm/wTEnuV
Here at The Barbarian Group, we use Textile for our blog to help make publishing fast and easy. But occasionally there are blog posts in which you want to have more control over the markup or you want to embed more sophisticated web objects than simple text and images. After struggling with several tough posts, I’ve spent some time learning how to work around these limitations. In this post, I’m demonstrating how to embed custom javascript code into a Textile blog post.
What happens if you simply add javascript to your post?
It won’t work, because any time Textile encounters a less than (<) or greater than (>) sign, it treats it as an html tag and acts accordingly. Fortunately, you can encapsulate your markup within <notextile></notextile> tags, and your code will remain entirely unadulterated by Textile.
It won’t work, because any time Textile encounters a less than (<) or greater than (>) sign, it treats it as an html tag and acts accordingly. Fortunately, you can encapsulate your markup within <notextile></notextile> tags, and your code will remain entirely unadulterated by Textile.
To demonstrate this, below is an example of a simple bit of code that toggles the visibility of text sections using javascript.
Code for Working Demo
<notextile>
<script type="text/javascript">
function toggleSection(number,toggle){
div_id = Array('section_text', 'button_hide', 'button_show');
toggle_settings = Array( Array('block', 'block', 'none'), Array('none', 'none', 'block')) ;
for(var i = 0; i < 3; i ++){
document.getElementById(div_id[i] + number).style.display = toggle_settings[toggle][i];
}
}
</script>
<style>button{ float:left; margin-right:5px; width: 30px;}.title_heading{ border-top: 1px solid #CCC; padding: 8px 0px 3px 0px; height:25px; font-size:large; color:#444; font-weight:bold;}.all_posts{ clear:both;}</style>
<div class="title_heading">Section 0 Heading
<button id="button_show0" onclick="toggleSection(0,0);">+</button>
<button id="button_hide0" onclick="toggleSection(0,1);" style="display:none;">-</button>
</div>
<div class="all_posts" id="section_text0" style="display:none;">
<p>Here is the text to show in section 0</p>
</div>
<div class="title_heading">Section 1 Heading
<button id="button_show1" onclick="toggleSection(1,0);">+</button>
<button id="button_hide1" onclick="toggleSection(1,1);" style="display:none;">-</button>
</div>
<div class="all_posts" id="section_text1" style="display:none;">
<p>Here is the text to show in section 1</p>
</div>
</notextile>
<script type="text/javascript">
function toggleSection(number,toggle){
div_id = Array('section_text', 'button_hide', 'button_show');
toggle_settings = Array( Array('block', 'block', 'none'), Array('none', 'none', 'block')) ;
for(var i = 0; i < 3; i ++){
document.getElementById(div_id[i] + number).style.display = toggle_settings[toggle][i];
}
}
</script>
<style>button{ float:left; margin-right:5px; width: 30px;}.title_heading{ border-top: 1px solid #CCC; padding: 8px 0px 3px 0px; height:25px; font-size:large; color:#444; font-weight:bold;}.all_posts{ clear:both;}</style>
<div class="title_heading">Section 0 Heading
<button id="button_show0" onclick="toggleSection(0,0);">+</button>
<button id="button_hide0" onclick="toggleSection(0,1);" style="display:none;">-</button>
</div>
<div class="all_posts" id="section_text0" style="display:none;">
<p>Here is the text to show in section 0</p>
</div>
<div class="title_heading">Section 1 Heading
<button id="button_show1" onclick="toggleSection(1,0);">+</button>
<button id="button_hide1" onclick="toggleSection(1,1);" style="display:none;">-</button>
</div>
<div class="all_posts" id="section_text1" style="display:none;">
<p>Here is the text to show in section 1</p>
</div>
</notextile>
Conclusion
The possbilities are near endless once you are able to insert custom code and javascript into your blog posts. I imagine you could make full use of libraries like JQuery, Processing.js, and many other amazing tools for creating great, interactive web content.
The possbilities are near endless once you are able to insert custom code and javascript into your blog posts. I imagine you could make full use of libraries like JQuery, Processing.js, and many other amazing tools for creating great, interactive web content.
