SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll to bottom before tickbox is active

    Hi,

    I'm need to make one of those terms of use boxes that will only allow you to click the tick box below it if the user has scrolled to the bottom. haven't got the slightest idea where to start, so i would appreciate anyone pointing me to where i should start...

    Thanks

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked through Google for a bit and couldn't find anything concrete, but you might want to look into this more. Basically, you'll have your submit button default to "DISABLED", and when the scrollbar hits bottom it will trigger a new function to set your submit button to "ENABLED". But i'm not sure how to check to see if the scroll bar is at the bottom.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using Prototype?

    Might be worth looking at this link:
    http://www.prototypejs.org/api/document/viewport

    You can use it to work out the total document height, the viewport height and the vertical scroll offset. You could then check to see if the page has been scrolled to the bottom.

    IE. If the window is 600px high, and the document is 1000px high, then the scroll offset needs to be 400px before the tickbox is shown.

    I'm a bit tied up at the minute, but if I'll try and write some code when I get a spare 10 minutes.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Pardon me for pointing out the obvious, but place the tick box at the bottom of the page. Problem solved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the idea is to have the T&Cs inside a scrolling box as they are generally quite lengthy.

    ballboy: I've put together this for you...

    http://www.nativestudios.co.uk/scrol...ollchecker.htm

    Here's the Javascript code:

    Code Javascript:
    Event.observe(window, 'load', function() {
     
    	var form = $('form');
    	var check = form['check'];
     
    	// disable the checkbox and reset the scrolling window to the top
     
    	Form.Element.disable(check);
    	$('terms').scrollTop = 0;
     
    	// work out the scroll offset by subtracting the height of the 'terms_inner' div from the height of 'terms' div
    	var offset = $('terms_inner').getHeight() - $('terms').getHeight();
     
    	// run this function everytime the user mouses over the terms div
    	// if the value of scrollTop is greater than or equal to the required offset (its scrolled right to the bottom) then enable the checkbox
     
    	$('terms').observe('mouseover', function() {
    		if($('terms').scrollTop >= offset) {
    			Form.Element.enable(check);
    		}
    	});
     
    });

    CSS for the scrolling div:
    Code CSS:
    div#terms {
    	width: 500px;
    	height: 300px;
    	overflow: scroll;
    	margin: 0 0 10px 0;
    	border: 1px solid #CCC;
    }

    HTML for the scrolling div and checkbox:
    Code HTML:
    	<h1>Terms &amp; Conditions</h1>
     
    	<div id="terms">
     
    		<div id="terms_inner">
     
    		Terms and conditions go here...
     
    		</div>
     
    	</div>
     
    	<form id="form" id="form" action="xzy" method="post">
     
    	<p><strong>If you accept the blah, blah blah tick this box...</strong> <input type="checkbox" id="check" name="check" /></p>
     
    	</form>

  6. #6
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Native View Post
    I think the idea is to have the T&Cs inside a scrolling box as they are generally quite lengthy.

    ballboy: I've put together this for you...
    This is EXACTLY what im looking for....but....

    I did all this, and i am getting an error,
    were any of these values above place holders?


    the sample page isnt up anymore, so i cant look at a working one.

    I get a debug "EVENT" is not defined


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •