SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru Raskolnikov's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll to bottum of Multiline Textbox to activate checkbox

    I have a terms of use area.

    I want to make the "I accept " checkbox readonly until the user scrolls through the entire textbox. Once scrolled then the user can check the box and continue on.

    Other sites do this and i would assume it is a product of some client side javascripting.

    Is there an easy way to do this?

    FYI the site is C#.NET 2.0 if that makes any difference.

    Ras

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A simple, quickly thrown together way to test this:

    Code:
    <html>
    <head>
    <style type='text/css'>
    textarea {
    	width: 500px;
    	height: 400px;
    }	
    </style>
    <script type='text/javascript'>
    function scrollCheck(obj) {
    	if (obj.scrollHeight - obj.scrollTop <= 400) { // 400 comes from the height I set in css.  If this is dynamic you will need to use something more complex (computedStyle or currentStyle)
    		// set the checkbox to not readonly
    		document.getElementById('terms').disabled = false;
    		// get rid of the event handler for the textarea (if they scroll back up, don't switch off the checkbox)
    		obj.onscroll = null;
    	}
    }	
    </script>
    </head>
    <body>
    <textarea onscroll='scrollCheck(this);'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam leo velit, dignissim non, ullamcorper eu, blandit et, sapien. Phasellus lacus eros, placerat id, ornare nec, tincidunt vel, purus. Proin sit amet nulla. Morbi facilisis. Morbi ut velit quis lorem porttitor ullamcorper. Praesent egestas rutrum odio. Donec ac lectus in orci luctus dignissim. Aliquam pellentesque urna a mi. Duis sagittis feugiat est. Donec pretium commodo nisi. In pharetra interdum nisl. Etiam quis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eget orci. Fusce imperdiet, urna sit amet lacinia pulvinar, diam enim pharetra nulla, vel facilisis ligula ante sit amet mauris.
    
    Nullam mi. Cras condimentum feugiat arcu. Donec bibendum nibh mattis pede. Nam sit amet purus. Nam vitae mi. Pellentesque vestibulum, lectus eu vehicula facilisis, neque sapien elementum pede, eleifend porttitor leo libero vitae nunc. Maecenas semper semper ante. Quisque aliquet tempor magna. Nunc adipiscing. Proin porta adipiscing orci.
    
    Cras nisl quam, feugiat nec, viverra nec, adipiscing quis, tortor. Vivamus ac eros eu ligula gravida tempus. Pellentesque vel felis. Maecenas vitae dolor. Vestibulum diam lectus, fringilla quis, convallis ac, tempor bibendum, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus laoreet nunc a eros. Ut aliquam purus eget turpis. Nunc et orci. Nam malesuada commodo nisl. Vivamus sit amet sem ac pede placerat volutpat.
    
    Aenean malesuada metus vel tellus. Sed adipiscing, sapien bibendum molestie eleifend, lorem sapien auctor sem, sit amet blandit urna metus vitae nisi. Donec consectetur neque quis elit. Suspendisse adipiscing, erat quis malesuada scelerisque, ante leo dictum massa, rutrum ornare augue erat eget nisl. Ut vitae risus. Nam ac lorem id mauris pellentesque dapibus. Nullam ut arcu. Donec convallis. Etiam pretium, arcu tincidunt fringilla placerat, massa odio semper purus, sed fringilla arcu metus vel urna. Sed pharetra adipiscing lacus. Donec placerat lacus eget est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam pharetra, ante a tincidunt fermentum, pede eros iaculis justo, et imperdiet purus massa in libero. Aenean faucibus tempus lacus. Aliquam erat volutpat.
    
    Sed elementum fermentum enim. Nam suscipit augue et dolor. Quisque interdum lacus at lectus. Curabitur in urna. Nullam nulla. Curabitur eleifend, risus at molestie posuere, mi lacus blandit nisi, quis facilisis mi erat at nunc. Suspendisse potenti. Nullam mauris. Curabitur accumsan lectus non nibh. Maecenas vestibulum consectetur elit. Praesent quis magna. Nam cursus elit id augue. Quisque nisl. Vestibulum ligula. 
    </textarea>
    <br />
    I've read it: <input id='terms' type='checkbox' disabled name='terms' />
    </body>
    </html>


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
  •