Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Detecting if user scrolls in an iframe

Status
Not open for further replies.
meckeard

meckeard

Programmer
Aug 17, 2001
619
US
All,

Is it possible to detect if a user scrolls to the bottom of an iframe?

I have someone who absolutely insists on using javascript to ensure that visitors of their site scroll to the bottom of an iframe that holds terms & conditions. They seem to think that everyone will actually read it and this is proof!

Anyhow, is this possible using javascript?

Thanks.
 
Sort by date Sort by votes
Usually they just put radio buttons like (accept, refuse) at the bottom part of the notice. Have to choose accept in order to proceed further. That's one simple way to make sure.
 
Upvote 0 Downvote
tsuji -- how do I check the radio buttons from outside of the iframe?
 
Upvote 0 Downvote
meckeard,

I am not in a position to make a demo. Just check out ms iframe documentation where you will have the necessary device to reference to the document in the specific iframe.
like:
[tt] document.frames("sFrameName").document[/tt]
From there down, you can access the elements within.

regards - tsuji
 
Upvote 0 Downvote
Meckeard...

I know exactly what it is your client wants... I did something similar (for a similarly knowledgeable client) a while back.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Test Harness</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function myFunc() {
	var myIframeObj = document.getElementById('termsIframe');
	var iframeHeight = myIframeObj.clientHeight - 0;
	var scrolledPosition = myIframeObj.document.body.scrollTop - 0;
	var iframeContentHeight = myIframeObj.document.height - 0;
	if (iframeHeight+scrolledPosition >= iframeContentHeight) {
		alert('You are at the bottom of the terms');
	} else {
		alert('You are NOT at the bottom of the terms yet!');
	}
}
//-->
</script>

</head>
<body>
<iframe id="termsIframe" frameborder="1" width="500" height="360" src="terms.html"></iframe>
<br /><br /><a href="javascript:myFunc()">Check my scroll position</a>
</body>
</html>

You may want to confirm that it works on your browser -- I've confirmed it on Safari with MacOSX.

Cheers,
Jeff
 
Upvote 0 Downvote
mackeard,

I find the time and am now in a position to make a demo of principle.

[1] Make a page with legal notice (long enough for scrolling purpose demonstration) and acceptance radio button. In itself also a functional button to go further (this is up to what the designer want out of the page). Let's say "legal_notice.htm".

[2] Then in main page, it call up the legal_notice page into an iframe. A checking out button is put there to demonstrate extracting info from the iframe child, and only if the notice is accepted, the iframe proceeds further. (This is just for demo, it functions differently from the button in the legal_notice page.) This functionality also demonstrates from to send iframe source in a cross-browser setting, which is not as obvious as one may think.

So here is the listing. (Sorry for some long boring text.) First the legal_notice.htm.
Code: 
<!-- legal_notice.htm -->
<html>
<head><title>frame1</title>
<script language="javascript">
function action() {
    var celem=document.forms[0].elements["rdbtn"];
    if (celem[0].checked) {
        document.location.href="[URL unfurl="true"]http://www.google.com/";[/URL]
    } else {
        if (celem[1].checked) {
            alert("You do not accept the terms.\nThe page will leave the site.");
            document.location.href="[URL unfurl="true"]http://www.yahoo.com/";[/URL]    //redirect to some other page
        } else {
            alert("You have to choose to accept or refuse the terms.");
        }
    }
}
</script>
</head>
<body>
<div>
<h3 align="center">JavaTM Media Framework (JMF) 2.1.1
<br>Binary Code License Agreement</h3>
<p>READ THE TERMS OF THIS AGREEMENT AND ANY PROVIDED SUPPLEMENTAL LICENSE
TERMS (COLLECTIVELY "AGREEMENT") CAREFULLY BEFORE OPENING THE SOFTWARE
MEDIA PACKAGE. BY OPENING THE SOFTWARE MEDIA PACKAGE, YOU AGREE TO THE
TERMS OF THIS AGREEMENT. IF YOU ARE ACCESSING THE SOFTWARE ELECTRONICALLY,
INDICATE YOUR ACCEPTANCE OF THESE TERMS BY SELECTING THE "ACCEPT" BUTTON
AT THE END OF THIS AGREEMENT. IF YOU DO NOT AGREE TO ALL THESE TERMS, PROMPTLY
RETURN THE UNUSED SOFTWARE TO YOUR PLACE OF PURCHASE FOR A REFUND OR, IF
THE SOFTWARE IS ACCESSED ELECTRONICALLY, SELECT THE "DECLINE" BUTTON AT
THE END OF THIS AGREEMENT.
<p>1.&nbsp;&nbsp;&nbsp; License to Use. Sun Microsystems, Inc. ("Sun")
grants you a non-exclusive and non-transferable license for the internal
use only of the accompanying software and documentation and any error corrections
provided by Sun (collectively "Software"), by the number of users and the
class of computer hardware for which the corresponding fee has been paid.
<p>2.&nbsp;&nbsp;&nbsp; Restrictions. Software is confidential and copyrighted.
Title to Software and all associated intellectual property rights is retained
by Sun and/or its licensors. Except as specifically authorized in any Supplemental
License Terms, you may not make copies of Software, other than a single
copy of Software for archival purposes. Unless enforcement is prohibited
by applicable law, you may not modify, decompile, or reverse engineer Software.
You acknowledge that Software is not designed or intended for use in the
design, construction, operation or maintenance of any nuclear facility.
Sun disclaims any express or implied&nbsp; warranty of fitness for such
uses. No right, title or interest in or to any trademark, service mark,
logo or trade name of Sun or its licensors is granted under this Agreement.
<p>3.&nbsp;&nbsp;&nbsp; Limited Warranty. Sun warrants to you that for
a period of ninety (90) days from the date of purchase, as evidenced by
a copy of the receipt, the media on which Software is furnished (if any)
will be free of defects in materials and workmanship under normal use.
Except for the foregoing, Software is provided "AS IS". Your exclusive
remedy and Sun's entire liability under this limited warranty will be at
Sun's option to replace Software media or refund the fee paid for Software.
<p>4.&nbsp;&nbsp;&nbsp; DISCLAIMER OF WARRANTY. UNLESS SPECIFIED IN THIS
AGREEMENT, ALL EXPRESS OR IMPLIED CONDITIONS, REPRESENTATIONS AND WARRANTIES,
INCLUDING ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE OR NON-INFRINGEMENT ARE DISCLAIMED, EXCEPT TO THE EXTENT THAT THESE
DISCLAIMERS ARE HELD TO BE LEGALLY INVALID.
<p>5.&nbsp;&nbsp;&nbsp; LIMITATION OF LIABILITY. TO THE EXTENT NOT PROHIBITED
BY LAW, IN NO EVENT WILL SUN OR ITS LICENSORS BE LIABLE FOR ANY LOST REVENUE,
PROFIT OR DATA, OR FOR SPECIAL, INDIRECT, CONSEQUENTIAL, INCIDENTAL OR
PUNITIVE DAMAGES, HOWEVER CAUSED REGARDLESS OF THE THEORY OF LIABILITY,
ARISING OUT OF OR RELATED TO THE USE OF OR INABILITY TO USE SOFTWARE, EVEN
IF SUN HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. In no event
will Sun's liability to you, whether in contract, tort (including negligence),
or otherwise, exceed the amount paid by you for Software under this Agreement.
The foregoing limitations will apply even if the above stated warranty
fails of its essential purpose.
<p>6.&nbsp;&nbsp;&nbsp; Termination. This Agreement is effective until
terminated. You may terminate this Agreement at any time by destroying
all copies of Software. This Agreement will terminate immediately without
notice from Sun if you fail to comply with any provision of this Agreement.
Upon Termination, you must destroy all copies of Software.
<p>7.&nbsp;&nbsp;&nbsp; Export Regulations. All Software and technical
data delivered under this Agreement are subject to US export control laws
and may be subject to export or import regulations in other countries.
You agree to comply strictly with all such laws and regulations and acknowledge
that you have the responsibility to obtain such licenses to export, re-export,
or import as may be required after delivery to you.
<p>8.&nbsp;&nbsp;&nbsp; U.S. Government Restricted Rights. If Software
is being acquired by or on behalf of the U.S. Government or by a U.S. Government
prime contractor or subcontractor (at any tier), then the Government's
rights in Software and accompanying documentation will be only as set forth
in this Agreement; this is in accordance with 48 C.F.R. 227.7202-4 (for
Department of Defense (DOD) acquisitions) and with 48 CFR 2.101 and 12.212
(for non-DOD acquisitions).
<p>9.&nbsp;&nbsp;&nbsp; Governing Law. Any action related to this Agreement
will be governed by California law and controlling U.S. federal law. No
choice of law rules of any jurisdiction will apply.
<p>10.&nbsp;&nbsp;&nbsp; Severability. If any provision of this Agreement
is held to be unenforceable, this Agreement will remain in effect with
the provision omitted, unless omission would frustrate the intent of the
parties, in which case this Agreement will immediately terminate.
<p>11.&nbsp;&nbsp;&nbsp; Integration. This Agreement is the entire agreement
between you and Sun relating to its subject matter. It supersedes all prior
or contemporaneous oral or written communications, proposals, representations
and warranties and prevails over any conflicting or additional terms of
any quote, order, acknowledgment, or other communication between the parties
relating to its subject matter during the term of this Agreement. No modification
of this Agreement will be binding, unless in writing and signed by an authorized
representative of each party.
<br /><br />
</div>
<form name="frmtest">
<input name="rdbtn" type="radio" value="accept">I accept</input>
<input name="rdbtn" type="radio" value="refuse">I refuse to accept</input><br />
</form>
<button onclick="action()">Proceed further...</button>
</body>
</html>
Then the calling page, main.htm say. [Blue]Watchout cross-browser issues and their resolutions.[/blue]
Code: 
<html>
<head>
<script language="javascript">
function checkit() {
    if (document.all) {
        var bchoice=document.frames["ifa"].document.forms["frmtest"].rdbtn[0].checked;
    } else {
        var bchoice=document.getElementById("ifa").contentDocument.forms["frmtest"].rdbtn[0].checked;
    }
    alert(bchoice);
    if (bchoice) {
        if (document.all) {
            document.frames["ifa"].document.location.href="[URL unfurl="true"]http://www.google.com/";[/URL]
        } else {
            document.getElementById("ifa").src="[URL unfurl="true"]http://www.google.com/";[/URL]
        }
    }
}
</script>
</head>
<body>
<h4>controlling window</h4>
<button name="btn" onclick="checkit()">just checking...</button>
<iframe id="ifa" name="ifa" src="legal_notice.htm" style="position:absolute;top:200;left:10;width:100%;height:60%;align:center;">
</iframe>
</body>
</html>
- tsuji
 
Upvote 0 Downvote
I'll check out everyone's suggestions.

Thanks!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
889
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
664
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
380
gmmastros
gmmastros
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
272
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top