tags:

views:

78

answers:

2
+2  Q: 

jQuery - make a DIV visible on the browser

Hello all,

I have designed a long form around two pages. After the user submits the form, I need to force him/her to see the top of the form if the form contains any errors.

I have an error holder on top of the form.

My question is how to make the browser scrolls to the error holder so that the user can easily see it?

Thank you

/////////////////////////////////////////// follow Peter's comments

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <title>jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">

    // This is a functions that scrolls to the element with id id
    function goToByScroll(id)
    {
        // Scroll
        $('html,body').animate({
            scrollTop: $(id).offset().top}, 'slow');
    };

    $(document).ready( function() {
      debugger;
      $('#clearhere').click(function() {
        goToByScroll('topbar2');
      });
    });

    </script>    

</head>
<body>
    <div id="topbar2">Hello world</div>

    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>
    <div>DDDDDDDDDDDDDD</div>



    <button type="button" id="clearhere" name="clearhere">Click Me!</button>    
</body>
</html>

///////////////////////////////////////////

+5  A: 

You could use the jQuery ScrollTo plugin to smoothly scroll back up to the error holder:

// in your validation, on error
$(window).scrollTo($('#errorHolderId'), 500);

Sans plugin

If you don't want to use a plugin, you can do it with a combination of offset() or position() and scrollTop:

var errorHolderTop = $('#errorHolderId').offset().top;
$(window).scrollTop(errorHolderTop);

The reason I mentioned both offset and position is because they behave slightly differently. Offset returns coordinates relative to the document whereas position is relative to your element's offset parent.

You could also animate the scrollTop property if you wanted to create the smooth scroll effect:

var errorHolderTop = $('#errorHolderId').offset().top;
$('html, body').animate({scrollTop: errorHolderTop});

In action here.

Pat  2010-08-16 02:34:34
Hello Pat,Is there way that I don't have to use a extra plugin?Thank you
q0987  2010-08-16 03:55:15
@q0987 sure, see my edits for a few different ways of doing it.
Pat  2010-08-16 04:23:38
Hello Pat,Interesting here. Both you and Peter use $('html, body') rather than just $('html'). any reason?Thank you
q0987  2010-08-16 04:28:13
@q0987 cross-browser compatibility my good man. Some browsers want to scroll the `html` element, others want the `body`.
Pat  2010-08-16 12:17:15
Hello Pat,Many thanks for your great helps:)
q0987  2010-08-16 13:19:54
+4  A: 

To scroll to the top an element simply make use of the jQuery .animate() and .offset() functions. For example to scroll to the top of an element with a particular selector (such as an id) passed in as an argument, use this:

  // This is a function that scrolls to the element that matches selector
function goToByScroll(selector){
      // Scroll
    $('html,body').animate({
        scrollTop: $(selector).offset().top},
        'slow');
};

For example, if you have only one form on the page, you can use: goToByScroll("form");. If you want to scroll to an element with a particular id use goToByScroll("#myId"); ... etc.

If you want to adjust the scroll time to an exact number of milliseconds, just replace 'slow' with the number of millisecond, for example 1000 (no quotes) for a scroll of 1 second.

Just trigger the above function when you want to scroll to the top of your form.

Here's a live jsFiddle example (as a 5 line jQuery plugin)

Peter Ajtai  2010-08-16 03:10:39
Hello Peter,I have tried this method. However, it doesn't work for me.The firebug reports:Break on ErrorCopy$(id).offset() is nullThank you
q0987  2010-08-16 03:54:03
@q0987 - What is id? How did you call the function? Sounds like a problem with that. Take a look at how I call the function in the jsFiddle examples.
Peter Ajtai  2010-08-16 04:06:49
Hello Peter,I have posted my script following my original question. I have used firebug to debug and it reports the error as above.Thank you
q0987  2010-08-16 04:12:32
@q0987 `goToByScroll('#topbar2');` . Note the hash sign. You have to call the function using a literal jQuery selector. I got your code to work here: http://jsfiddle.net/F4TQ5/
Peter Ajtai  2010-08-16 04:17:59
Hello Peter,Thank you so much for your helps.Just curious, why you choose to use $('html, body').animate rather than just $('html').animate.I found that $('body').animate doesn't work for me.Thank you
q0987  2010-08-16 04:21:55
@q0987 - Firefox and IE use `body` in quirks mode. So selecting both `html` and `body` covers all the bases.
Peter Ajtai  2010-08-16 04:39:02

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern