Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

How Do I Exit a Javascript function when the User Clicks a Button/Link?

Posted on 2004-05-01
8
Medium Priority
?
1,265 Views
Last Modified: 2008-02-01
The following description will probably make a lot more sense if you look at this page while reading the description below:

http://www.stocklein.com/onix/test/auto_scroll.html

Here's the deal. I have a few scripts strung together that allows the user to use the Up and Down Arrow keys on the phone to control the scrolling of the content in the phone display. Those all work beautifully. No problems so far.

I recent added another script that "auto-scrolls" the content after a delay if the user doesn't scroll the content themselves. This is something that some cell phones currently do and I'm trying to mimic that functionality. If you go the page above and wait for four seconds the content should scroll to the bottom and then back up to the top. This also works beautifully.

Here comes the part I just cannot figure out. If at any time the user scrolls the content themselves (either up or down), the "auto-scrolling" should never happen. So for example, load this page wait four seconds until the auto-scrolling begines and then click either the Up or Down Arrow keys. At that point, the auto-scrolling should stop and the user should be in total control.

So it seems to me that all I really need to do is figure out how to bail out of the auto-scrolling function as soon as the user clicks either the Up or Down Arrow key.

Any thought?

P.S. All of the of the scripts are right on the page above and I think they are pretty easy to understand.
0
Comment
Question by:oldschwinn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 10

Expert Comment

by:eeBlueShadow
ID: 10969083
it shouldn't be too hard, just have a variable called doautoscroll which is set to true when the document loads, which is set to false in the moveUp() and moveDown functions.

Then, check to see whether doautoscroll is true or false where you would normally start the auto scrolling.
I'm sure you can put these lines in without me needing to give you line numbers, but tell me if you need more help.

_Blue
0
 

Author Comment

by:oldschwinn
ID: 10969121
O.K., call me an idiot, but that's what I did indeed try, but I just couldn't get it to work. Then I thought maybe there was a much better solution like simply calling something like "exit=true" but I gues there is no such beast.

Anyhow, I would LOVE your help if you've got the time. I just need to get this darn thing working today!

Interested in helping more?
0
 

Expert Comment

by:BearishSun
ID: 10972793
might be useful if you posed the code here
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10972854
BearishSun, the code is provided in the webpage.

oldschwinn, try this:

<base href="http://www.stocklein.com/onix/test/auto_scroll.html">
<html>
<head>
<title>Core Mobility | VisionCast</title>
<meta http-equiv="imagetoolbar" content="no">

<link rel="stylesheet" type="text/css" href="../mainNEW.css">
<script src="../scripts/main.js" language="javascript" type="text/javascript"></script>

<style type="text/css">
<!--
body {overflow:hidden}
//-->
</style>



<!--This is the stuff I added to do the autoscrolling. It's actually a combination of two separate scripts. The first two functions set a time delay so that the autoscrolling doesn't happen immediately. The second function then calls moveLayer which scrolls the content down. When the scrolling reaches the bottom, moveLayer then calls moveBack, and the content scrolls back to the top. At that point these scripts are done.-->
<script type="text/javascript">
function autoscroll(delay){
string="pause("+delay+");";
if(auto)setTimeout(string,delay);
}
function pause(delay){
moveLayer('content',-260,-10,200);
}

/*This script is made by bratta at jsworld.com/dhtml.
May be used freely as long as this msg is intact*/

//browsercheck
if(document.layers){ // If Netscape 4
layerRef='document.'
topRef='.top'
leftRef='.left'
}else if(document.all){ // If IE4
layerRef=''
topRef='.style.pixelTop'
leftRef='.style.pixelLeft'
}

function moveLayer(layer,ystop,step,speed){
var go;

if(eval(layerRef+layer+topRef)>ystop){
go=true
eval(layerRef+layer+topRef+'+='+step)
//alert(eval(layerRef+layer+topRef));
}
if(go&&auto){
setTimeout("moveLayer('"+layer+"',"+ystop+","+step+","+speed+")",speed)
}
if(!go) moveBack('content',0,-10,200)

}

function moveBack(layer,ystop,step,speed){
var go;
if(eval(layerRef+layer+topRef)<ystop){
go=true
eval(layerRef+layer+topRef+'-='+step)
}
if(go&&auto){
setTimeout("moveBack('"+layer+"',"+ystop+","+step+","+speed+")",speed)
}
}
</script>




<script type="text/javascript">
var auto=true;
iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=20

if (iens6){
document.write('<div id="container" style="position:absolute;left:90;top:122;width:120px;height:140px;border:0px solid black;overflow:hidden;cursor:crosshair;z-index:2">')
document.write('<div id="content" style="position:absolute;left:90;top:122;width:120px;left:0;top:0;cursor:crosshair;z-index:2">')
}
</script>

<ilayer name="nscontainer" width="120" height="140" clip="0,0,120,140">
<layer name="nscontent" width="120" height="140" visibility="hidden">

<!-- scrolling content -->
<img src="../test/cry_for_help.gif" width="120" height="400" border="0">
<!-- end scrolling content -->

</layer>
</ilayer>

<script language="javascript">
if (iens6)
document.write('</div></div>')
</script>

</head>

<body onload="button_init(); getcontent_height(); autoscroll(4000);">

<div id="phone"><img src="../images/phone.gif" width="282" height="754" border="0"></div>
<div id="display_frame"><img src="../images/display_frame.gif" width="120" height="160" border="0"></div>
<div id="arrows_up_down"><img src="../images/arrows_up_down.gif" width="5" height="15" border="0"></div>

<!--
<div id="soft_left"><a href="#" onclick="moveLayer('content',-360,-10,200)"><img src="../images/spacer.gif" hsrc="../images/buttons/soft_left.gif" width="48" height="24" border=0></a></div>
-->

<div id="up"><a href="#" onMousedown="moveup();auto=false;" onMouseup="clearTimeout(moveupvar)" onMouseout="clearTimeout(moveupvar)"><img src="../images/spacer.gif" hsrc="../images/buttons/up.gif" width="24" height="24" border="0"></a></div>

<div id="down"><a href="#" onMousedown="movedown();auto=false;" onMouseup="clearTimeout(movedownvar)" onMouseout="clearTimeout(movedownvar)"><img src="../images/spacer.gif" hsrc="../images/buttons/down.gif" width="24" height="24" border="0"></a></div>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height

var moveupvar=setTimeout("moveup()",20)
var movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=-(speed))
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+150))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+150))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
<!--window.onload=getcontent_height-->
</script>

</body>

</html>
0
 

Author Comment

by:oldschwinn
ID: 10973439
lil_puffball,

Thanks so much for your help, that certainly worked! I've accepted your answer and awarded you all the points. If you're still interested in help, there is still one small problem. I'm thinking might we a simple fix with the order of the function calls or something? Again, I just cannot figure it out.

When the page loads, if you immediately (actually within four seconds before the autoscroll begins) click the Up Arrow the autoscrolled is "canceled" as it should be, but then after the four seconds are up, the content still scrolls down one "jump."
So it looks like the auto-scroll is getting canceled, but not until AFTER something is still being executed?

I'd love to be able to figure this out.

Again, thanks so much for your help!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10973455
Thanks for the points and the A. :)

Could you upload the new page so I can check it?
0
 

Author Comment

by:oldschwinn
ID: 10973505
lil_puffball,

The latest and almost-greatest page is now here:

http://www.stocklein.com/onix/test/auto_scroll.html

Thanks soooooooooo much for all your help!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10973680
Oops, found the bug, here's the new autoscroll function:

function autoscroll(delay){
string="if(auto)pause("+delay+");";
setTimeout(string,delay);
}
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

647 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question