Tip: Stop DNN page from scrolling on page load

Location: BlogsAll BlogsDNN Tips    
Posted by: mamlin 1/30/2009 8:54 AM

Here's a scenario that can drive your users crazy:  A certain page on your site always seems to open in the middle instead of at the top, making users scroll up to see the start of the page.  This has happened to me more than once (thanks to the LOGIN module), but I have a simple solution...
 
 
Focus on the problem?  Focus IS the problem!
The most common cause is misplaced/unintentional page focus.  A control somewhere below the bottom edge of your window is receiving the intial "focus" and is therefore forcing your browser to scroll enough to bring the control into view.  Normally this behavior is good since it helps you determie where the cursor is.  If, however, you place a LOGIN module low enough on a page (near the bottom or under a particularly long vertical menu), then your users' browsers will often be forced to scroll in order to show the control upon page load.
 
 
Stopping the Scroll
Well, you could try to cook up some event handler to catch the window scroll and prevent the action from happening in the first place.  A simpler approach would be to simply let the page scroll and then force it back to the top.  We do this with a hidden Text/HTML module, a bit of javascript and a bit more "helper" javascript. 

You might expact that such a solution could result in a page that appears to "jump" down and then back up again.  Perhaps if you have a slow enough machine (a really, really slow machine).  In practice the page really does "jump" down and back up but it happens so quickly that you don't see it occur.
 
 
The Code
This is really simple to do but the script requires a little bit of explanation.  First, here's what to do:

  1. Add a Text/HTML module anywhere on the page.
     
  2. Edit the text of the Text/HTML module, click the "SOURCE" button, replace anything already there with the following code and then click "UPDATE" to save it:

    NOTE:  If you copy-and-paste you'll need to remove the extra space just after each "<" and just before each ">" in the DIV and SCRIPT tags.
     
    < div >
    < script >
    function addLoadEvent(func)
    { var oldonload = window.onload;
      if (typeof window.onload != 'function')
      { window.onload = func; }
      else
      { window.onload = function()
        { oldonload();
          func();
        }
      }
    }

    addLoadEvent(function() {window.scrollTo(0,0) });
    < /script >
    < /div >

     
  3. Now, go into the Text/HTML module's SETTINGS.  Uncheck "Display Container" and uncheck "Allow Print".   

    If this is a LOGIN module, uncheck "Inherit View permissions from Page" and check the VIEW option for "UNAUTHENTICATED USERS".  This insures the code only executes when users are not logged in (which is the only time the LOGIN module grabs focus for the USERNAME input box).
     
    Click "UPDATE" to save your module settings changes.

That's it!  Log out, go to a different page and then navigate back to the problem page.  You should be looking at the TOP of your page instead of being scrolled down the page as before.
 
 
Great!  But that seemed like a LOT of script just to scroll the page...
Scrolling the page was a simple one-liner with the "window.scrollTo" function.  The rest of the script was a "helper" function that leveraged javascript closure to insure that our "scrollTo" function waited until the page was fully loaded before it executed (waited until after the LOGIN module grabbed the focus). 

You can read more about how to use the "helper" script and javascript closure in general in this post.
 
If you're not convined about the use of the "helper" function, try using the javascript scroll function by itself: 

   < script > window.scrollTo(0,0) < /script >

You'll probably find that the window still has the scroll problem -- the "scrollTo" script does execute but it isn't waiting for the page to finish loading.  Using javascript "closure" takes care of this and works wonderfully well for DNN pages where you don't have direct access to add an "onload" event to a page's "body" tag.

Permalink |  Trackback

Your name:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
You are here:  
 
>> Back to the top of the blog list...

 
        account   advanced   blog   click   cloud   code   content   create   data   different   events   example   feature   file   files   free   function   good   google   just   line   list   module   modules   need   option   page   pages   query   results   role   roles   script   search   select   settings   simple   site   skin   solution   step   tags   terms   time   user   users   value   version   want  
Minimize Google AJAX Search
 
Search ES:  
This is an example of a Google AJAX Search with asynchronous search execution for two searches.  See our blog series, 'Add Google AJAX Search to your DNN skin' for info and sample code.
 
     
Minimize Get the T-Shirt
 
Shirts by Eguana Solutions
(Be cool like us!)
 
     
Minimize Most-Commented Blogs
 
 
     

Minimize Looking for more info?
 

There are tons of helpful
posts from Eguana Solutions 
on the DotNetNuke.com forums.
  
 
Click HERE to see our posts.

 
     
Minimize Modules for Sale
 

Looking for Eguana's modules? 
We're still working on them!
  

Until ours are ready to dazzle and
amaze, you'll have to make do with
the thousands of modules already
available on SnowCovered.

 
     
Minimize Favorite Modules
 

There are many great DNN modules.
A few we highly recommend are:
 
Dynamic Registration
Total control over the user signup process.  Create custom forms, execute your own SQL, use the integrated payment processing features to assign user roles, validate USERNAMEs via AJAX and much more.  Very cool.
 
URL Master
Change to friendly URLs that really ARE friendly.  Add keywords into your page URLs for better SEO.  Create 301 redirects for individual pages.  Force visitors (and search bots) to a single domain (i.e., make everyone use the "www" version of your site's URL or vice versa).  One of the single best upgrades for any DNN site.
 
Document Exchange 5 (DMX5)
Drag-and-drop from Windows Explorer directly into the DMX file manager!  File versioning, file and folder moderation, extend user permissions down to the file level (for user groups and even for individual users).  Infinite file and file info presentation options via custom display templates.  Store files locally or remotely via UNC (i.e., can securely store files somewhere besides your web server).  Much more.
 
XMOD by DNNDev
Rock-solid form module for data collection.  From simple feedback / email forms to complex, multi-part tabbed forms.  XMOD is different from other form modules because XMOD does not create a new database table for every new form definition -- an important feature if you plan to create dozens or hundreds of forms over the life of your DNN instance!  Excellent support from the developer and an active community around this module.
 
If you desire your form module to create a new DB table for each new form definition, a great alternative to XMOD is the Dynamic Forms module from DataSprings.  Dynamic Forms offers direct DB access beyond that found in XMOD as well as an easy drag-and-drop form builder option to help you get up and running very quickly.

 
     

Login