Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I edited the javascript to reset the <code>scrollLeft</code>/<code>scrollTop</code> values before hiding/clearing/setting the HTML. I put all of those operations into a single function to try to figure out what was happening.</p> <p>I've tested this in Firefox and it seems to fix the scrolling problems, but I haven't tested any other browsers. It should work though.</p> <p>It seems I was right in my other answer that you need to reset the <code>scrollLeft</code> and <code>scrollTop</code> values in Firefox while the element with an overflow of <code>auto</code> is shown with a display of <code>block</code> though, as it does seem to restore the old values when shown regardless of whether the scroll values changed while hidden:</p> <pre><code>function setInteriors(html, hide) { var i = $('#interiors'); // Reset the scrollbar positions BEFORE clearing/setting the HTML i.scrollLeft(0); i.scrollTop(0); // Set the HTML if provided, otherwise empty if (html) i.html(html); else i.empty(); // Hide the element if hide is `true` if (hide) i.hide(); } function showContent(nav) { if($.browser.safari) // webkit browsers { bodyelement = $("body") } else { bodyelement = $("html, body") } bodyelement.animate({ scrollTop: 0 }, 300); setInteriors(null, true); $('#caption').hide(); $('#caption').empty(); $('#landing').empty(); // Detect document window size and use appropriate image heigh images if ($(window).height() &lt; 832 ) // size of the document window, not browser window { // threshold for 600px images + 5 caption lines var imageHeight = 500; } else { var imageHeight = 600; } // Show #content so we can show/hide #interiors and #caption individually $('#content').show(); if ((nav == "about") || (nav == "contact")) { setInteriors(null); // for fast back/forward button mashing switch(nav) { case "about": setInteriors($('#hidden-about').html()); // Load from hidden div break; case "contact": setInteriors($('#hidden-contact').html()); break; } $('#interiors').css('height', '100%'); // Dimensions for "about" and "contact" $('#interiors').css('width', '645px'); $('#interiors').css('white-space', 'normal'); $('#interiors').fadeIn(200); } // TO DO: Maybe separate #interiors to two classes for dynamic changes? else { switch(imageHeight) { case 500: $('#interiors').css('height', '520px'); // Dimensions for gallery // Extra 20px for scrollbar break; case 600: $('#interiors').css('height', '620px'); break; } $('#interiors').css('width', '100%'); setInteriors(null); // for fast back/forward button mashing $('#interiors').show(); nav = (location.hash).substring(1); // for fast back/forward button mashing $('#caption').html('&lt;P class="caption"&gt;' + $('#hidden-' + nav).html() + '&lt;/P&gt;'); // load hidden captions $('#caption').fadeIn(300); // show caption before images getImages = "http://www.shadowshapes.com/uttwerk/getImages.php?id=" + nav + "&amp;height=" + imageHeight; $.getJSON(getImages, function(json) { var max = json.length; if(max &gt; 0) { loadImage(0, max, nav); } function loadImage(index, max, nav) { if ((location.hash).substring(1) == nav) // until hash changes, load current nav { if(index &lt; max) { var newimg = new Image(); $(newimg).load(function () { if ((location.hash).substring(1) == nav) // after current image loads { // continue if no hashchange $('#interiors').append(this); $('#interiors').css('white-space', 'nowrap'); $(this).hide(); if (max - index &gt; 1) // add space after each image except last one { $(this).css('margin-right', '20px'); } $(this).css('vertical-align', 'top'); $(this).fadeIn(200, function() { loadImage(index + 1, max, nav); }); } }).attr('src', json[index]); } } } }); } } function arrangeStars() { $('img.star').each(function () { thumbposition = $(this).siblings('a.nav').children('img').position(); $(this).css("top", (thumbposition.top - 9)); $(this).css("left", (thumbposition.left - 9)); }); } function placeStar(nav) { // clear all stars on hash change if ($('div.thumb').children('img').hasClass("visiblestar")) { $('div.thumb').children('img').removeClass("visiblestar").addClass("hiddenstar"); } // attach star to selected thumbnail var test = $('div#_' + nav); if ($(test).children('img').hasClass("hiddenstar")) { $(test).children('img').removeClass("hiddenstar").addClass("visiblestar"); } } $(document).ready(function() { //$.imgpreload(['', ''], {each: null, all:null}); // bind hover event for empty/contact/about hash only $(arrangeStars()); // positions stars in the corner of each thumbnail $('img.thumb, img.thumbwithborder').hover( function () { var nav = (location.hash).substring(1); if ((nav == '') || (nav == "about") || (nav =="contact")) { nav = $(this).parent().parent().attr("id"); $('div.thumb#' + nav).children('img').removeClass('hiddenstar').addClass('visiblestar'); } }, function () { var nav = (location.hash).substring(1); if ((nav == '') || (nav == "about") || (nav =="contact")) { nav = $(this).parent().parent().attr("id"); $('div.thumb#' + nav).children('img').removeClass('visiblestar').addClass('hiddenstar'); } } ); // hash change event triggers all the navigation and content switching jQuery.hashchangeDelay = 50; $(function() { $(window).bind('hashchange', function() { var nav = (location.hash).substring(1); if (nav != '') { placeStar(nav); $('#content').fadeOut(200, function() { showContent(nav); }); } }); }) if (location.hash != '') { $(window).trigger('hashchange'); } // load landing content $(function() { $('#content').hide(function() { var landingdiv = $(document.createElement('div')).attr({id: 'landing'}); landingdiv.html($('#hidden-landing').html()); landingdiv.clone().appendTo('#interiors'); $(this).fadeIn(200); }); }); }); </code></pre>
 

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