[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript detecting iframe vertical scroll position

Posted on 2006-04-27
7
Medium Priority
?
5,882 Views
Last Modified: 2008-01-09
Trying to detect that someone has scrolled to the bottom of the iframe and "legally" read the text... Parent document has a form (splash) and an input field (legal) with original value of 0.

<script language="JavaScript">
var position = 0;

function startPolling(){setInterval("poll()",500)}

function poll(){
if (navigator.appName == "Microsoft Internet Explorer"){var position = document.body.scrollTop;}
else {var position = window.pageYOffset;}

if (position > 150)
{
      parent.document.splash.legal.value='1';
}

return true;

}
</script>
</head>

<body onLoad="startPolling()">

This is where the long text is...

</body>
</head>

It's not setting the value :( Any ideas what's wrong?
0
Comment
Question by:djrubin
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:smaccari
ID: 16554308
Your function works for me (i put an alert instead of modifying an input's value) - test made with IE6.
0
 

Author Comment

by:djrubin
ID: 16554496
Nice to know I did that right, but why doesn't my value show any change in the parent script nor on its submission.... hmmm...

Here's the code on the parent...

<body bgcolor="#ffffff">
<cfform name="splash" id="splash" action="index.ep" method="post">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="784">
              <tr>
               <td><img name="splash_r3_c1" src="images/splash_r3_c1.gif" width="104" height="153" border="0" alt=""></td>
               <td width="575" height="153" background="images/splash_r3_c2.gif">
                        <iframe src="disclaimer.ep" name="BottomFrame" width="100%" scrolling="auto" id="BottomFrame" allowtransparency="true">
                              Your browser does not support iframes.
                        </iframe>         
                  </td>
               <td><img name="splash_r3_c8" src="images/splash_r3_c8.gif" width="105" height="153" border="0" alt=""></td>
              </tr>
            </table>

      <cfinput type="text" name="legal" value="0">
</cfform>
</body>

Did I do something wrong on "top"?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16560279
Do you have an error, or is it just doing nothing?
If you place an alert in your function, do you see it pop?:

function startPolling(){setInterval("poll()",500)}

function poll(){
if (navigator.appName == "Microsoft Internet Explorer"){var position = document.body.scrollTop;}
else {var position = window.pageYOffset;}

if (position > 150)
{
   alert("foo");  
   parent.document.splash.legal.value='1';
}

return true;

}
0
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.

 

Author Comment

by:djrubin
ID: 16561990
Firefox it works fine... IE nothing. I put in the alert and see it in FF (thanks for the endless loop of pop ups :) I added a detecting IF so that it appears once). Nothing in IE, no popup and no value changing... is there something wrong with the IE detection part of the code?
0
 

Author Comment

by:djrubin
ID: 16574065
Well here's the answer folks...

Needed to change the first line of the poll function to:

if (navigator.appName == "Microsoft Internet Explorer"){var position = document.documentElement.scrollTop;}

seems document.body.scrolltop is not good enough for IE so you have to reference it by documentElement

Now all works fine.
0
 

Accepted Solution

by:
GranMod earned 0 total points
ID: 16607698
Closed, 500 points refunded.
GranMod
The Experts Exchange
Community Support Moderator of all Ages
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

872 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