G.D.G. Software Forum

Please help me to put a switch button on the toolbar for autoscroll the text contained in the active page. Thanks. (Or two buttons: on/off)

What you are asking for is really over and above what HTML Exec is. HTML Exec is the compiler that will compile your code into an EXE. They included the procedures and functions so we can all learn from them to make our own and not have to reinvent the wheel that is generic for everyone. They are excellent for a starting point.

To utilize the autoscroll, you will need to use javascript to enhance your project. Chances are, you will need it customized for your project. Search the Internet for "javascript autoscroll". You will get a lot of sites listed, even with working examples. There are scripts out there that will also let you scroll two different areas at the same time. If one site doesn't help in your case, move on to the next one.

There are tutorials that will show you how to include javascript with your current HTML files.

I would also suggest setting up a production, test and a quick test projects for the following reasons. This means keeping each one in their own set of folders. You can also use the same Publication GUID, if needed, since they are all from the same overall project.

1. Production is the final project to be distributed.

2. The test project is to test different areas without changing what you have already tested in production. When complete, copy the completed files to the production project and test again.

3. Quick test is used to test small pieces of code with HTML Exec. This provides faster compile times and is very useful.

4. I have included live tests, which you can download examples from the Internet. Make changes and test with your browser without using HTML Exec. Just make sure you get all the files that are needed as some will let you view the source code and copy it and some have ZIP files you can download. You may also need external JS and CSS files if viewing the source code and copying.

A lot of examples, include code for different browsers. A lot of this code can be removed for other browsers, FireFox, Chrome, etc.

I hope this helps you.
HawkeyeTX

Thanks for your help, but that solution that you give to me, is not that I want, because I have a lot of pages in my ebook, and I want a button for automatic scroll in the toolbar that can be useful in all of my pages. The function that I want, is similar to the function that permit zoom in and zoom out the text in every page, and that we can use from the toolbar.

Please, explain me how to insert the automatic scroll from the toolbar, not on every single page, if is possible.

Thanks again.

What you are basically asking for is impossible.

When you compare zoom in and zoom out along with auto scrolling text, you are talking apples and oranges. The zoom in and zoom out affects the entire screen, not some portion of it. Yes, you can auto scroll the entire window, but I don't think that is what you want and besides, that will take some coding too. See example 1, below.

I have not tried this but it should work. You can add a custom icon in the toolbar in HTML Exec using the, "Execute this Script Function". Before that you will need to have the function already written based on your project and put it in your UserMain file. Based on how you write the code, the function may toggle auto scrolling, on and off, and you will reference javascript code on each page. To minimize the size of the files, try to use an external JS file, if possible.

Here are some examples.
1. <http://www.brownielocks.com/autoscroll1.html> This will autoscroll the entire window. The code is at the bottom of the page. Click on the link for scollable text over a fixed background.

2. <http://davidwalsh.name/smooth-scroll-mootools> This is using an external JS file. It shows how to quickly jump between areas on the same page, using the Moo Tools Library and smooth scrolling.

3. <http://www.webidsupport.com/forums/showthread.php?2162-AutoScroll-DIV-script&s=03b677b33ae02f70e1437724a4a66f68> This is the source code that will autoscroll a DIV element.

There are so many possible ways to setup an autoscroll function, it would be impossible to have them all in one function. What element do you want scrolled, with or without scroll bars, what speed or variable speed, etc?

The easiest way, is to get one working for one of your pages and then copy paste what is needed for the rest of your pages. To minimize the code, I would look at the possibility of using an external JS file.

Since, I have not tried this, Tech Support can comment on the 3rd paragraph for accuracy for setting this up in the toolbar, above.

HawkeyeTX

Thanks again. I understand. Searching I found this code: (http://javascriptsource.com/page-detail ... oller.html). Can you help me to convert the second step: <BODY> code, into functions to write in my usermain file?. The css style and the javascript I can to put into external css and js file ... but I don´t know if is possible to write in my usermain file the body part, I mean:
""<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="down.gif" border="0"></a><a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="up.gif"
border="0"></a>
</div>""

I hope you can help me. Thanks a lot.

<!-- TWO STEPS TO INSTALL PAGE SCROLLER:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="down.gif" border="0"></a><a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="up.gif"
border="0"></a>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 2.21 KB -->

I don't think it is possible to move the body portion to the usermain file. Your mouse triggers are located in the body and without something to trigger the code, it would not work. If you add your displayable portion to the area, indicated below, everything will work fine.


There is no CSS or JS files needed with this, as posted on the web. Don't forget to put the arrows in your source directory or where you store your graphics.

If you want to experiment, you might be able to move all or part of the head section to a JS file and test. I would leave the body portion in tact.

Good Luck,
HawkeyeTX

Thank you very much. I thank your help. I already put into external css and js files the head portion, and copy it with the up and down gif icons in the same folder that my files, and write the body portion in the correct place in each file, and everything works fine. Thanks.

Your welcome.

Glad I could help.