Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>As Steven de Salas mentioned, adding a delay helps -> $(window).scrollTop() returns 0 if not delayed!!</p> <p>I played around a bit and came up with this example:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Scrolling Test&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .parent { margin-bottom:100px; border:1px solid red; } &lt;/style&gt; &lt;script type="text/javascript"&gt; (function ($){ $.fn.extend({ viewport : function(){ if (this.length &gt; 0) { var element = $(this.get(0)), pad = $.fn.viewport.PADDING, vp = { height : element.height() + 2 * pad, top : element.offset().top - pad, docHeight : $(window).height(), docTop : $(window).scrollTop(), completelyInViewport : false }; vp.bottom = vp.top + vp.height + pad; vp.docBottom = vp.docTop + vp.docHeight; vp.fitsInViewport = vp.height &lt;= vp.docHeight; if (vp.top &gt; vp.docTop &amp;&amp; vp.bottom &lt; vp.docBottom) { vp.completelyInViewport = true; } return vp; } return null; } }); $.fn.extend($.fn.viewport, { PADDING: 10, // ADJUST TO YOUR NEEDS LARGE_PARENT_BEHAVIOR: "bottom" // if parent list is bigger than viewport and // the active item is not in the first page of // the parents list, where should it be shown // possible: "bottom", "middle" or "top" }); $.extend({ ensureViewport: function(element, parent) { var e_vp = element.viewport(), p_vp = parent.viewport(); if (null == e_vp || null == p_vp) { return; } if (!p_vp.completelyInViewport) { if (p_vp.fitsInViewport || e_vp.bottom - p_vp.top &lt;= e_vp.docHeight) { doScroll(p_vp.top); } else { switch($.fn.viewport.LARGE_PARENT_BEHAVIOR) { case "top": doScroll(e_vp.top); break; case "middle": doScroll(e_vp.top - (e_vp.docHeight - e_vp.height)/2); break; case "bottom": default: doScroll(e_vp.bottom - e_vp.docHeight); break; } } } function doScroll(y){ window.scrollTo(0, y); // you could implement instead some sort of smooth scroling mechanism here // e.g. http://github.com/kswedberg/jquery-smooth-scroll } } }); $(function(){ window.setTimeout(function(){ var item = $("li.active-item"); if (item.size() &gt; 0) { $.ensureViewport(item, item.closest("li.parent")); } }, 0); }); })(jQuery); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="overview"&gt; &lt;ul&gt; &lt;li class="parent"&gt; parent 1 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 2 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 3 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 4 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li class="active-item"&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 5 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 6 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li class="parent"&gt; parent 7 &lt;ul class="item"&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Tested it on Opera 10.63 and it's working there too.</p> <p>Cheers</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload