PeopleSoft Adoption Made Smooth & Simple!
On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool. Claim Your Free WalkMe Account Now
Course Of The Month
5 days, 1 hour left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
scroll down effect, problem with setInterval
Posted on 2004-08-06
Hi
I wanted to put a DIV in a page, then every time the user moves mouse over it, I wanted it to clip downward. (To have something like an scroll efect).
I tried this first:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setInterval("scroll("+x+")
}
function scroll(n){
window.status+=n
}
</script>
<body>
<div onMouseOver="show(this)">S
</body>
</html>
In this model, show function would be used for setting the visibility of DIV. (I need this, because I want to set the visibility of some other DIVs at the same time).
The variable sent to it is the DIV object, obviously. Now the scroll function (which must be later coded to clip the DIV object), contains only a test code. If it is run correctly, it must fill the status bar with [object] s.
It failed! It said, "object is undifined"
I changed the show(x) function to such:
function show(x){
setInterval("scroll(x)",10
}
It gave me the same error message.
I thought this is because I am trying to send the X variable to a function outside the show(x) function, and thus, X is undifined to the scroll(n) function. So:
function show(x){
window.status+=x.toString(
setInterval("show("+x+")",
}
It again failed! This time one [object] was shown in the status bar (because windo.status command was run once, when it was called by the mousover event.) But it failed to repeat.
I have always used setInterval and setTimeout for functions that do not need arguments,ie setInterval("func()",time)
Any ideas?
A simple code that can result in a drop down effect is excellent!
Huji
I wanted to put a DIV in a page, then every time the user moves mouse over it, I wanted it to clip downward. (To have something like an scroll efect).
I tried this first:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setInterval("scroll("+x+")
}
function scroll(n){
window.status+=n
}
</script>
<body>
<div onMouseOver="show(this)">S
</body>
</html>
In this model, show function would be used for setting the visibility of DIV. (I need this, because I want to set the visibility of some other DIVs at the same time).
The variable sent to it is the DIV object, obviously. Now the scroll function (which must be later coded to clip the DIV object), contains only a test code. If it is run correctly, it must fill the status bar with [object] s.
It failed! It said, "object is undifined"
I changed the show(x) function to such:
function show(x){
setInterval("scroll(x)",10
}
It gave me the same error message.
I thought this is because I am trying to send the X variable to a function outside the show(x) function, and thus, X is undifined to the scroll(n) function. So:
function show(x){
window.status+=x.toString(
setInterval("show("+x+")",
}
It again failed! This time one [object] was shown in the status bar (because windo.status command was run once, when it was called by the mousover event.) But it failed to repeat.
I have always used setInterval and setTimeout for functions that do not need arguments,ie setInterval("func()",time)
Any ideas?
A simple code that can result in a drop down effect is excellent!
Huji
[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
6-
6
12 Comments
Active 4 days ago
As you have noticed yourself, you do NOT pass the object, you pass a String to the setInterval() call. The String is like this: "[object]"
To avoid that string problem you have to create a global var and assign to it the reference.
Like this:
<div onMouseOver="theDiv=this;s
To avoid that string problem you have to create a global var and assign to it the reference.
Like this:
<div onMouseOver="theDiv=this;s
Active 4 days ago
Oh, and the setInterval() without a way to Clear the interval is an endless interval.
Hi
1)Now all that is sent to my show() function is a string 'theDiv' and I can not use it to locate the DIV to which I want to aplly changes. This does not meet my needs.
2)Obviously I would change the simple code posted above, and remove the bugs like the one you noticed about setInterval()...
Thanks, and waiting for an apropriate solution.
Huji
1)Now all that is sent to my show() function is a string 'theDiv' and I can not use it to locate the DIV to which I want to aplly changes. This does not meet my needs.
2)Obviously I would change the simple code posted above, and remove the bugs like the one you noticed about setInterval()...
Thanks, and waiting for an apropriate solution.
Huji
Active 4 days ago
Here a test for you:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setTimeout("scroll("+x+")"
}
function scroll(n){
window.status=n.innerHTML;
}
</script>
<body>
<div onMouseOver="theDiv=this;s
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setTimeout("scroll("+x+")"
}
function scroll(n){
window.status=n.innerHTML;
}
</script>
<body>
<div onMouseOver="theDiv=this;s
</body>
</html>
I made a little change to the code you posted:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setTimeout("scroll("+x+")"
}
function scroll(n){
window.status+=n.innerHTML
}
</script>
<body>
<div onMouseOver="theDiv=this;s
</body>
</html>
Here is the result of the test:
The scroll function is called only ONE time, we have only ONE "Salaaaaaaaaaam" in the status bar.. But for scrolling reasons, I need the scroll function to be called EVERY 100 milliseconds, to let the menu glide down little by little.
Your code does not meet my needs, unfortunately.
Waiting for help
Huji
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function show(x){
setTimeout("scroll("+x+")"
}
function scroll(n){
window.status+=n.innerHTML
}
</script>
<body>
<div onMouseOver="theDiv=this;s
</body>
</html>
Here is the result of the test:
The scroll function is called only ONE time, we have only ONE "Salaaaaaaaaaam" in the status bar.. But for scrolling reasons, I need the scroll function to be called EVERY 100 milliseconds, to let the menu glide down little by little.
Your code does not meet my needs, unfortunately.
Waiting for help
Huji
I again ask what I need:
I need a piece of code/idea which.... when a user clicks on a part of a page (a DIV in specific words), another piece of the page is scrolled, moved, gileded, anything you call it.
The important thing is, the part of the page that is gonna be affected does not have a FIXED hard coded name, it name may change from page to page, and thus I need to use variables for refering to it. I prefer this to be in DHTML, since the DOM idea is very easy, but does not cover all browser types of interest.
Thanks
Huji
I need a piece of code/idea which.... when a user clicks on a part of a page (a DIV in specific words), another piece of the page is scrolled, moved, gileded, anything you call it.
The important thing is, the part of the page that is gonna be affected does not have a FIXED hard coded name, it name may change from page to page, and thus I need to use variables for refering to it. I prefer this to be in DHTML, since the DOM idea is very easy, but does not cover all browser types of interest.
Thanks
Huji
Hi
I implemented the code which resulted to this. It is working! But I have a theorical question. Look:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
var i=10;
function show(x){
document.getElementById(x)
document.getElementById(x)
height=document.getElement
window.status=height
scr=setInterval("scroll("+
}
function scroll(n,h){
n.style.clip="rect(0px 100px "+i+"px 0px)"
if((i/h)<0.9){i=i+10}
else{i=i+1}
if(i>=100){
clearInterval(scr)
n.style.clip="rect(0px 100px "+h+"px 0px)"
}
}
</script>
<body>
<div onMouseOver="show('theDiv'
<div id="theDiv" style="background-color:#E
</body>
</html>
Here, what is sent to show(x) function as it's x variable is a string ('theDiv'). Until the last line of show(x) function, if I ask for the variable type of x, it says that x is a string.
Now just the same x is sent to the scroll function in the last line of show(x) function. But from the first lin of scroll function if I ask for the variable type of n (which must be the same as x) it is an object. The nodeName returns "DIV"!!!
It means that n is not equal to x string but it is equal to document.getElementById(x)
Please help me understand why it happens!
Thanks a lot
Huji
PS:It seems that setInterval function has some unknown sides for me. I will increase the points to 500, If you help me understand it well.
I implemented the code which resulted to this. It is working! But I have a theorical question. Look:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
var i=10;
function show(x){
document.getElementById(x)
document.getElementById(x)
height=document.getElement
window.status=height
scr=setInterval("scroll("+
}
function scroll(n,h){
n.style.clip="rect(0px 100px "+i+"px 0px)"
if((i/h)<0.9){i=i+10}
else{i=i+1}
if(i>=100){
clearInterval(scr)
n.style.clip="rect(0px 100px "+h+"px 0px)"
}
}
</script>
<body>
<div onMouseOver="show('theDiv'
<div id="theDiv" style="background-color:#E
</body>
</html>
Here, what is sent to show(x) function as it's x variable is a string ('theDiv'). Until the last line of show(x) function, if I ask for the variable type of x, it says that x is a string.
Now just the same x is sent to the scroll function in the last line of show(x) function. But from the first lin of scroll function if I ask for the variable type of n (which must be the same as x) it is an object. The nodeName returns "DIV"!!!
It means that n is not equal to x string but it is equal to document.getElementById(x)
Please help me understand why it happens!
Thanks a lot
Huji
PS:It seems that setInterval function has some unknown sides for me. I will increase the points to 500, If you help me understand it well.
Active 4 days ago
As stated before, there is no way to pass an object parameter to setInterval() or setTimeout() call. All you can pass is one String that is interpreted as a statement.
Your string is this:
scr=setInterval("scroll(th
I mean the passed String is: "scroll(theDiv,100)"
That String is evaluated and from the String you get a function call with an object reference as parameter and a number as parameter.
The object reference is evaluated out of the show() function scope. Therefore needs the name theDiv to be known when it is interpreted, it needs to be Global defined.
You have NO global assignment for theDiv var, but you use the fact that in IE all elements are registered as top elements and therefore are globaly accessible.
But that woul not work in Netscape.
In Netscape you have to distinguish betwean the "theDiv" element id and theDiv global var assignment.
Here a version which would work also in Netscape:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
var i=10;
function show(x){
document.getElementById(x)
document.getElementById(x)
height=document.getElement
window.status=height
scr=setInterval("scroll('"
}
function scroll(n,h){
var myDiv = document.getElementById(n)
myDiv.style.clip="rect(0px
if((i/h)<0.9){i=i+10}
else{i=i+1}
if(i>=100){
clearInterval(scr)
myDiv.style.clip="rect(0px
}
}
</script>
<body>
<div onMouseOver="show('theDiv'
<div id="theDiv" style="background-color:#E
</body>
</html>
Note the single quote characters in first setInterval() call.
This last version has significat difference to my initial version, so please do not confuse that two version.
And please ask for more details where I can continue to explain what there happens.
Your string is this:
scr=setInterval("scroll(th
I mean the passed String is: "scroll(theDiv,100)"
That String is evaluated and from the String you get a function call with an object reference as parameter and a number as parameter.
The object reference is evaluated out of the show() function scope. Therefore needs the name theDiv to be known when it is interpreted, it needs to be Global defined.
You have NO global assignment for theDiv var, but you use the fact that in IE all elements are registered as top elements and therefore are globaly accessible.
But that woul not work in Netscape.
In Netscape you have to distinguish betwean the "theDiv" element id and theDiv global var assignment.
Here a version which would work also in Netscape:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
var i=10;
function show(x){
document.getElementById(x)
document.getElementById(x)
height=document.getElement
window.status=height
scr=setInterval("scroll('"
}
function scroll(n,h){
var myDiv = document.getElementById(n)
myDiv.style.clip="rect(0px
if((i/h)<0.9){i=i+10}
else{i=i+1}
if(i>=100){
clearInterval(scr)
myDiv.style.clip="rect(0px
}
}
</script>
<body>
<div onMouseOver="show('theDiv'
<div id="theDiv" style="background-color:#E
</body>
</html>
Note the single quote characters in first setInterval() call.
This last version has significat difference to my initial version, so please do not confuse that two version.
And please ask for more details where I can continue to explain what there happens.
Featured Post
June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.
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 …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses
Course of the Month5 days, 1 hour left to enroll
688 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.