Javascript content load, screenview to resolve at top of the page

[ktrevelae]

Hi,

I'm looking for help customizing some JavaScript. I'm primarily a web designer and I recently added some JavaScript to my portfolio website.

http://www.revelae.com/spotlight.html

When you click on the "more" boxes, the page loads in additional content.
Everything works great, but I want the content to "load" while bringing the screenview back up to the top of the page after each click.

I think this is a pretty quick fix, I just need to add something extra to my current JavaScript code. Any help on what to add is greatly appreciated!

Here's the code:
<script type="text/javascript">
ajax.pages = new Array();
ajax.pages["spotlight-main"] = "spotlight-main.html";
ajax.pages["spotlight-royal-rompers"] = "spotlight-royal-rompers.html";
ajax.pages["spotlight-trievas-spa"] = "spotlight-trievas-spa.html";
ajax.checkHash = function()
{
var windowHash = window.location.hash.replace("#", "");
windowHash = (windowHash == "") ? "spotlight-main" : windowHash;
if(windowHash != ajax.currentHash)
{
ajax.setHash(windowHash);
}
}
</script>


-Katie

[AndrewGSW]

I'm not sure what I'm supposed to be clicking - I can't click the word 'More..'.

But I can't see that you have a method called setHash() that you are calling..?

I note an error message "404, not found" for:

http://www.revelae.com/menu.html

Have you uploaded this file correctly.

[ktrevelae]

The idea is to click on the thumbnail image boxes below More... and the page content will change.

The menu is an old file, not used anymore. Thanks for pointing that out. I've removed it.

I'm not sure about the set hash thing, This is a 3rd party script, and I'm not to the point of being able to code JavaScript yet.

I just want the content to load within the page (Which it currently does after clicking each More: thumbnail image) and bring the view to the top of the page, as the new content is displayed.

[AndrewGSW]

Okay, I see that setHash is defined in the file swap.js.

I suppose you can just scroll to the top of the page every time the page is (re)loaded. I understand that the following should/might work

function init(){
        $("#logobar").load("logobar.html");
        $("#footer").load("footer.html");
        $("#sidebar-right").load("spotlight-sidebar-right.html");
		$("#side-breakout").load("side-breakout.html");
        $(window).scrollTop(0);
      }
      $(document).ready(init);

But I'm not convinced that this will work - you'll need to try it.

[ktrevelae]

Hi,

$(window).scrollTop(0); doesn't work because all those structural elements load on page load, and the page script loads the page content without reloading the page.

I have tried using anchor tags to direct the page view on click, but the script either ignores the anchor tags or they break the page, depending on where placed.

[AndrewGSW]

Try editing the file swap.js as follows:

// This is the core of the script, that actually loads the content for the link that has been clicked
ajax.loadPage = function(hash)
{
	$("#sort").load(ajax.pages[hash] + " #sort", function () {
         $(window).scrollTop(0);
    });
}

[AndrewGSW]

.. if that works you might like:

// This is the core of the script, that actually loads the content for the link that has been clicked
ajax.loadPage = function(hash)
{
	$("#sort").load(ajax.pages[hash] + " #sort", function () {
         $('html, body').animate({scrollTop: 0}, 'slow');
    });
}

[ktrevelae]

Thank you!!!!! It works great