If you use extended entries, this tutorial will help you make your journal more friendly to your visitors, by having the extended parts of your entries to be
displayed on the Main Page.
Normally, when clicking the 'More...' link, your visitors are directed to the Entry Page for this entry, which can be slightly annoying to this visitor.
So instead, when clicking on this 'More...' link, there is a way to make the extended part of the body to appear right under the header part of the entry,
without leaving the journal's Main Page. This is done using some JavaScript coding.
Here is an exemple of extended entry which illustrates our topic:
(Click on 'More...'.) |
|
Saturday, January the 4th, 2003
This is a title
This is an entry body.
More...
And here is the extended body.
Less... |
|
|
|
| In order to do this, you will need to edit the '"More" link' template and insert the following piece of code: |
|
<br /><br />
<span id="extmore!!entry_id!!"><a href="!!comurl!!" onclick="showMore(!!entry_id!!,'!!comurl!!');return false;">More...</a></span>
<div id="extless!!entry_id!!" style="display: none">
!!extend_body!!
<br><br>
<a href="javascript: void(0)" onclick="showMore(!!entry_id!!,0); return true;">Less...</a></div> |
| |
|
| Finaly, in order for all this to work, insert the following JavaScript into your 'Main Page' template: |
|
<script type="text/javascript">
<!--//
function showMore (varA1, varB1) {
varless = ('extless' + (varA1)); varmore = ('extmore' + (varA1));
if (document.getElementById(varless).style.display) {
if (varB1 != 0 ) {
document.getElementById(varless).style.display = "block";
document.getElementById(varmore).style.display = "none"; }
else {
document.getElementById(varless).style.display = "none";
document.getElementById(varmore).style.display = "block"; }
}
else {location.href = varB1; return true;}
}
//-->
</script> |
| |
|
| That is all you will have to do. Note that you shouldn't worry about your visitors whose browsers do not support JavaScript,
as this code will simply direct them to the Entry page when clicking the 'More...' link. |
