October 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The Next and Previous Buttons

  • February 28, 2000
  • By Joe Burns
  • Send Email »
  • More Articles »


Hola...

Now it gets hard to describe what's going on because the script is written to have multiple functions interact. So read closely and I apologize for any confusion I'll probably start up.

 

The Script's Effects


Here's the Code

 

When you click on either the next or previous headline buttons, you enact a function. Those functions look like this:

function chngNext()
{
document.headline.shownext.value = "Y"
headMach();
}

function chngPrev()
{
document.headline.showprev.value = "Y"
headMach();
}

Let's say you click on "Next Headline". The function chngNext() fires and the value of one of the hidden fields, "shownext", has its value changed from "N" to "Y".

Then another function, named headMach(), is enacted.

The function chngPrev() runs if the "Previous Headline" button is clicked. It works the same way. The hidden field "showprev" is changed from "N" to "Y" and that headMach() runs.

...but's what's headMach()?

Why, this is headMach():

function headMach()
{
var totalHeads = 4; //total number of headlines you want
if ((document.headline.shownext.value == "Y") &&
(document.headline.showprev.value == "N"))
{
var headShow=
(parseInt(document.headline.nowShowing.value) +1);
if (headShow > totalHeads)
{
var headShow = 1;}
}
if ((document.headline.showprev.value == "Y") &&
(document.headline.shownext.value == "N"))
{
var headShow=
(parseInt(document.headline.nowShowing.value) - 1);
if (headShow < 1)
{
var headShow = totalHeads;}
}

At least that's the first half of it. The second half is next time. The concept of this function is to set the variable value for "headshow" alerting the browser which headline is now in display. From the top:

A variable "totalHeads" is created and set to 4. The author was nice enough to add some comment text alerting you to what that line of code represents. Remember that even though JavaScript counts starting from zero, this script is constructed to be a literal count of headlines. Four headlines are used, thus the number here is four. With me?

Now we test the two hidden fields "shownext" and "showprev". Each is represented by a hierarchy statement document.headline.shownext.value. Remember in the two functions above, we set values to "Y" depending on which button was clicked.

So the next line reads:

if ((document.headline.shownext.value == "Y") &&
(document.headline.showprev.value == "N"))

If the "shownext" value is equal to "Y" and (&&) the "showprev" value is equal to "N", then we can be sure the user clicked on the "Next Headline" because that button changed the value of "shownext".

You'll note that is an IF statement format so if that situation is correct then something has to happen. This:

var headShow=
(parseInt(document.headline.nowShowing.value) +1);

The variable "headshow" finally comes into play. Here it's going to be given a value. The value is equal to what is being shown in the text box. See that command "parseInt()"? That returns the numeric value of whatever is in it's instance. If there's also text, it ignores it. It only returns the number. In this case, it's going to return the number displaying in the visible text box.

That returned number will then have one added to it. Get it? Return the number...add one. The next headline is being forced to display.

But what if we're already looking at headline four of four? That's handled by the next lines of code:

if (headShow > totalHeads)
{
var headShow = 1;} 

Let's say headline four of four is displaying. When the function runs, the number four will be returned. If you add one...that's five which is not good seeing as there's only four headlines.

The code just above is yet another IF statement that asks if the new number created, "headShow," is larger than the total number of headlines, "totalHeads". If it is, then set "headShow" to one, causing the headlines to recycle.

Pretty smooth, huh?

The second half of the function is the same thing except testing the opposite.

</TD></tr>
</TABLE>
</CENTER>
if ((document.headline.showprev.value == "Y") &&
(document.headline.shownext.value == "N"))
{
var headShow=
(parseInt(document.headline.nowShowing.value) - 1);
if (headShow < 1)
{
var headShow = totalHeads;}
} 
<CENTER>
<TABLE BORDER="0"><tr>
<TD>

Is "showprev" equal to "Y" and "shownext" equal to "N"? If so, then the user must have clicked the "Show Previous" button.

Parse the text box and return the value and take away one.

If "headShow" is now less than one (if one was in the text box and we take one away), then set "headShow" to equal the number of headlines. Again, forcing the run of headlines to recycle.

OK! So now we have the method to set the number of the headline that should appear. Let's get it to appear.

Next Time: Show me the headline!

Hola...

Now it gets hard to describe what's going on because the script is written to have multiple functions interact. So read closely and I apologize for any confusion I'll probably start up.







Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel