PDA

Click to See Complete Forum and Search --> : Help make great move page/text script to work in Firefox

salus
07-01-2007, 04:35 PM
I got this Script years ago - probably as "move page"

Problem: This is a great script for displaying a lot of text (I guess images etc) as several smaller pages with mouseover links to change back and forth between, with each page replacing other in same window/web site. It works perfect in IE6 - but refuses to work in Firefox - I dont know if its OK in Netscape - expect not.

I would really appreciate help to make it work in Firefox, having spent some time cobling it to my design - I was real pleased with it until I tried it on Firefox - now am in the dumps.

Please help someone - if it isnt too big a problem to adjust for Firefox - it can be seen in action on:

http://frums.50webs.com/Chngtxt.htm

Thanks in advance for help solve this problem

NB - the script as on that site is:

<HTML>
<head>
<script LANGUAGE="JavaScript" src="http://jdstiles.com/java/noscape.js"></SCRIPT>

<TITLE>Paged Documents</TITLE>
<STYLE>
<!--
H2 {color: darkgreen; }
H3 {text-align: center; color: navy; font: 14pt arial, geneva, sans-serif; font-weight: bold}
TD {font: arial }
#header {position: absolute; top: 150px; left: 5px}
#page1, #page2, #page3, #page4 {position: absolute; width: 800px; top:20px; left:110px; border: 1px black solid; padding:9px; font: 10pt arial, geneva, sans-serif; font-weight:bold}
OL {font: 10pt arial, geneva, sans-serif}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// This code can be reused and modified as long as the copyright
// notice and URL are maintained.
// This code is copyright 1998 InsideDHTML.com, LLC.
// http://www.insideDHTML.com
var pageCount = 3
var allSupport = (document.all!=null)
var layersSupport = (document.layers!=null)

function getElement(elName) {
// Get an element from its ID
if (allSupport)
return document.all[elName]
else
return document.layers[elName]
}

function setVisibility(el, bDisplay) {
// Hide or show to tip
if (bDisplay)
if (allSupport)
el.style.visibility = "visible"
else
el.visibility = "show";
else
if (allSupport)
el.style.visibility = "hidden"
else
el.visibility = "hidden"
}

function movePage(what) {
if ((allSupport) || (layersSupport)) {
for (var i=1; i <=pageCount; i++)
setVisibility(getElement("page"+i),what==i)
return false
} else
return true
}

function doResize() {
location.reload()
}

// Work-around Netscape resize bug
if (layersSupport)
setTimeout('window.onresize=doResize',1000)
// -->
</SCRIPT>

</head>
<BODY bgcolor="#e0ffff" text="#8b0000" link="#000066" vlink="#000066" alink="#00ced1">

</CENTER><P>
<DIV ID=header>
<FONT FACE="arial, geneva, sans-serif">
<B><FONT style="font-size:10pt" COLOR=navy>Contents</B><BR>
<A HREF="#p1" ONMOUSEOVER="return movePage(1)">Page 1</A><BR>
<A HREF="#p2" ONMOUSEOVER="return movePage(2)">Page 2</A><BR>
<A HREF="#p3" ONMOUSEOVER="return movePage(3)">Page 3</A><BR>
<P class=start>
</DIV>

<DIV ID=page1>

<A NAME="p1"></A>
<TABLE><TR><TD WIDTH=50%>
<H3>Introduction</H3>
<P class=start>This example uses a very simple script to create a paged view of a single
document. The three links to the left are already defined on this page in three separate
absolutely positioned DIV elements. When a link is selected, the corresponding DIV is displayed
and the other contents are hidden.
<P>If you are using a non-4.0 browser, this page is still functional. The three
links are displayed sequentially and clicking on a link takes you to the correct position
in the document.
<BR>
<A HREF="#p2" ONMOUSEOVER="return movePage(2)"><font color=red>Next page - Page 2</font></A><BR>
</TD><TD WIDTH=50%>FOR ANOTHER COLUMN
</TD></TR></TABLE>
</DIV>

<!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!->

