Useful Resources for sNusers

Print This Page
Pages:  Main  Custom Modules  Page Splitting
Page Splitting

Page Splitting

What is page splitting?

Page splitting is one way of breaking a large content file into a series of smaller sections that all display on the same page. A site visitor reads the first section and clicks a button at the end of it that takes him/her to the next section, and so on. When the viewer gets to the last section, the button provided refreshes the page, bringing the visitor back to the first section on that page. You can see this technique in action in the Custom Modules tutorial in this section, from the link above.

Page splitting with sNews 1.4

The application outlined in this tutorial will apply globally on your sNews 1.4 site. You can use it in a normal sNews article. You can also use it within any content file displayed in a module created using the Custom Module tutorial (in the Add-ons section). It has been test-run without bugs in sNews 1.4 with the MySQL database. It has not been tested in the textdb version of sNews 1.4, nor on any earlier versions of sNews (1.3 or 1.2). However, it should work in them all.

Installing the add-on

Create the jscript.php file: Open a new, empty php file in your code editor and paste the code below in it, then save the file as jscript.php in the root of your sNews site (same place as index.php).

<?php
/* -----------------------------------------------------------------------------
  File-name: jscript.php
  Mod Date: August 24/06
  Author: Keyrocks (sNews Dude)
  Original source: http://javascript.internet.com
  Source author: James Kennedy, formerly at: http://www.marist.edu/
  - Script splits article/page content into sections with link buttons to next sections.
  - converted to php for global use in sNews versions 1.4, 1.3 and 1.2.
----------------------------------------------------------------------------- */

    echo "<script type=\"text/javascript\">\n";
    echo "function toggleMe(a){ \n"
    ."var next=document.getElementById(a); \n"
    ."var b=new String(); \n"
    ."b= a-1; \n"
    ."var prev=document.getElementById(b); \n"
    ."if(!next)return true; \n"
    ."if(next.style.display==\"none\"){ \n"
    ."next.style.display=\"block\" \n"
    ."prev.style.display=\"none\" \n"
    ."window.scrollTo(0,0);
      } else {
    next.style.display=\"none\"
    }
    return true;
    }
    </script>\n\n"
?>
Adding the Mods

Step 1 - Button Styling: Add the style script below to the bottom of your style.css file (in the images folder) and change the styling as you wish to go with your existing template colors. Or, if you'd rather have the standard browser-generated buttons (by default), you can skip this step.

/* styling applies to buttons for Page Splitter add-on */
input.button {
  margin-left: 20px;
  font: bold 11px Arial, Verdana, Helvetica, sans-serif;
  color: #b2521e;
  background: #e4dfdb;
  border: solid 1px #b2521e;
}

Step 2 - Include jscript.php in index.php: Any time we add a new function file to an sNews site, we need to add another "includes" statement (within php tags) so the function will apply globally in the site. In this case, we want the function in the jscript.php file to be available immediately... as soon as the visitor's "session" begins... so it will continue to function as long as the visitor is on the site.

In sNews 1.4 and 1.3, copy and insert include ("jscript.php"); just under the include ("snews.php"); near the top of the file... and before the closing ( ?> ) php tag.

In snews 1.2, add the same "include" statement just after include ("engine/functions.php"); and, again, before the closing ( ?> ) php tag.

At this point, the Page Splitting add-on will be functional and ready to use.

Using the Page Splitter

First - a few notes on Articles and Content Files:
When you create and submit (save) an article, using the sNews New Article Admin Panel, the content you put into the textareas is saved to the database (or textdb file for textdb versions). As it goes into the database, a function in the snews.php (engine) file adds html paragraph tags to each paragraph of text you have put into the main article textarea. We can also insert html into the article textarea to enhance our content. We can also insert the html required to split a long article into sections, in the article textarea or within content files located elsewhere on the site. And... the content files can be included in the textarea with an include statement or they can be served to display within a Custom Module.

Putting the Splitter to Work:
You can split the content into several sections without limitation, although having more than 10 sections might seem impractical. The example section below contains four sections to get you started with a working example. Create a new article on the Home page of your sNews site, titled Splitter Test. Paste the code below into the article textarea box. Set the character limit to 0, un-check "Auto Pararagraph", and Submit (save) the article. View the article and move from section to section using the button below the single line of content in each section.

<div id="1" style="display: block;">
<p>First section content in here.</p>
<p><input type="button" class="pagebutton button" onclick="return toggleMe('2')" value="Part 2"></p>
</div>

<div id="2" style="display: none;">
<p>Second section content in here.</p>
<p><input type="button" class="pagebutton button" onclick="return toggleMe('3')" value="Part 3"></p>
</div>

<div id="3" style="display: none;">
<p>Third section content in here.</p>
<p><input type="button" class="pagebutton button" onclick="return toggleMe('4')" value="Part 4"></p>
</div>

<div id="4" style="display: none;">
<p>Last - 4th - section content in here.</p>
<p><input type="button" class="pagebutton button" onclick="window.location.reload()" value="Restart"></p>
</div>
What does what...

Let's look closely at the code for the four sections we just inserted in the Splitter Test article. Each section basically looks the same but, there are a few small changes in each so that the content within them displays in proper sequence. Let's start with the first section and work our way down.

Section 1: Each division needs an I.D number.
Line 1 identifies this division as No. 1. The first division must also have its display set to block.
Line 2 is ordinary content within html p-tags. You can replace this line (in all sections) with as much content as you wish.
Line 3 creates the button (following the content) to the next section... section 2. The 2 in the onclick="return toggleMe('2') part of the string makes the button display section 2... and the value, of course, is the text that displays in the button (you can change it to anything).

Section 2: - is defined as divison 2 and the display for this - and for all other divisions that follow it - is set to none. And, in line 3, we have the "toggleMe set as 3 so the button will display section 3.

Sections 3 and 4: The third division button leads to division 4, the last division. And, in the last division, the button string is different than those before it... to return the visitor to back to the first section of the page.

Summary: Spend some time experimenting with this useful add-on. Add another section before the last section by copying the 3rd division and pasting it below it. Change its division number to 4, change its button to toggle to section 5, and change the button value to read Part 4. Then... change the last division number to 5. Use the same procedure to add more sections as you need them.