<DIV ID=page2 STYLE="visibility: hidden">
<H3>Description</H3>
<A NAME="p2"></A>
<P>Each page is contained within a DIV that has a ID of the following format - page<EM>n</EM>, where <EM>n</EM> represents the
page number. Pages are numbered starting at 1. Inside the code is a variable pageCount which represents the total number of pages.
<P>To display a specific page, you call a function, movePage(<EM>n</EM>), passing the page number to display. The movePage function
automatically displays the appropriate page.
<P>The movePage() function has no effect on down-level browsers. To give the links a useful
behavior, the anchore elements link to a bookmark representing the section. For example, the link
to this description page is defined as follows:
<FONT COLOR=darkred><PRE>
<A HREF="#p2" ONCLICK="return movePage(2)">
Description
</A></PRE></FONT>
<P>If you were to look at this source code, you would find the following bookmark at the top
of this section:
<FONT COLOR=darkred><PRE>
<A NAME="p2"></A></PRE></FONT>
<P>In down-level browsers, this bookmark acts as the destination for the link. In the 4.0 browsers,
this bookmark is ignored. <BR>

<A HREF="#p3" ONMOUSEOVER="return movePage(3)">Page 3</A>
<A HREF="#p1" ONMOUSEOVER="return movePage(1)">return to Page 1</A><BR>
</DIV>

<!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!->
<DIV ID=page3 STYLE="visibility: hidden">
<A NAME="p3"></A>
<P align=justify>MORE TEXT<BR>
EVENING PRIMROSE OIL - Oenothera biennis
DESCRIPTION
This humble yellow flower, which is now known to possess remarkable health-giving properties, was first brought to Europe from Virginia in the 1600's. The key to the plant's nutritional secret is the oil that is collected from its seeds. One of the biggest benefits of evening primrose oil is to women who suffer from premenstrual syndrome (PMS).
Evening Primrose is a large delicate wild flower, which grows up to eight feet tall along streams and roads in the high desert, at altitudes up to 9,000 feet, in North America from the Rocky Mountains to the Atlantic seaboard. The plant yields an oil, rich in healing and nutritional properties.
The flowers bloom in the evening and are pollinated by night-flying insects. The tiny seeds are about the size of mustard seeds. The Evening Primrose crop is hand-harvested.

<BR>Return to<A HREF="#p1" ONMOUSEOVER="return movePage(1)"> Page 1</A><BR>

</DIV>

</BODY>
</HTML>
Banana Ananda
07-01-2007, 06:24 PM
Replace the code between the <SCRIPT> tags with this simplicity:

var pageCount = 3;
var pageIdPrefix = "page";
var what;

function movePage(what) {
for (var i=1; i <=pageCount; i++)
document.getElementById(pageIdPrefix +i).style.visibility
= (what==i) ? "visible":"hidden";
}

The code could be developed a little so that you don't need to tell the script how many pages there are (pageCount = 3).

I have removed support form version 4 browsers. Really, nobody uses them. If you really want that support put back in, then it can be done, but note that it may still not work for NS4 anyway, depending on your page.
salus
07-02-2007, 03:51 PM
Banana, many many thanks for helping me out. And just how!! "this simplicity" script as you called it, is the real McCoy - I couldnt believe at first that that all there was to it - thought you'd missed out most of the code!

Thanks again - it works every bit in FireFox as in IE - just great.

You can see it in another web page where I've got the pages in tables to look like two columns - that's on: http://frums.50webs.com/Chngtxt0.htm

PROBLEM - I would like to post your result on other forums - tell me how to acknowledge IN THE CODE your work. Isnt this now a NEW code as compared with the old one? Wouldnt you like to claim as yours as being the inventor?

Perhaps you'll give it a thought and tell me what to do.

Last note - you're right that there's no great value in the script to have to say how many pages (pageCount=3) - if you can get rid of this then it will be better, I reckon. The way I get round is to insert value GREATER than needed - in http://frums.50webs.com/Chngtxt0.htm I've made it 13 - but I guess it could be given as 100 or more and would cope with most needs.

Anyway - thanks again - be grateful if you can spare the time to develop it and tell how to show its your invention.

Best, Salus